前言

到现在为止，已经有不少团队和项目都已经正式使用 vue3 + vite + typescript 进行企业级的项目开发了，本文主要介绍下如何搭建一套相应的前端工程化项目环境，终是 “纸上得来终觉浅，绝知此事要躬行”。

若你想了解更多，源码的地址

基本项目结构

快速创建项目

通过 npm create vite@latest 命令创建基本的项目：

目录结构：

默认启动页面：

现在，我们已经拥有了一个最基本项目结构了，接下来我们只需要为其 "添砖加瓦" 即可。

代码规范

配置 editorconfig

目的是为了保证不同开发人员在 不同操作系统 上拥有一致的编码风格，例如同样是换行符，在不同系统上表现是不一样的，又或者是不同人员在不同的编辑器上使用的缩进方式不同等，都很容易导致代码风格不统一的问题。

配置 editorconfig 文件，可参考 Vue2.x 中的配置
如果使用的是 VScode 编辑器，需要安装插件：EditorConfig for VScode
如果使用的是 WebStorm 编辑器，不需要安装 EditorConfig 插件，因为其内部已经默认集成了，所以只需要开启支持即可。

测试效果如下，其中是通过 Tab 键产生的缩进：

配置 eslink

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 和 eslink 配置上的冲突
- 安装依赖 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

虽然前面我们已经使用了 eslink 规范化代码，但是仍无法保证开发人员是否对所有 eslink 暴露的问题进行了处理，此时如果开发人员选择将问题忽略，直接将代码进行提交，必然导致仓库中的代码也是不规范的，因此，在不符合规范的条件下拦截开发人员的提交动作是有必要的。

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'

以下是规范化后提交格式：

环境变量

通常项目会处于很多不同环境，其中包含三个最基本的环境：

开发环境
测试环境
生产环境

若你想了解更多关于 vite 具体如何配置环境变量，可点此查看

注意：.env 文件只能放在根目录下，否则 vite 无法读取 .env 文件内容

在本文中作为示例只创建这三种基本的环境：

为不同的环境创建 .env 文件，如下：
在 package.json 修改对应的命令，如下：

为了支持对 自定义环境编变量 的友好提示，需要在 env.d.ts 文件中添加对应的 ImportMeta 接口

 interface ImportMetaEnv {
   readonly VITE_API_ENV: string
 }

 // eslint-disable-next-line no-unused-vars
 interface ImportMeta {
   readonly env: ImportMetaEnv
 }
复制代码

通过在 App.vue 中进行测试，import.meta.env.VITE_API_ENV 进行获取环境变量的值，结果如下：

集成 vue-router

具体实现请看源码配置，以下是简述：

通过 npm install vue-router@4 安装符合 Vue3 版本的 Vue Router
创建 router 文件夹，其中 index.ts 为统一的入口文件，routes 目录存放不同的模块路由
创建 pages 文件夹，存放页面相关的内容，可引入到 routes 中充当展示组件
定义基本路由，如配置 Home 页的重定向、NotFound 页面 等

测试效果如下：

集成 pinia

具体实现请看源码配置，以下是简述：

通过 npm install pinia 安装 pinia
在 src 目录下创建 store 目录用来存放 state、actions、gette 等模块

创建一个 pinia（根存储）并将其传递给应用程序，如：

import { createPinia } from 'pinia'
app.use(createPinia())
复制代码

测试效果如下：

封装 axios

关于 axios 的 class 封装已经有很多的文章都讲得很细了，这里使用 函数式 进行二次封装，具体实现请看源码配置，以下是简述：

通过 npm i axios 安装 axios
在 src 目录下创建 utils 目录用于提供自定义工具模块方法，同时在其目录下请求模块创建 request 目录存放二次封装的 axios
request 目录下封装常用的方法包含 get、post、upload、download 等

如下是使用 apifox 模拟接口，得到的测试结果：

最后

从基本项目结构一步步 “添砖加瓦” 到相对完善了项目的内容（虽然还得继续完善），其中有不少的坑得踩，但为了填坑又不得不去找各种文档资料来解决问题，时间上也许开销比较大，但这也能填充自己知识的空白或模糊区域，亦是一种收获知识的方式。