前言
到现在为止，已经有不少团队和项目都已经正式使用 vue3 + vite + typescript 进行企业级的项目开发了，本文主要介绍下如何搭建一套相应的前端工程化项目环境，终是 “纸上得来终觉浅，绝知此事要躬行”。
若你想了解更多，源码的地址
基本项目结构
快速创建项目
通过 npm create vite@latest 命令创建基本的项目：
目录结构：
默认启动页面：
现在，我们已经拥有了一个最基本项目结构了，接下来我们只需要为其 "添砖加瓦" 即可。
代码规范
配置 editorconfig
目的是为了保证不同开发人员在 不同操作系统 上拥有一致的编码风格，例如同样是换行符，在不同系统上表现是不一样的，又或者是不同人员在不同的编辑器上使用的缩进方式不同等，都很容易导致代码风格不统一的问题。
- 配置
editorconfig文件，可参考 Vue2.x 中的配置 - 如果使用的是 VScode 编辑器，需要安装插件：EditorConfig for VScode
- 如果使用的是 WebStorm 编辑器，不需要安装 EditorConfig 插件，因为其内部已经默认集成了，所以只需要开启支持即可。
测试效果如下，其中是通过 Tab 键产生的缩进：
配置 eslint
ESLint 能够帮助开发者在编码过程中及时给予不符合代码规范的提示，它和下面的 prettier 作用的时机是不一样的。
- 安装依赖
npm install eslint --save-dev - 可通过
npm init @eslint/config命令设置配置文件
- 上一步操作完成后会得到
.eslintrc.js文件，可通过此文件修改配置 - 配置 scripts 脚本命令：
"lint": "eslint --fix --ext .ts,.vue src"提供自动修复功能 - 通过
eslint-plugin-vue解决 eslint 认为 defineProps 未定义错误，如下：
- 修改
.eslintrc.js配置文件，如下：
env: { ... 'vue/setup-compiler-macros': true, } 复制代码
配置完成后 eslint 生效，以下原因是没有在每行语句结束处添加 ;
配置 prettier
目的是为了统一代码的格式化方式，若使用的是 VScode 编辑器，可以直接使用它的插件 Prettier - Code formatter，但这种方式依赖于 VScode 插件机制实现的格式化，但是一旦开发人员编辑器不统一，或者是想通过 script 脚本命令直接格式化所有包含文件，那么就不得不需要单独安装这个 prettier 包。
- 安装依赖
npm install --save-dev --save-exact prettier - 创建
.prettierrc文件进行配置，可参考 Vue3.x 的配置 - 创建
.prettiterignore文件配置忽略文件 - 创建 script 脚本
prettier --write .—— 目的是支持通过脚本一次性执行多个文件的格式化 - 通过
eslint-config-prettier和eslint-plugin-prettier避免 prettier 和 eslint 配置上的冲突
- 安装依赖
npm install --save-dev eslint-config-prettier eslint-plugin-prettier - 在
.eslintrc.js文件中添加plugin:prettier/recommended进行扩展，例如：
extends: [ 'plugin:vue/vue3-essential', '@vue/airbnb', '@vue/typescript/recommended', ], 复制代码
通过脚本实现格式化效果如下：
配置 husky
虽然前面我们已经使用了 eslint 规范化代码，但是仍无法保证开发人员是否对所有 eslint 暴露的问题进行了处理，此时如果开发人员选择将问题忽略，直接将代码进行提交，必然导致仓库中的代码也是不规范的，因此，在不符合规范的条件下拦截开发人员的提交动作是有必要的。
- husky 文档 推荐使用
npx husky-init && npm install命令自动化设置
- 安装
npm install --save-dev commitizen目的是规范化提交信息
- 使用
commitizen提交时，系统会提示开发者在提交时填写所有必需的提交字段
- 通过
npx commitizen init cz-conventional-changelog --save-dev --save-exact命令初始化项目，便后续使用 cz 时能有更友好的记录 
- 后续进行提交操作时，通过
npx cz代替git add .之类的命令，如：
- 可以在 package.json 添加脚本
"scripts": { "commit": "cz" }，并使用npm run commit代替npx cz命令
- 安装
npm install --save-dev @commitlint/config-conventional @commitlint/cli
- 目的是通过
@commitlint/config-conventional拦截开发人员不合理的提交信息
- 在根目录创建
commit.config.js文件进行 commit message 配置，如：
module.exports = { extends: ['@commitlint/config-conventional'] }; 复制代码
- 使用
husky生成的commit-msg文件，验证提交信息:npx husky add .husky/commit-msg 'npx --no -- commitlint --edit $1'
以下是规范化后提交格式：
