我正在参与掘金创作者训练营第4期，点击了解活动详情，一起学习吧！
前言
vite2的发布，和vue3.2版本<script setup>语法糖正式毕业，使得开发体验更加的丝滑～其实从
vue3发布、vite诞生，就一直在零零碎碎的学习着相关的技术知识点，所以此次想从0到1搭建一套后台lite模板，从过程中学习，学习中成长。话不多说，开整
初始化项目
执行创建命令
# npm 6.x
npm create vite@latest my-vue-app --template vue
# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue
# yarn
yarn create vite my-vue-app --template vue
# pnpm
pnpm create vite my-vue-app -- --template vue
这个项目的包管理用具我用的是pnpm,并且使用ts所以我执行的是
pnpm create vite vue-admin-lite -- --template vue-ts
选择pnpm的原因就是我想用...
install&dev
pnpm install # 安装依赖
pnpm dev # 启动开发服务
当看到这个亲切的页面，说明第一步成功了。
制定代码规范
Eslint
安装依赖
pnpm add eslint eslint-plugin-vue @typescript-eslint/eslint-plugin eslint-plugin-prettier @typescript-eslint/parser eslint-config-prettier -D
配置检验规则: 在项目根目录下新建.eslintrc.js
// 配置文档: https://eslint.bootcss.com/docs/user-guide/configuring
module.exports = {
// 制定配置文件父级
root: true,
// 指定环境的全局变量，下面的配置指定为浏览器环境
env: {
browser: true,
node: true,
es2021: true,
},
// 指定eslint解析器
parser: 'vue-eslint-parser',
extends: [
'eslint:recommended',
'plugin:vue/vue3-recommended',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended',
'prettier',
],
parserOptions: {
ecmaVersion: 12,
parser: '@typescript-eslint/parser',
sourceType: 'module',
ecmaFeatures: {
jsx: true,
},
},
plugins: ['vue', '@typescript-eslint', 'prettier'],
rules: {
"@typescript-eslint/no-unused-vars": "error",
'prettier/prettier': 'error'
},
globals: {
defineProps: 'readonly',
defineEmits: 'readonly',
defineExpose: 'readonly',
withDefaults: 'readonly',
},
}
Prettier
# 安装prettier
pnpm add prettier -D
配置格式化规则: 新建.prettier.js
module.exports = {
tabWidth: 2,
jsxSingleQuote: true,
jsxBracketSameLine: true,
printWidth: 100,
singleQuote: true,
semi: false,
overrides: [
{
files: '*.json',
options: {
printWidth: 200,
},
},
],
arrowParens: 'always',
}
添加脚本
在package.json中添加对应检查/格式化代码格式脚本
//...
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"preview": "vite preview",
+ "lint": "eslint src --fix --ext .ts,.tsx,.vue,.js,.jsx",
+ "prettier": "prettier --write ."
}
//...
执行命令查看效果, nice~
git commit 规范 + git hook
除了 代码格式规范 之外，还有另外一个很重要的规范就是 git 提交规范;
本项目以目前使用较多的 Angular团队规范 延伸出的 Conventional Commits specification（约定式提交） 为例的。
使用Commitizen帮助规范化提交代码
全局安装commitizen
pnpm add -g commitizen
在项目中安装cz-customizable
pnpm add cz-customizable -D
在package.json中添加相应配置
"config": {
"commitizen": {
"path": "node_modules/cz-customizable"
}
}
新建.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
}
git hook
当然虽然提供了规范提交的工具，但也难以避免已其他的方式提交，所以还是需要一个hook工具，在pre-commit中实现代码检查，代码格式美化，单元测试等操作。
需要借助的工具: husky,lint-staged mrm(用于安装前2个)
安装mrm
pnpm add -D mrm
安装lint-staged, husky
# 这里安装lint-staged会捎带把husky一起安装
npx mrm lint-staged
调整package.json相关prettier配置
"lint-staged": {
"*.{js,jsx,vue,ts,tsx}": [
"pnpm lint",
"prettier --write",
"git add"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
}
测试效果: 在lint阶段没有通过，成功拦截~
本篇总结
- 完成项目初始化
- 配置代码规范，校验脚本，修复脚本
- 配置提交代码规范，添加提交辅助工具，git hook 总体上来看目前只是做了一些基础性的工作。后续篇会陆续开展其他方面的开发～
路漫漫其修远兮，吾将上下而求索
