使用 create-vue 脚手架创建项目

步骤：

1. 执行创建命令

pnpm create vue

2. 选择项目依赖内容

3. 安装项目开发需要的一些插件（vscode中）

Vue Language Features (Volar)   // vue3语法支持
TypeScript Vue Plugin (Volar)   // vue3中更好的ts提示
Eslint  // 代码风格校验

注意：vscode 安装了 Prettier 插件的可以先禁用，或者关闭保存自动格式化功能，避免和项目的 Eslint 风格冲突。

4. 完成 Eslint 的预制配置（.eslintrc.cjs里粘贴）

rules: {
  'prettier/prettier': [
    'warn',
    {
      singleQuote: true,
      semi: false,
      printWidth: 80,
      trailingComma: 'none',
      endOfLine: 'auto'
    }
  ],
  'vue/multi-word-component-names': [
    'warn',
    {
      ignores: ['index']
    }
  ],
  'vue/no-setup-props-destructure': ['off']
}

// 格式：单引号，没有分号，行宽度100字符，没有对象数组最后一个逗号，换行字符串自动
// vue 组件需要大驼峰命名，除去 index 之外，App 是默认支持的
// 允许对 props 进行解构，我们会开启解构保持响应式的语法糖

5. vscode 开启 Eslint 自动修复，在 vscode 的设置里找到 settings.json 进行修改：

"editor.codeActionsOnSave": {
  "source.fixAll": true,
},

6. 代码检查工作流

6.1 初始化与安装

# 如果出现报错，需要先 git init 初始化仓库
pnpm dlx husky-init && pnpm install

6.2 修改 .husky / pre-commit 文件

pnpm lint

6.3 lint-staged 配置

6.3.1 安装

pnpm i lint-staged -D

6.3.2 配置 package.json

{
  // ... 省略 ...
  "lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --fix"
    ]
  }
}

{
  "scripts": {
    // ... 省略 ...
    "lint-staged": "lint-staged"
  }
}

6.3.3 在 .husky / pre-commit 文件添加一条规则

pnpm lint-staged

7. 项目结构调整

项目使用sass预处理器，安装sass，即可支持scss语法：

pnpm add sass -D

----------End----------