本篇文章将从 0 开始搭建一个企业可用的项目骨架，这里我使用的包管理工具时 pnpm（跟 npm、yarn 差不多）
通过 Vite 安装 Vue3 项目
pnpm create vite
然后依次输入项目名称（可选）、选择 Vue + Typescript
代码规范
ESlint+Prettier
两个工具一个是进行代码风格检查，另一个是格式化工具。
第一步，安装相关依赖：
pnpm add eslint eslint-plugin-vue eslint-define-config -D # eslink
pnpm add prettier eslint-plugin-prettier @vue/eslint-config-prettier -D # prettire
pnpm add @vue/eslint-config-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser -D # 对ts的支持
第二步，编写对应配置文件：
.eslintrc.js
const { defineConfig } = require('eslint-define-config')
module.exports = defineConfig({
root: true,
/* 指定如何解析语法。*/
parser: 'vue-eslint-parser',
/* 优先级低于parse的语法解析配置 */
parserOptions: {
parser: '@typescript-eslint/parser',
//模块化方案
sourceType: 'module',
},
env: {
browser: true,
es2021: true,
node: true,
// 解决 defineProps and defineEmits generate no-undef warnings
'vue/setup-compiler-macros': true,
},
// https://eslint.bootcss.com/docs/user-guide/configuring#specifying-globals
globals: {},
extends: [
'plugin:vue/vue3-recommended',
'eslint:recommended',
'plugin:@typescript-eslint/recommended', // typescript-eslint推荐规则,
'prettier',
'plugin:prettier/recommended',
],
// https://cn.eslint.org/docs/rules/
rules: {
// 禁止使用 var
'no-var': 'error',
semi: 'off',
// 优先使用 interface 而不是 type
'@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
'@typescript-eslint/no-explicit-any': 'off', // 可以使用 any 类型
'@typescript-eslint/explicit-module-boundary-types': 'off',
// 解决使用 require() Require statement not part of import statement. 的问题
'@typescript-eslint/no-var-requires': 0,
// https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/ban-types.md
'@typescript-eslint/ban-types': [
'error',
{
types: {
// add a custom message to help explain why not to use it
Foo: "Don't use Foo because it is unsafe",
// add a custom message, AND tell the plugin how to fix it
String: {
message: 'Use string instead',
fixWith: 'string',
},
'{}': {
message: 'Use object instead',
fixWith: 'object',
},
},
},
],
// 禁止出现未使用的变量
'@typescript-eslint/no-unused-vars': [
'error',
{ vars: 'all', args: 'after-used', ignoreRestSiblings: false },
],
'vue/html-indent': 'off',
// 关闭此规则 使用 prettier 的格式化规则，
'vue/max-attributes-per-line': ['off'],
// 优先使用驼峰，element 组件除外
'vue/component-name-in-template-casing': [
'error',
'PascalCase',
{
ignores: ['/^el-/', '/^router-/'],
registeredComponentsOnly: false,
},
],
// 强制使用驼峰
camelcase: ['error', { properties: 'always' }],
// 优先使用 const
'prefer-const': [
'error',
{
destructuring: 'any',
ignoreReadBeforeAssign: false,
},
],
},
})
.eslintignore
/node_modules/
/public/
.vscode
.idea
.prettierrc
{
"semi": false,
"singleQuote": true,
"printWidth": 80,
"trailingComma": "all",
"arrowParens": "avoid",
"endOfLine": "lf"
}
husky
husky 是一个 Git Hook，可以帮助我们对 commit 前，push 前以及 commit 提交的信息进行验证，现在我们就来安装并配置一下这个工具，首先通过自动配置命令安装，命令如下：
pnpm dlx husky-init # pnpm
npx husky-init && npm install # npm
npx husky-init && yarn # Yarn 1
npx husky-init --yarn2 && yarn # Yarn 2+
执行完毕之后会在项目的根目录出现一个.husky的目录，目录下有一个pre-commit文件，我们将npm test修改为我们需要执行的命令，示例代码如下：
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npm test
我们配置一下 package.json，示例代码如下：
"scripts": {
"lint": "eslint src --fix --ext .js,.ts,.jsx,.tsx,.vue && prettier --write --ignore-unknown"
},
- src：要验证的目标文件夹；
- --fix：自动修复命令；
- --ext：指定检测文件的后缀。
现在我们进行commit之前会对代码进行检测并进行格式化。
lint-staged
我们配置好了 husky 后，会出现一个问题，就是我们不管是改动一行还是两行都会对整个项目进行代码检查和格式化，我们可以通过 lint-staged 这个工具来实现只对 git 暂存区中的内容进行检查和格式化，配置步骤如下：
第一步，安装 lint-staged：
pnpm add lint-staged -D
第二步，配置package.json:
{
"scripts": {},
// 新增
"lint-staged": {
"*.{vue,js,ts,tsx,jsx}": [
"eslint --fix",
"prettier --write --ignore-unknown"
]
},
}
第三步，修改 .husky/pre-commit，修改内容如下：
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx lint-staged
over!
commit message 规范
优秀项目中 commit message 都是统一风格的，这样做的好处就是可以快速定位每次提交的内容，方便之后对版本进行控制。现在我们就来配置一下 commit message 规范。
- 安装 commitizen
pnpm add commitizen -D
- 配置项目提交说明，这里我们使用 cz-conventional-changelog，或者选择 cz-customizable，我们先进行安装:
pnpm add cz-conventional-changelog -D
- 修改 package.json，代码如下：
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
}
- 进行 commit，通过 cz 这个 cli 工具：
pnpm cz # 或者 npx cz
第一步，选择本次更新的类型，每个类型的作用如下表所示：
| Type | 作用 |
|---|---|
| feat | 新增特性 |
| fix | 修复 bug |
| docs | 修改文档 |
| style | 代码格式修改 |
| refactor | 代码重构 |
| perf | 改善性能 |
| test | 测试 |
| build | 变更项目构建或外部依赖（例如 scopes: webpack、gulp、npm等） |
| ci | 更改持续集成软件的配置文件和 package.json 中的 scripts 命令 |
| chore | 变更构建流程或辅助工具(比如更改测试环境) |
| revert | 代码回退 |
第二步，填写改变的作用域（可选），可以写组件名或者文件名；第三步填写提交的信息（建议填写）；第四步填写提交的详细描述（可选）；第五步选择是否是一次重大的更改（可选）；第六步是否影响某个open issue（可选）。整个过程如下图：
我们也可以配置一个 script，示例代码如下：
package.json
"scripts": {
"commit": "cz"
},
待续。。。