vue3项目搭建

文章目录

前言

一、创建项目

二、集成editorconfig配置

1. 在VSCode中安装editorconfig插件

2. 根目录下添加.editorconfig文件

三、使用prettier工具

1. 安装prettier

2. 根目录下添加.prettierrc文件

3. 根目录下添加.prettierignore文件

4. 在VSCode中安装prettier-code formatter插件

5. prettier的使用

四、eslint

1. 安装eslint

2. prettier+eslint的使用

五、gitHusky

1. 安装githusky并自动创建文件

2. 代码格式化

六、Commitizen

1. 安装commitizen

2. 提交

七、代码提交验证

1. 安装

2. 在根目录创建commitlint.config.js文件

3. 使用husky生成commit-msg文件，验证提交信息

4. commit的使用

---

---

前言

学习王红元老师vue课程的笔记

一、创建项目

vue create 项目名

选择Manually select features进行自定义选择，选项如下：

• Babel：允许使用ES6模块语法 
• TypeScript：是否使用TS语言
• Progressive Web App (PWA) Support：是否使用渐进式web应用程序
• Router：是否使用vue-router路由
• Vuex：是否使用vuex状态管理
• CSS Pre-processors：是否选择CSS的样式预处理（Sass/Less）
• Linter / Formatter ：是否使用代码格式语法检测（使用eslint + prettier）
• Unit Testing：测试工具
• E2E Testing：测试工具

选择后选项如下：

• Use class-style component syntax?：是否使用class风格组件（N）
• Use Babel alongside TypeScript for auto-detected polyfills?：是否使用babel处理TS（Y）
• Use history mode for router? ：路由是否使用history模式（N）

二、集成editorconfig配置

可以使多个开发人员维持一样的编码风格

1. 在VSCode中安装editorconfig插件

2. 根目录下添加.editorconfig文件

root = true

[*]   # 表示所有文件适用
charset = utf-8   # 设置文件字符集为utf-8
indent_style = space   # 缩进风格 (tab | space)
indent_size = 2  #缩进大小
end_of_line = lf  # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true  # 去除行首的任意空白字符
insert_final_newline = true  # 始终在文件末尾插入一个新行

[*.md]  # 表示仅 md 文件通用以下规则
max_line_length = off
trim_trailing_whitespace = false

三、使用prettier工具

可以让代码格式化

1. 安装prettier

npm install prettier -D

2. 根目录下添加.prettierrc文件

格式化的标准：

{
  "useTabs":false,
  "tabWidth":2,
  "printWidth":80,             //单行字符长度
  "singleQuote":true,          //使用单引号还是双引号
  "trailingComma":"none",      //在多行输入的尾逗号是否添加
  "semi":false                 //语句末句是否加分号
}

3. 根目录下添加.prettierignore文件

哪些文件不格式化：

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

4. 在VSCode中安装prettier-code formatter插件

5. prettier的使用

在package.json的"scripts":{}中添加"prettier":"prettier --write ."

通过npm run prettier格式化

四、eslint

1. 安装eslint

npm install eslint-plugin-prettier@3.4.1 eslint-config-prettier -D

• 安装最新的4.0.0版本会报错

2. prettier+eslint的使用

在.eslintrc.js的extends:[]最后添加'plugin:prettier/recommended'

• "prettier/@typescript-eslint"报错，将其移到node_modules/eslint-config-prettier/prettier.js内添加

五、gitHusky

保证仓库代码符合规范,git commint时代码不符合规范，则自动通过规范修复

1. 安装githusky并自动创建文件

npx husky-init && npm install

在windows中&&报错，使用

npx husky-init -and npm install
//或者使用如下代码（没试过）
npx husky-init '&&' npm install

或者将powershell终端输出改为cmd终端输出（VSCODE）配置

2. 代码格式化

在新增的husky文件夹中的pre-commit文件中添加npm run lint

六、Commitizen

保证git commit的提示信息规范

1. 安装commitizen

npm install commitizen -D
npx commitizen init cz-conventional-changelog --save-dev --save-exact

• 报错使用cnpm install cz-conventional-changelog -D安装后手动在package.json中配置

"config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }

2. 提交

提交时使用命令：npx cz（之后会改为npm run commit）

选项如下：

• 选择类型：

（1）feat：新增特性

（2）fix：修复bug

（3）docs：修改文档

（4）style：代码格式修改

（5）refactor：代码重构

（6）perf：改善性能

（7）test：测试

（8）build：变更项目构建或外部依赖

（9）ci：更改持续集成软件的配置文件和package中的scripts命令

（10）chore：变更构建流程或辅助工具(更改测试环境)

（11）revert：代码回退

• 更改后影响范围
• 描述
• 更长的描述（可回车跳过）
• 是否是大更新
• 是否影响开源项目的某个open issue

七、代码提交验证

如果git commit提交格式不规范则限制提交

1. 安装

npm i @commitlint/config-conventional @commitlint/cli -D

2. 在根目录创建commitlint.config.js文件

module.exports = {
  extends:['commitlint/config-conventional']
}

3. 使用husky生成commit-msg文件，验证提交信息

npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"

4. commit的使用

使用npm run commit提交