从零到无搭建Vue项目及代码风格规范

• 注：已经有vue项目的可以跳过项目初始化

Vue项目搭建

• 环境搭建 安装nvm 方便后续切换不通的node版本
  nvm官网
  
  傻瓜安装就行 或者搜下自己（非本文重点）
• nvm 安装好后 安装一个Node版本 本文使用的
  
• 有了环境开始创建Vue项目 打开命令行 cmd

npm install -g vue-cli			// 全局安装Vue CLI脚手架工具

然后就可以使用脚手架创建项目了

vue create my-vue-project		// 创建名为"my-vue-project"的Vue项目

Default上面的选项是我之前搭建的保存的项目预设，这里我们选择最后一个自定义，按方向键向下，然后按Enter键,这里没选vuex，后面安装pina吧

按空格勾选对应的选项，这里我们勾选如上图，继续Enter键下一步

这里选择Vue3.x版本 继续Enter键下一步，其他选择如下

等待完成就可以了

项目好了，目录结构

配置格式化规范

prettier官网
按步骤执行

npm install --save-dev --save-exact prettier

echo {}> .prettierrc.json

然后继续按着官网步骤 创建一个 .prettierignore 文件 表明我们不需要格式化的文件

提交代码自动格式化

Pre-commit Hook
运行此命令

npx mrm@2 lint-staged

看看他做了哪些事情，观察package.json中的变化,及根目录

• 需要修改package.json文件（增加.vue文件的格式化，如果是ts项目还需要增加ts）
  

• prettier和eslint会有冲突
  
  安装一下依赖 eslint-config-prettier

npm i eslint-config-prettier -D

修改以下文件，解决冲突

这样我们的提交代码自动格式化就完成了

提交代码规范git commit -m ‘feat:xxx’

commitlint官网
安装依赖

npm install --save-dev @commitlint/{config-conventional,cli}

运行此命令

echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

最后执行此命令

npx husky add .husky/commit-msg  'npx --no -- commitlint --edit ${1}'

此时我们不规范提交就提交不了了

应该是 git commit -m ‘特定的词：xxxx描述本次提交’ 这样的格式

提交前缀可以是以上 也可以自己再去自定义