Vue3+Vite+Ts 项目实战 01 Vite 创建项目、ESLint+TS+GitCommit配置、Vue3新特性介绍
前置声明：
- Vue3 和 Vite 还在持续更新，中文文档仍未全部完善，该笔记的内容在未来可能过时，建议多参考英文文档，使用最新版本。
- 本案例使用的后端 API 服务，基于 Express 搭建，使用 json 文件管理数据，Git 仓库和使用文档。
- 本案例旨在学习 Vite 和 Vue3 搭建配置应用，并没有开发完整的业务功能。
项目初始化
使用 Vite 创建项目
Vite 官方中文文档 (vitejs.dev)
官方声明：Vite 需要 Node.js 版本 >= 12.0.0。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。
本例使用时 Node.js 12 版本执行 build 命令报错，于是改用 Node.js 16 版本，切换版本记得重新
npm install避免有依赖没有更新。
# 创建
npm init vite@latest
√ Project name: ... shop-admin # 项目名称
√ Select a framework: » vue # 选择框架
√ Select a variant: » vue-ts # 选择 vue 或 vue-ts
cd ./shop-admin
git init
npm install
npm run dev
访问 http://localhost:3000/
初始目录结构说明
├─ public # 存放不需要编译构建的静态资源
│ └─ favicon.ico
├─ src # 存放需要编译构建的文件
│ ├─ assets
│ │ └─ logo.png # 需要编译构建的静态资源
│ ├─ components
│ │ └─ HelloWorld.vue
│ ├─ App.vue
│ ├─ env.d.ts # ts 类型声明
│ └─ main.ts # 启动入口文件
├─ .gitignore # git 忽略文件
├─ index.html # 单页文件的模板文件
├─ package-lock.json
├─ package.json
├─ README.md
├─ tsconfig.json # ts 配置文件
├─ tsconfig.node.json
└─ vite.config.ts # vite 配置文件
package.json：
{
"scripts": {
// 启动开发服务器
"dev": "vite",
// 构建生产环境产物：校验 ts 类型，通过后执行 vite 打包命令
"build": "vue-tsc --noEmit && vite build",
// 本地预览生产构建产物：以前需要将打包文件配置到 nginx 等服务器中才能预览，vite 简化了这个流程
"preview": "vite preview"
},
}
关于构建失败的原因
本笔记编写时，运行 npm run build 会报大量错误：
Cannot access ambient const enums when the '--isolatedModules' flag is provided.
原因是 Vite 官方建议配置 TypeScript 的编译器选项：isolatedModules 为 true。
{
"compilerOptions": {
"target": "esnext",
"useDefineForClassFields": true,
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
// "isolatedModules": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"]
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}
由于这个导致的编译报错，Issue 并没有得到解决，暂时只能先将其设置为 false 或删除这个选项。
添加自定义目录结构
在 src 目录下添加一些文件夹：
├─ api # API 接口封装
├─ styles # 全局样式
├─ utils # 工具模块
├─ plugins # 插件
├─ views # 路由页面
├─ router # 路由模块
├─ store # vuex 容器模块
├─ layout # 公共布局组件
└─ composables # 项目中提取出来的组合式 API 函数模块
代码规范和 ESLint
在 Vite 创建的项目中默认没有集成 ESLint，并且目前官方也没有任何和 ESLint 相关的内容，所以需要手动集成配置 ESLint。
基础配置
# 安装 eslint(当前版本 8.5.0)
npm i eslint -D
# 初始化 eslint 配置文件
npm init @eslint/config
# 如何使用 ESLint
? How would you like to use ESLint? ...
# 检查语法 找到问题 强制代码规范
> To check syntax, find problems, and enforce code style
# 项目中使用的 JS 模块规范
√ What type of modules does your project use? · esm
# 前端框架
√ Which framework does your project use? · vue
# 是否使用 TS
√ Does your project use TypeScript? · No / Yes
# 代码运行环境
√ Where does your code run? · browser
# 代码规范
? How would you like to define a style for your project? ...
# 使用一个流行的代码规范
> Use a popular style guide
> Standard: https://github.com/standard/standard
# 配置文件生成 js 类型的文件
√ What format do you want your config file to be in? · JavaScript
# ...
生成的 eslint 配置文件：
// .eslintrc.js
module.exports = {
env: {
browser: true,
es2021: true
},
extends: [
'plugin:vue/essential',
'standard'
],
parserOptions: {
ecmaVersion: 'latest',
parser: '@typescript-eslint/parser',
sourceType: 'module'
},
plugins: [
'vue',
'@typescript-eslint'
],
rules: {
}
}
本人基于个人习惯，修改了两条规则：
rules: {
// 要求或禁止函数圆括号之前有一个空格
'space-before-function-paren': [2, {
anonymous: 'always',
named: 'never',
asyncArrow: 'always'
}],
// 要求组件名（文件名）必须是多单词的
'vue/multi-word-component-names': 0
}
package.json 中添加验证脚本：
"scripts": {
...
// 检查代码和自动修复
"lint": "eslint src/**/*.{js,jsx,vue,ts,tsx} --fix"
},
npm run lint 运行 eslint 验证：
# App.vue 和 components/HelloWorld.vue 验证失败，template 只能包含一个根节点
error The template root requires exactly one element vue/no-multiple-template-root
这个规则适用于 Vue 2，Vue 3 没有这个限制。查看 eslint 配置文件中使用的插件 plugin:vue/assential，来自 eslint-plugin-vue 包，查看 eslint-plugin-vue\lib 目录（官方介绍）：
├─ base.js
├─ essential.js # 当前配置的验证规则
├─ no-layout-rules.js
├─ recommended.js
├─ strongly-recommended.js
# 以上是 Vue2 的验证规则
# 以下是 Vue3 的验证规则
├─ vue3-essential.js
├─ vue3-recommended.js
└─ vue3-strongly-recommended.js
将 eslint 配置为 Vue 3 的验证规则（本文使用最严格的）：
// .eslintrc.js
module.exports = {
...
extends: [
// 'plugin:vue/essential',
// 使用 vue3 规则
'plugin:vue/vue3-strongly-recommended',
'standard'
],
...
}
编译宏和 defineProps、defineEmits、no-undef 规则警告
再次运行 npm run lint：
# HelloWorld.vue 报错
error 'defineProps' is not defined no-undef
defineProps 和 defineEmits 是 Vue3 定义的编译宏（compiler macros），只能在