1.创建项目

创建项目入口
Vue ui

配置完毕后到达该页面截屏2022-05-19 下午5.45.55.png

配置完毕后安装依赖:axios 截屏2022-05-19 下午5.48.12.png

npm i
npm run serve

安装插件截屏2022-05-20 上午10.10.19.png

设置format on save 截屏2022-05-20 上午10.12.04.png

使用...格式化文档截屏2022-05-20 上午10.14.02.png

在配置下.eslintrc.js里的rules 新增为了解决eslint与prettier冲突

截屏2022-05-21 下午12.11.58.png 截屏2022-05-21 下午12.12.49.png

git commit 使用及规范

1.安装commitizen和cz-customizable

npm install -g commitizen@4.2.4

npm i cz-customizable@6.3.0 --save-dev

2.在package.json中进行新增

"config": {

"commitizen": {

"path": "node_modules/cz-customizable"

}

}

3.在根目录下新建.cz-config.js文件并写入配置之后就可以用git cz来代替git commit

截屏2022-05-20 下午2.38.23.png

截屏2022-05-20 下午2.47.40.png

截屏2022-05-20 下午2.50.34.png

4.提交到个人码云上

截屏2022-05-20 下午2.58.22.png

5.强制性的Commit规范

-使用husky进行强制git代码提交规范

npm install --save-dev @commitlint/config-conventional@12.1.4 @commitlint/cli@12.1.4

npm install husky@7.0.1 --save-dev

npx husky install

截屏2022-05-20 下午3.06.08.png

6.在package.json中添加指令\

"prepare": "husky install"

截屏2022-05-20 下午3.08.46.png

7.新增husky配置文件并往里面写入

npx husky add .husky/commit-msg

npx --no-install commitlint --edit

截屏2022-05-20 下午3.10.56.png

强制性的commit就配置完成了

截屏2022-05-20 下午3.14.08.png

8.强制Commit之后呢我们也需要对代码格式化也进行一个强制执行

##使用husky强制代码格式化创建配置文件
npx husky add .husky/pre-commit

8.往第六步生成的文件中写入

npx lint-staged

截屏2022-05-20 下午3.18.13.png

9.把package.json文件的lint-staged修改为

"lint-staged": {

   "src/**/*.{js,vue}": [ //src目录下所有的js和vue文件

   "eslint --fix", // 自动修复

   "git add" // 自动提交时修复

   ]

}

后台管理项目_vue3.2版(配置规范篇)