三.配置husky +lint-staged
使用 husky 和 lint-staged 来帮助团队进行编码规范
husky 是 Git Hook 工具,可以设置 git 在各个阶段触发的命令.
1.执行以下命令安装 husky
注意: 执行以下命令之前,必须使用 git init 初始化 git 仓库
pnpm dlx husky-init
pnpm install
可以看到,在 package.json 中添加了一个脚本
"prepare": "husky install"
并且在项目下创建了 .husky 目录
husky 包含了很多 hook, 这里,我么使用 pre-commit 来触发 eslint
2.安装 lint-staged
执行下列命令进行安装
pnpm i lint-staged -D
接下来结合 prettier 和 eslint 的配置信息在 package.json 中加入以下配置
"lint-staged": {
"*.{md,js,ts,tsx,vue,scss}": "prettier --write",
"*.{vue,js,jsx,cjs,mjs,ts,tsx,cts,mts}": "eslint --fix"
},
"husky":{
"hooks":{
"pre-commit": "lint-staged"
}
}
使用 husky 生成 pre-commit 文件,触发 lint-staged
npx husky add .husky/pre-commit "npx --no-install lint-staged"
可以看到: .husky 目录下生成了 pre-commit 文件,内容为:
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx --no-install lint-staged
3.配置代码提交规范
安装提交工具,执行以下命令
pnpm i commitizen cz-conventional-changelog -D
pnpm i cz-customizable commitlint-config-cz -D
pnpm i @commitlint/cli @commitlint/config-conventional -D
在项目下新建 .cz-config.js 文件,用于自定义提示信息,配置代码如下:
module.exports = {
types: [
{ value: 'feature', name: 'feature: 增加新功能' },
{ value: 'fix', name: 'fix: 修复bug' },
{ value: 'bug', name: 'bug: 测试反馈bug列表中的bug号' },
{ value: 'ui', name: 'ui: 更新UI' },
{ value: 'docs', name: 'docs: 文档变更' },
{ value: 'style', name: 'style: 代码格式(不影响代码运行的变动)' },
{ value: 'perf', name: 'perf: 性能优化' },
{
value: 'refactor',
name: 'refactor: 重构(既不是增加feature，也不是修复bug)'
},
{ value: 'release', name: 'release: 发布' },
{ value: 'deploy', name: 'deploy: 部署' },
{ value: 'test', name: 'test: 增加测试' },
{
value: 'chore',
name: 'chore: 构建过程或辅助工具的变动(更改配置文件)'
},
{ value: 'revert', name: 'revert: 回退' },
{ value: 'build', name: 'build: 打包' }
],
// override the messages, defaults are as follows
messages: {
type: '请选择提交类型:',
customScope: '请输入您修改的范围(可选):',
subject: '请简要描述提交 message (必填):',
body: '请输入详细描述(可选):',
breaking: '是破坏性修改吗？(可选，默认N)',
footer: '关联关闭的issue(可选):',
confirmCommit: '确认使用以上信息提交吗？(yes/no)'
},
allowCustomScopes: true,
// allowBreakingChanges: ['feat', 'fix'],
// 跳过哪些步骤
// skipQuestions: ['body', 'breaking'],
subjectLimit: 100
}
接下来在 package.json 中添加如下配置
"scripts": {
"commit": "git-cz",
},
"config": {
"commitizen": {
"path": "node_modules/cz-customizable"
}
},
4.集成 commitlint 验证提交规范
以上配置完成之后,我们还是可以使用 git commit 命令提交不规范的代码格式,所以需要 commitlint 验证提交规范
在项目下新建 commitlint.config.js 来配置 commitlint和提交代码的规则,配置如下:
module.exports = {
extends: ['@commitlint/config-conventional', 'cz'],
rules: {
'type-enum': [
2,
'always',
[
'feature', // 新功能（feature）
'bug', // 此项特别针对bug号，用于向测试反馈bug列表的bug修改情况
'fix', // 修补bug
'ui', // 更新 ui
'docs', // 文档（documentation）
'style', // 格式（不影响代码运行的变动）
'perf', // 性能优化
'release', // 发布
'deploy', // 部署
'refactor', // 重构（即不是新增功能，也不是修改bug的代码变动）
'test', // 增加测试
'chore', // 构建过程或辅助工具的变动
'revert', // feat(pencil): add ‘graphiteWidth’ option (撤销之前的commit)
'merge', // 合并分支， 例如： merge（前端页面）： feature-xxxx修改线程地址
'build' // 打包
]
],
// <type> 格式 小写
'type-case': [2, 'always', 'lower-case'],
// <type> 不能为空
'type-empty': [2, 'never'],
// <scope> 范围不能为空
'scope-empty': [2, 'never'],
// <scope> 范围格式
'scope-case': [0],
// <subject> 主要 message 不能为空
'subject-empty': [2, 'never'],
// <subject> 以什么为结束标志，禁用
'subject-full-stop': [0, 'never'],
// <subject> 格式，禁用
'subject-case': [0, 'never'],
// <body> 以空行开头
'body-leading-blank': [1, 'always'],
'header-max-length': [0, 'always', 72]
}
}
使用 husky 生成 commit-msg 文件,验证提交信息
npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"
最后,在 package.json 中添加下列代码
"husky":{
"hooks":{
"pre-commit": "lint-staged",
"commint-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
}
至此,我们的代码提交规范以配置完毕,下面进行验证
5.验证提交规范
先试用 git add . 把代码存放到暂存区, 在使用 git cz 命令提交
第一步,选择本次更新的类型
第二步,选择本次修改的范围 (可选)
第三步,针对本次提交改动写一个简短的描述
第四步,针对本次提交改动写一个详细的描述 (可选),不填写可按回车跳过
第五步,确认是否与某个未关闭的 issue 有关联,如果有输入 y ,按回车后填写具体的 issue, 没有的话回车跳过
第六步,确认提交信息,确认无误,回车确认
温馨提示: 提交代码之前,可以使用 pnpm eslint 命令检查一下代码格式
四.element-plus
引入 element-plus
执行安装命令
pnpm i element-plus
pnpm i @element-plus/icons-vue
pnpm i sass -D
在 main.ts 中引入并挂载,全局注册 element-plus 的图标
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
const app = createApp(App)
app.use(ElementPlus).mount('#app')
这里,我们使用插件,按需自动导入 element-plus 组件
首先,执行下列的命令安装插件
pnpm i unplugin-vue-components unplugin-auto-import -D
其次,在 vite.config.ts 文件夹先导入插件,然后在 plugins 中添加
// 按需导入element-plus组件
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
AutoImport({
resolvers: [ElementPlusResolver()]
}),
Components({
resolvers: [ElementPlusResolver()]
}),
使用 button 组件测试以下,就可以看到如图所示的结果
配置全局scss样式文件
在 路径src/styles 新建三个个文件夹
element.scss: 修改elementPlus的主题色
/* 只需要重写需要的即可 */
$--colors: (
'primary': (
'base': #0c3ca8,
),
'success': (
'base': #67c23a,
),
'warning': (
'base': #e6a23c,
),
'danger': (
'base': #f56c6c,
),
'error': (
'base': #f56c6c,
),
'info': (
'base': #909399,
),
);
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
$colors: $--colors
);
// 全量引入
@use 'element-plus/theme-chalk/src/index.scss' as *;
variables.module.scss: 定义自己的样式变量
$test-color: blue
index.scss: 引入上面连个样式文件
@import './element.scss';
@import './variables.module.scss';
然后在 vite 中加入以下配置
plugins: [
vue(),
AutoImport({
resolvers: [
ElementPlusResolver({
importStyle: 'sass'
})
]
}),
Components({
dts: true,
resolvers: [
ElementPlusResolver({
importStyle: 'sass',
directives: true,
version: '1.56.1'
})
]
}),
ElementPlus({
useSource: true
})
],
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/styles/index.scss" as *;`
}
}
},
