Vite3 搭建工程化项目

目录

本文主要是对基于Vite3 开发Vue 项目而做的一个总结：也已将该模板上传到了GitHub

1. 如何创建项目基础结构

2. 对项目进行配置，包括：

• editorconfig —— IDE 配置
• Eslint + Prettier —— 代码格式化配置
• Git Husky—— git 提交规范配置

3. 项目所用依赖版本说明：

"node": "16.14.0" // node 版本
"vue": "3.2.40"
"vite": "3.1.4"

"pnpm": "7.5.2" // 包管理工具使用pnpm

一、 创建项目基础结构

1. 在终端中输入下方命令进行创建

pnpm create vite

2. 分别输入项目名称、选择框架以及TypeScript，创建完成后，见到下图，说明成功

3. 接着，进入到创建的目录中，执行下方命令进行依赖安装：

pnpm i

4. 安装完成后，执行下方命令，浏览器打开创建好的项目,浏览器出现下图，说明创建成功：

pnpm dev

二、项目配置

1. EditorConfig 配置

（1）背景：之所以要添加EditorConfig 配置，是因为我们需要 EditorConfig 帮助我们在同一项目的多个开发人员之间保持一致的编程风格，具体可参见 官网
（2）具体步骤：在项目根目录中创建 .editorconfig 文件，可直接复制下方配置项到文件中

# 因为 EditorConfig 插件会在打开文件的目录和每个父级目录中查找名为 .editorconfig 的文件，直到找到root文件或带有 root=true 的 .editorconfig 文件才会停止，所以我们需要指定该项为 true 
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

（3）注意：如果使用的IDE是VsCode，需要安装插件才可使 EditorConfig 配置生效（WebStorm自动集成）

2. 配置 Prettier

（1）首先安装Prettier，通过下方命令安装 Prettier

pnpm i prettier -D

（2）配置：

{
	"useTabs": false, // 是否选择空格tab缩进
	"tabWidth": 2, // 空格长度为2
	"semi": false, // 语句末尾是否加 分号
	"singleQuote": true, // 是否使用单引号
	"printWidth": 80, // 一行最多容纳字符长度
	"trailingComma": "none", // 是否保留多行输入时最后一个属性的逗号
	"arrowParens": "avoid" // 箭头函数必须使用括号
}

（3）添加 Prettier 忽略文件：在项目根目录中添加 .prettierignore 文件

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

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

/public/*

（4）安装IDE插件：

（5）配置格式化脚本：在 根目录中的 package.json 中的 script 中加入以下脚本命令:

"lint": "prettier --write ."

Tips：快速检查并更改项目中全部代码，可执行下方命令:

pnpm run lint

3. 配置 Eslint

（1）安装插件：

pnpm i eslint-plugin-prettier eslint-config-prettier -D

（2）在项目根目录中创建 .eslintrc 文件，并添加如下配置

{
	"env": {
		"browser": true,
	    "es2021": true
	},
	 "extends": ["plugin:vue/vue3-recommended"],
	 "parserOptions": {
	 	"ecmaVersion": "latest",
	    "parser": "@typescript-eslint/parser",
	    "sourceType": "module"
	},
	"plugins": ["vue", "@typescript-eslint"],
	  
	"rules": { 
		// 在此配置 自己团队开发规范
	    "vue/multi-word-component-names": "off",
	    "vue/max-attributes-per-line": "off"
	}
}

（3）安装IDE插件：

4. Git Husky配置

（1）引入背景：配置 husky 主要是为了确保团队成员提交代码风格保持一致且符合团队开发规范，所以，我们需要在团队成员提交（git commit ）之前，对代码进行校验，如果不符合规范，则自动修复；
（2）介绍：husky 是一个git hook工具，可以在帮助我们在不同的git阶段进行拦截：

• pre-commit：提交本地暂存盘之前
• commit-msg：提交信息
• pre-push：推送远程之前

4. 1 配置 pre-commit：代码提交之前，进行格式检查

（1）安装：执行下方命令进行初始化 git hook

npx husky-init && npm install

> 提示：这里安装可能较慢，可以切换网络，或xxx(你懂的🤔)，多试几次；

（2）配置：这里安装完成后：需要我们手动修改文件：pre-commit

注意：这里之所以修改为 pnpm run lint ，是因为我们在前边的步骤中，在 package.json 配置了格式化全局代码：“lint”: “prettier --write .”

4.2 配置 commit-msg：对提交备注说明进行校验

（1）安装Commitizen插件：执行下方命令进行安装

pnpm install commitizen -D

（2）安装并初始化 cz-conventional-changelog

pnpm install commitizen cz-conventional-changelog --save-dev

（3）配置：在package.json 中加入 以下配置项

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

（4）使用：命令行中 输入 npx cz 进行提交（替代 git commit）

npx cz

通过命令激活后，可根据自己项目实际开发情况依次选择或填写：本次更新类型、本次修改范围、提交信息、详细信息、是否是重大更改、是否影响某个issues

（5）尽管如此，我们仍然无法保证团队成员能够统一书写提交信息，（开发人员仍可通过 git commit -m ‘xxxx’ 来提交信息）所以，我们需要借助 @commitlint/config-conventional 和 @commitlint/cli 来帮助我们规避此类不合规范的情况 ：

安装 @commitlint/config-conventional 和 @commitlint/cli

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

配置commitlint，在项目根目录下创建 commitlint.config.cjs 文件，并添加如下配置：

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

使用命令生成 commit-msg 文件，如下图所示：

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

好了，大功告成！