Vue3.2搭建项目

Vue3.2搭建项目

1.创建项目

可以用vue ui安装，也可以直接用npm安装。

2.代码格式化设置

1.在Vscode插件中安装prettier

2.在根目录下导入配置prettier.js文件（

{

 "semi": false,

 "singleQuote": true,

 "trailingComma": "none"

}

）

3.在vscode的设置里 搜索save 就能看到并勾上format on save

4.右键 使用…格式化文档 配置默认格式化文档程序 选择prettier

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

'indent': 0,
'space-before-function-paren': 0

//选择性//强制性代码格式化

6.使用husky强制代码格式化 创建配置文件

npx husky add .husky/pre-commit

7.往第六步生成的文件中将undifined换成

npx lint-staged

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

“lint-staged”: {
“src/**/*.{js,vue}”: [ //src目录下所有的js和vue文件
“eslint --fix”, // 自动修复
“git add” // 自动提交时修复
]
}

3.设置git提交规范

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

4.使用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

5.在package.json中新增指令

"prepare": "husky install"

6.并执行
npm run prepare

7.新增husky配置文件

npx husky add .husky/commit-msg

8.将commit-msg 文件中undefined换成npx --no-install commitlint --edit

并添加commitlint.config.js文件

注意事项

fit等主题 之后必须是英文的冒号，并且需要敲一个空格。不然会不给过

4.按需导入element.ui

5.svg设置

6.国际化i18n

7.全屏插件screenfull

8.Driverjs-前端引导页组件

9.时间库Day.js