1. 升级Vue Cli至最新版
npm install -g @vue/cli
2. 打开Vue可视化界面
vue ui
3. 创建项目，选择手动配置项目
4. 选择功能项
5. 选择配置项
6. 解决Eslint 和 Prettier 之间的冲突
prettier 负责代码美化，eslint负责代码质量检测和一部分代码美化；两者的美化规则冲突时，就会导致prettier美化后的代码无法通过eslint的检查，社区成熟的解决方案是prettier负责美化，eslint只负责代码检测。
1.0>. 安装插件
# 此插件关闭eslint中与prettier冲突的规则
npm install --save-dev eslint-plugin-prettier
# 此插件赋予eslint用prettier格式化代码的能力
npm install --save-dev eslint-config-prettier
2.0> 配置.eslintrc.js，在 extends中加入 plugin:prettier/recommended
extends: [
"plugin:vue/vue3-essential",
"eslint:recommended",
"@vue/typescript/recommended",
"plugin:prettier/recommended",
],
3.0> 创建 .prettierrc.js 配置文件，配置如下内容
module.exports = {
tabWidth: 4, // 使用4个空格缩进
semi: false, // 代码结尾是否加分号
trailingComma: 'none', // 代码末尾不需要逗号
singleQuote: true, // 是否使用单引号
printWidth: 100, // 超过多少字符强制换行
arrowParens: 'avoid', // 单个参数的箭头函数不加括号 x => x
bracketSpacing: true, // 对象大括号内两边是否加空格 { a:0 }
endOfLine: 'auto', // 文件换行格式 LF/CRLF
useTabs: false, // 不使用缩进符,而使用空格
quoteProps: 'as-needed', // 对象的key仅在必要时用引号
jsxSingleQuote: false, // jsx不使用单引号,而使用双引号
jsxBracketSameLine: false, // jsx标签的反尖括号需要换行
rangeStart: 0, // 每个文件格式化的范围是文件的全部内容
rangeEnd: Infinity, // 结尾
requirePragma: false, // 不需要写文件开头的 @prettier
insertPragma: false, // 不需要自动在文件开头插入 @prettier
proseWrap: 'preserve', // 使用默认的折行标准
htmlWhitespaceSensitivity: 'css' // 根据显示样式决定html要不要折行
}
4.0> 配置 .vscode > settings.json
{
"editor.formatOnSave": true, // 每次保存的时候自动格式化
"editor.codeActionsOnSave": { // 保存时自动启用 eslint --fix 自动修复
"source.fixAll": true
}
}
5.0> 执行如下命令运行ESLint，检查、修复不规范的代码
npm run lint
注意：修改.prettierrc配置后，可能会发生eslint和prettier再次冲突，这是因为vscode插件缓存没有及时更新，重启下vscode即可；
7. Git配置，确保各平台换行符统一
在windows下，git的autocrlf选项默认为true，即换行符会被自动转成以CRLF，导致ESLint报如下错误：
error delete `␍` prettier/prettier
执行以下命令可禁止git自动转换换行符；
git config --global core.autocrlf false
然后，删除项目，重新git clone
8. 自动按需导入
a>. 安装如下两个插件：
npm install unplugin-vue-components unplugin-auto-import -D
b>. 在 tsconfig.json 的 include 配置中加入 components.d.ts 和 auto-imports.d.ts，使 TypeScript 在编译阶段能够识别自动引入的组件或函数
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx",
"components.d.ts",
"auto-imports.d.ts"
],
c>. 在 .eslintrc.js 的 extends 配置中加入 ./.eslintrc-auto-import.json 和 ./.eslintrc-components.json，使 eslint 不对 auto-imports.d.ts 和 components.d.ts 声明文件报错
extends: [
"plugin:vue/vue3-essential",
"eslint:recommended",
"@vue/typescript/recommended",
"plugin:prettier/recommended",
"./.eslintrc-auto-import.json",
"./.eslintrc-components.json",
],
unplugin-vue-components 内置了市面上常见的所有ui库解析器，用于实现UI组件的自动按需导入，同时也可按需引入所有自定义组件；
unplugin-auto-import 用于实现 Vue API 的自动按需引入；
9. 自动处理SVG
a> 安装webpack loader
# 用于将svg图片制成symbol符号雪碧图，并放置到body标签下，以供调用
npm install svg-sprite-loader -D
# 用于压缩SVG图片，删除SVG中的冗余信息，去除纯色图标中的fill属性，以便使用css直接修改图标颜色
npm install svgo-loader --save-dev
b> 封装Vue组件，以方便使用，如下：
## 使用示例（test为svg图片的名称）
<svg-icon name="test"></svg-icon>
c> 使用webpack按需导入所有图标
// keys 返回包含所有模块名的数组，并在map循环中使用requireContext逐个自动导入
// require.context是webpack的特性用于导入
const requireAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().map(requireContext);
const req = require.context("/src/assets/svg", false, /.svg$/);
requireAll(req);
详见：https://juejin.cn/post/6990159719558021133
10. 配置ESLint，以支持 Vue 编译宏
Vue 3 Script Setup 引入了 defineProps、defineEmits、defineExpose、withDefaults 编译器宏，但 ESLint 可能会提示这些编译器宏函数未定义，需要进行如下配置：
module.exports = {
env: {
"vue/setup-compiler-macros": true,
},
....
}
