Vue3企业级项目标准化规范

 1.使用vue-cli创建项目

// 利用 vue-cli 创建项目
vue create imooc-admin
// 进入模板选择
Vue CLI v4.5.13
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint) 
> Manually select features  // 选择手动配置
// ----------------------------------------------------------
? Check the features needed for your project: 
 (*) Choose Vue version // 选择 vue 版本
 (*) Babel // 使用 babel
 ( ) TypeScript // 不使用 ts
 ( ) Progressive Web App (PWA) Support // 不使用 PWA
 (*) Router // 添加 vue-router
 (*) Vuex // 添加 vuex
>(*) CSS Pre-processors // 使用 css 预处理器
 (*) Linter / Formatter // 代码格式化
 ( ) Unit Testing // 不配置测试
 ( ) E2E Testing  // // 不配置测试
// ----------------------------------------------------------
 Choose a version of Vue.js that you want to start the project with 
  2.x
> 3.x // 选择 vue 3.0 版本
// ----------------------------------------------------------
 Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n // 不使用 history模式 的路由
// ----------------------------------------------------------
 ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 
> Sass/SCSS (with dart-sass) // 使用基于 dart-sass 的 scss 预处理器
  Sass/SCSS (with node-sass) 
  Less
  Stylus
// ----------------------------------------------------------
? Pick a linter / formatter config: 
  ESLint with error prevention only 
  ESLint + Airbnb config
> ESLint + Standard config // 使用 ESLint 标准代码格式化方案
  ESLint + Prettier 
// ----------------------------------------------------------
? Pick additional lint features: 
 (*) Lint on save //  
>(*) Lint and fix on commit  // 保存时 && 提交时，都进行 lint
// ----------------------------------------------------------
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files // 单独的配置文件
  In package.json
// ----------------------------------------------------------
 Save this as a preset for future projects? (y/N) n // 不存储预设

 2.升级最新的vue版本以支持script setup

因为使用 @vue/cli-v4.5.13 版本创建的项目中，vue 的版本为 v 3.0.0 。

项目需要使用最新的 script setup 语法，该语法在 v 3.0.0 版本中是不支持的，所以我们需要升级 vue 版本。可以通过以下指令进行升级：

执行：

npm i vue@3.2.8 vue-router@4.0.11 vuex@4.0.2

升级之后，查看 package.json 得到的版本应为：

"vue": "^3.2.8",
"vue-router": "^4.0.11",
"vuex": "^4.0.2"

3.代码检测工具 ESLint

打开项目中的.eslintrc.js 进行如下配置

// ESLint 配置文件遵循 commonJS 的导出规则，所导出的对象就是 ESLint 的配置对象
// 文档：https://eslint.bootcss.com/docs/user-guide/configuring
module.exports = {
  // 表示当前目录即为根目录，ESLint 规则将被限制到该目录下
  root: true,
  // env 表示启用 ESLint 检测的环境
  env: {
    // 在 node 环境下启动 ESLint 检测
    node: true
  },
  // ESLint 中基础配置需要继承的配置
  extends: ['plugin:vue/vue3-essential', '@vue/standard'],
  // 解析器
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  // 启用的规则及其各自的错误级别
  /**
   * 错误级别分为三种：
   * "off" 或 0 - 关闭规则
   * "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
   * "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
   */
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'space-before-function-paren': 'off',
    'no-unused-expressions': 'off'
  }
}

这样就可以对不符合规范的代码进行校验。

4.代码格式化Prettier

Prettier 中文网 · Prettier 是一个“有态度”的代码格式化工具

上面的ESLint只会提醒不符合规划，不会说帮忙修改，使用Prettier可以对不规范代码保存后自动修改。

（1）先在vscode中安装prettier插件。

（2）在项目中新建.prettierrc文件

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none"
}

（3）在VSCode中的设置中，将Format on Save 打开

（4）关闭其他代码格式化工具，如ESlint（指插件，不是上面配置的）

（5）将VSCode中的tab默认从4个空格，改为2个空格。

（6）prettier和ESlint会存在冲突

打开.eslintrc.js配置文件

在rules 规则下，新增规则：'space-before-function-paren': 'off',这个规则表明关闭《方法名后增加空格》的规则。

其实这个文件我在最开始的.eslintrc.js就已经是完整配置过的了。

通过这些步骤，prettier和ESLint就可以配合使用完成了。

右击鼠标选择->使用...格式化程序->选择prettier

对了，需要注意的是，这个只能修改格式，如果程序有语法错误，是不会执行的。所以程序不运行自动修改时，先看看是不是有其他格式化工具影响，也要看看是不是自己语法有错误。

6.约定式提交规范-git提交规范

通常git提交是git add . git commit -m “描述信息” 但是这个描述信息，不同的人描述的会不一样。

所以我们需要git提交规范，使用提交规范工具:commitizen，仓库名cz-cli，提供了一个git cz的指令用于代替git commit。

（1）全局安装Commitizen npm install -g commitizen@4.2.4

（2）安装并配置cz-customizable插件

a.npm i cz-xustomizable@6.3.0 --savedev

b.添加以下配置到package.json中

...
  "config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    }
  }

（3）根目录下新建.cz-config.js自定义提示文件

module.exports = {
  // 可选类型
  types: [
    { value: 'feat', name: 'feat:     新功能' },
    { value: 'fix', name: 'fix:      修复' },
    { value: 'docs', name: 'docs:     文档变更' },
    { value: 'style', name: 'style:    代码格式(不影响代码运行的变动)' },
    {
      value: 'refactor',
      name: 'refactor: 重构(既不是增加feature，也不是修复bug)'
    },
    { value: 'perf', name: 'perf:     性能优化' },
    { value: 'test', name: 'test:     增加测试' },
    { value: 'chore', name: 'chore:    构建过程或辅助工具的变动' },
    { value: 'revert', name: 'revert:   回退' },
    { value: 'build', name: 'build:    打包' }
  ],
  // 消息步骤
  messages: {
    type: '请选择提交类型:',
    customScope: '请输入修改范围(可选):',
    subject: '请简要描述提交(必填):',
    body: '请输入详细描述(可选):',
    footer: '请输入要关闭的issue(可选):',
    confirmCommit: '确认使用以上信息提交？(y/n/e/h)'
  },
  // 跳过问题
  skipQuestions: ['body', 'footer'],
  // subject文字长度默认是72
  subjectLimit: 72
}

（4）使用 git cz 代替 git commit，即可看到提示内容。

7.Git Hooks-为了避免忘记使用git cz指令 直接提交

我们希望对于不符合约定式提交规范的时候，阻止当前的提交，并抛出对应的错误提示。

Git hooks （git 钩子 || git 回调方法）也就是git在执行某个时间之前或者之后进行一些其他额外操作，我们期望阻止不合规的提交信息，就需要用到hooks的钩子函数。

下面是所有hooks，加粗的是常用hooks

 Git - githooks Documentation

8.使用husky+commitlint检查提交描述是否符合规范要求

commitlint：用于检查提交信息

husky：git hooks工具

（1）安装commitlint

安装依赖：cnpm install --save-dev @commitlint/config-conventional@12.1.4 @commitlint@12.1.4

创建commitlint.config.js

module.exports = {
  // 继承的规则
  extends: ['@commitlint/config-conventional'],
  // 定义规则类型
  rules: {
    // type 类型定义，表示 git 提交的 type 必须在以下类型范围内
    'type-enum': [
      2,
      'always',
      [
        'feat', // 新功能 feature
        'fix', // 修复 bug
        'docs', // 文档注释
        'style', // 代码格式(不影响代码运行的变动)
        'refactor', // 重构(既不增加新功能，也不是修复bug)
        'perf', // 性能优化
        'test', // 增加测试
        'chore', // 构建过程或辅助工具的变动
        'revert', // 回退
        'build' // 打包
      ]
    ],
    // subject 大小写不做校验
    'subject-case': [0]
  }
}

（2）husky

安装依赖 npm install husky@7.0.1 --save-dev

启动hooks，生成.husky文件夹  npx husky install

在package.json中写prepare指令

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "prepare": "husky install"
  },

 执行prepare指令 npm run prepare

添加commitlint 的hook到husky中，并指令在commit-msg的hooks下执行 npx --no-install commitlint --edit "$1"指令

此时的.husky的文件结构

至此，不符合规范的commit将不可再提交：

但是现在还缺少对代码格式提交规范处理

9.通过pre-commit检测提交时代码规范

ESLint和Prettier配合解决本地代码格式，但是想自动修改仓库代码格式要怎么办呢？

需要husky配合eslint实现。

通过husky监测hpre-commit钩子，在该钩子下执行 npx eslint --ext .js,.vue src指令去进行相关检测。

（1）执行 npx husky add .husky/pre-commit "npx eslint --ext .js,.vue src"添加commit时的hook（npx eslint --ext .js,.vue src会在执行到该hook时运行）

（2）该操作会生成pre-commit

（3）关闭VSCode的自动保存

（4）修改一处代码使其不符合ESlint规范

（5）执行提交操作会发现，抛出一系列的错误，代码无法提交。

（6）想要提交代码，必须处理完成所有的错误信息

到这里，也就是pre-commit检测到了代码的提交规范问题。

10.lint-staged自动修改格式错误

lint-staged可以让你当前的代码只检查本次修改更新的代码，并在出现错误的时候，自动修改并且推送，lint-staged无需单独安装，我们生成项目时，vue-cli就帮我们安装了，所以可以直接使用。

（1）修改package.json

  "config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    }
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "src/**/*.{js,vue}": [
      "eslint --fix",
      "git add"
    ]
  }

（2）如上配置，每次它只会在commit之前，校验你提交的内容是否符合本地配置的eslint规则。

如果符合，则提交成功；如果不符合，会执行eslint --fix自动修复，如果修复成功会把修复好的代码提交，如果失败，则会提示错误，让你修好这个错误之后，才允许提交代码。

（3）修改 .husky/pre-commit文件

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

# npx eslint --ext .js,.vue src
npx lint-staged

11.总结

编程格式规范问题，可以分为两大类：

1.代码格式规范

ESLint+prettier+VSCode配置

2.git提交规范

husky监测git hooks钩子，并且通过以下插件完成对应的配置：

（1）约定式提交规范

（2）commitizen：git提交规范化工具

（3）commitlint：用于检查提交信息

（4）pre-commit：git hooks钩子

（5）lint-staged：只检查本次修改更新的代码，并在出现错误的时候，自动修复并且推送。