vite+vue3+ts 手把手教你创建一个vue3项目

徐博士

已于 2024-01-18 17:04:25 修改

阅读量8.3k

点赞数 3

文章标签：前端 javascript vue.js typescript

于 2022-12-21 10:25:37 首次发布

本文链接：https://blog.youkuaiyun.com/attengtiong/article/details/128393733

版权

一.pnpm管理项目

为什么选择它？

快: pnpm是同类工具速度的将近⒉倍
高效: node_modules中的所有文件均链接自单一存储位置
支持单体仓库:monorepo，单个源码仓库中包含多个软件包的支持
权限严格: pnpm 创建的node_modules默认并非扁平结构，因此代码无法对任意软件包进行访问

二.Vite介绍

极速的服务启动，使用原生ESM文件，无需打包!（原来整个项目的代码打包在一起,然后才能启动服务)
轻量快速的热重载无论应用程序大小如何，都始终极快的模块热替换(HMR)
丰富的功能对TypeScript、JSx、CSS等支持开箱即用。
优化的构建可选“多页应用”或“库”模式的预配置 Rollup 构建
通用的插件在开发和构建之间共享Rollup-superset插件接口。
完全类型化的API灵活的API和完整TypeScript

Vite3修复了400+issuse,减少了体积，Vite决定每年发布一个新的版本

三.项目初始化

pnpm init # 初始化package.json
pnpm install vite -D #安装vite

3.1 package.json

增加启动命令

"scripts": {
   
  "dev": "vite",
  "build": "vite build"
},

3.2 index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vite</title>
</head>
<body>
  <!-- 稍后vue项目挂载到这个元素上 -->
  <div id="app"></div>
  <!-- vite时基于esModule的 -->
  <script src="./src/main.ts" type="module"></script>
</body>
</html>

3.3 src/main.ts

pnpm install vue #安装vue

import {
   createApp} from 'vue';
import App from './App.vue';//这里会报错，不支持.vue
createApp(App).mount('#app');

3.4 src/env.d.ts

// 声明文件，用来识别.vue文件的类型=>垫片 【ts只能处理ts文件，.vue结尾得文件要模块声明】
declare module '*.vue' {
   
  import type {
   DefineComponent} from 'vue';
  const component:DefineComponent<{
   },{
   },any>
  export default component;
}

3.5 vite.config.ts

我们需要让vite支持.vue文件的解析

pnpm install @vitejs/plugin-vue -D

import {
    defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";//解析.vue文件

// vite默认只会编译ts 
export default defineConfig({
   
  plugins:[vue()]
})

3.6 vue-tsc

Vite仅执行.ts文件的转译工作，并不执行任何类型检查。vue-tsc可以对Vue3进行Typescript类型校验

pnpm install typescript vue-tsc -D

创建tsconfig.json

{
   
  "compilerOptions": {
   
    "target": "esnext", // 目标转化的语法
    "module": "esnext", // 转化的格式
    "moduleResolution": "node", // 解析规则
    "strict": true, // 严格模式
    "sourceMap": true, // 启动sourcemap调试
    "jsx": "preserve", // 不允许ts编译jsx语法
    "esModuleInterop": true, // es6和commonjs 转化
    "lib": ["esnext"

最低0.47元/天解锁文章