从去年（2021年）10月份就开始使用vue3，总体感觉，就是速度特别快！
趁着开发工作即将提测，手头有空余时间，也正好看着公司没有脚手架的搭建，包括规范上也有很多不足的地方，所以就现在开整吧。
- 项目搭建
- 代码规范
- 提交规范
技术栈
- ts + js
- vite
- vue
- vuex
- ele plus
- stylus
- axios
- git hook: husky
- lint: EditorConfig+ ESLint + Airbnb
- 提交规范: Commitizen + Commitlint
项目搭建
npm init @vitejs/app
本项目需要使用 Vue3 + TypeScript，所以我们选择 vue-ts，会自动安装 Vue3 和 TypeScript
安装：npm install
启动：npm run dev
修改 Vite 配置文件
1.设置 `@` 指向 `src` 目录
// 如果编辑器提示 path 模块找不到，则可以安装一下 @types/node -> npm i @types/node -D
npm install @types/node --save-dev
2.npm i vue-router@4
3.npm i vuex@next
4.npm i axios
5.npm i stylus -D
到此结束，雏形也丰富起来啦~🔚
项目搭建
1.npm i eslint -D
2.npx eslint --init
3.按照提示选择项目需要的（ESLint我选择的是*Airbnb*风格）
4.根目录创建配置文件 `.eslintrc.js`
module.exports = {
env: { browser: true, es2021: true, node: true },
extends: ['plugin:vue/vue3-recommended', 'airbnb-base'],
parserOptions: {
ecmaVersion: 12, parser: '@typescript-eslint/parser', sourceType: 'module'
},
plugins: ['vue', '@typescript-eslint'],
rules: {}
}
5.VSCode 使用 ESLint 配置文件需要去插件市场下载插件.
6.VSCode 在 `settings.json` 设置文件中，增加以下代码：
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
集成 husky 和 lint-staged
1.npx husky-init && npm install
2.npm i lint-staged -D
3.在 `package.json`里增加 lint-staged 配置项
"lint-staged": { "*.{vue,js,ts}": "eslint --fix" },
4.在根目录下创建 `.husky` 目录,并创建 `pre-commit` hook，并初始化 `pre-commit` 命令为 `npx lint-staged`
至此，husky 和 lint-staged 组合配置完成。
提交规范
npm install commitizen -D
npx commitizen init cz-conventional-changelog --save-dev --save-exact
在 package.json 中增加
"config": { "commitizen": { "path": "./node_modules/cz-conventional-changelog" } }
执行：git cz 查看是否成功,没执行以下命令时，是英文的，汉化后，显示下图：
中文化：
npx commitizen init cz-customizable --save-dev --save-exact --force
修改：
"config": {
"commitizen": {
"path": "./node_modules/cz-customizable"
}
}
根目录下创建 .cz-config.js
module.exports = {
// type 类型（定义之后，可通过上下键选择）
types: [
{ value: 'feat', name: 'feat: 新增功能' },
{ value: 'fix', name: 'fix: 修复 bug' },
{ value: 'docs', name: 'docs: 文档变更' },
{ value: 'style', name: 'style: 代码格式（不影响功能，例如空格、分号等格式修正）' },
{ value: 'refactor', name: 'refactor: 代码重构（不包括 bug 修复、功能新增）' },
{ value: 'perf', name: 'perf: 性能优化' },
{ value: 'test', name: 'test: 添加、修改测试用例' },
{ value: 'build', name: 'build: 构建流程、外部依赖变更（如升级 npm 包、修改 webpack 配置等）' },
{ value: 'ci', name: 'ci: 修改 CI 配置、脚本' },
{ value: 'chore', name: 'chore: 对构建过程或辅助工具和库的更改（不影响源文件、测试用例）' },
{ value: 'revert', name: 'revert: 回滚 commit' }
],
// scope 类型（定义之后，可通过上下键选择）
scopes: [
['components', '组件相关'],
['hooks', 'hook 相关'],
['utils', 'utils 相关'],
['element-ui', '对 element-ui 的调整'],
['styles', '样式相关'],
['deps', '项目依赖'],
['auth', '对 auth 修改'],
['other', '其他修改'],
// 如果选择 custom，后面会让你再输入一个自定义的 scope。也可以不设置此项，把后面的 allowCustomScopes 设置为 true
['custom', '以上都不是？我要自定义']
].map(([value, description]) => {
return {
value,
name: `${value.padEnd(30)} (${description})`
}
}),
// 交互提示信息
messages: {
type: '确保本次提交遵循 Angular 规范！\n选择你要提交的类型：',
scope: '\n选择一个 scope（可选）：',
// 选择 scope: custom 时会出下面的提示
customScope: '请输入自定义的 scope：',
subject: '填写简短精炼的变更描述：\n',
body:
'填写更加详细的变更描述（可选）。使用 "|" 换行：\n',
breaking: '列举非兼容性重大的变更（可选）：\n',
footer: '列举出所有变更的 ISSUES CLOSED（可选）。 例如: #31, #34：\n',
confirmCommit: '确认提交？'
},
// subject 限制长度
subjectLimit: 100,
breaklineChar: '|', // 支持 body 和 footer
}
集成 commitlint
npm i @commitlint/config-conventional @commitlint/cli -D
在根目录下创建commitlint.config.js
module.exports = { extends: ['@commitlint/config-conventional'] }
.husky 目录下创建 commit-msg 文件，并在此执行 commit message 的验证命令。
npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"
git add .
后执行：
项目结构：
ud-vue3-cli-pc
├─ .cz-config.js git提交规范
├─ .editorconfig 编辑器
├─ .eslintrc.js eslint
├─ .git
├─ .gitignore
├─ .husky
├─ README.md
├─ commitlint.config.js
├─ index.html
├─ package-lock.json
├─ package.json
├─ public
├─ src
│ ├─ .editorconfig
│ ├─ App.vue
│ ├─ assets
│ ├─ common
│ ├─ components
│ ├─ env.d.ts
│ ├─ main.ts
│ ├─ router
│ ├─ store
│ ├─ style
│ ├─ utils
│ └─ views
├─ tsconfig.json
├─ tsconfig.node.json
└─ vite.config.ts
