1. 升级Vue Cli至最新版

npm install -g @vue/cli

2. 打开Vue可视化界面

vue ui

3. 创建项目，选择手动配置项目

image.png

4. 选择功能项

image.png

5. 选择配置项

image.png

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,
    },
    
    ....
}