使用 Vue3、TypeScript、Element Plus、Axios、Husky、Commitizen、Jest、Vite 和 GitHub Actions 创建企业级开发环境。

Vue3 和 Vite 已经发布很久了，笔者在很多项目中都用到了这个技术栈。我的感觉是这个技术栈可以更好的帮助我们完成任务。而现在Vue3和Vite的生态正在蓬勃发展，非常适合企业级的开发项目。

本文将从零一步步帮助你搭建一个标准的Vite + Vue3 + TypeScript企业级开发环境。

首先，我将与您一起完成一个 Vue.js 项目的核心框架，使用 Vue.js、VueRouter 和 Vuex 等技术。然后我们将为该项目添加代码风格、提交风格和单元测试。最后，我们将使用 GitHub Actions 设置自动部署。

最终项目

test code： BytefishMedium

在线演示：github.com

笔记：

• 这是一篇很长的文章，但都是有用的东西。请耐心等待。
• 本文重点介绍如何在不使用 Vue.js、Vuex 和 Axios 的情况下搭建开发环境。在阅读本文之前，您需要对它们有一些基本的了解。
• 当您阅读本文时，您可以打开计算机并与我一起工作。
• 如果您对文章中的某些步骤有任何疑问或有bug，欢迎您留言，我会尽力解答。

开始吧！

核心骨架

首先，确保您的计算机上已成功安装 Node.js。本项目使用 Vite，需要 Node.js 版本大于12.0.0.

$ node -v
v12.16.1

如果您运行的是低版本的 Node，可以使用 NVM 将 Node 升级到最新的稳定版本：

$ nvm install stable

使用 Vite 初始化项目

我们可以使用以下命令使用 Vite 初始化 Vue.js 项目：

$ npm init @vitejs/app

如果您的计算机上尚未安装 Vite，运行此命令将自动安装它。所以你不需要执行像npm install vite -g.

或者你可以使用 Yarn 来初始化项目：

$ yarn create @vitejs/app

之后，我们将进入一个命令行交互界面。首先，我们在初始化项目的时候，需要输入项目的名称：

然后Vite让我们选择一个前端框架。虽然它是由 Vue 的开发团队发明的，但 Vite 是一个通用的构建工具，可以构建包括 React 在内的各种项目。

这里我们选择选项vue 然后它会询问我们是否要使用 JavaScript 或 TypeScript，这里我们选择 TS：

ok，我们的基本项目模板就创建好了：

然后根据提示进入项目根目录安装依赖包。

$ cd vite-vue3-starter$
 npm install

然后你可以在你喜欢的编辑器中打开项目：

这是之前生成的工程的目录结构和.h的具体内容package.json。我会继续分享我的编辑截图，以便我们更好地保持一致性。安装完成后，我们就可以启动项目了：

 npm run dev

运行上述命令时，可能会出现类似如下的错误：

Error: esbuild: Failed to install correctlyMake sure you don't have "ignore-scripts" set to true. You can check this with "npm config get ignore-scripts". If that returns true you can reset it back to false using "npm config set ignore-scripts false" and then reinstall esbuild.If you're using npm v7, make sure your package-lock.json file contains either "lockfileVersion": 1 or the code "hasInstallScript": true. If it doesn't have either of those, then it is likely the case that a known bug in npm v7 has corrupted your package-lock.json file. Regenerating your package-lock.json file should fix this issue.

解决方法：使用前运行如下命令npm run dev

$ node node_modules/esbuild/install.js

参考地址：在 macOS 上安装二进制文件损坏

修改后结果输出：

如上所示，我们项目的框架已经完成。虽然过程有点长，但是操作非常简单。

设置 Vite 配置文件

Vite配置文件vite.config.ts位于根目录下，我们可以通过它配置和调整Vite的默认行为。

这里我们先做一些简单的配置，比如设置@指向src目录，修改服务端口和打包路径等。

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": resolve(__dirname, "src"), // Set '@' to point to the 'src' directory
    },
  },
  base: "./", // Set the packing path
  server: {
    port: 4000,
    open: true, // The browser opens automatically when the service starts
    cors: true, // Allow cross-origin resource sharing// Configure the proxy service according to your needs
    // proxy: {
    //   '/api': {
    //     target: 'http://xxx.xxx.xxx.xxx:8000',
    //     changeOrigin: true,
    //     secure: false,
    //     rewrite: (path) => path.replace('/api/', '/')
    //   }
    // }
  },
});

这时候我们可以关闭之前启动的Vite程序，重新执行npm run dev。

这时你应该可以看到新的服务器程序监听了4000端口，并自动在浏览器中打开了网页，这说明我们之前的配置是成功的。

标准化的目录结构

那么Vite默认生成的源码目录结构比较简单，不能满足大型项目的需要。在这里我们可以添加一些新的目录。

因为我们的项目中会包含各种组件、视图、样式等，所以我在目录下创建了如下目录结构src：

├── public/ 
└── src/ 
    ├── assets/ // 存储静态资源
    ├── common/ // 通用库
    ├── components/ // 通用组件
    ├── router/ // Vue Router 的路由
    ├ ── store/ // Vuex 的状态
    ├── style/ // 通用 CSS 文件
    ├── utils/ // utils 函数
    ├── views/ // 页面
    ├── App.vue 
    ├── main.ts 
    ├── ─ shims-vue.d.ts 
├── tests/ // 单元测试
├── index.html 
├── tsconfig.json // TypeScript 配置文件
├── vite.config.ts // Vite 配置文件
└── package.json

集成 Vue 路由器

首先，我们需要安装路由工具Vue Router。因为我们这里使用的是Vue3，所以Vue Router的版本一定要在4.0.

$ npm i vue-router@4

第二步，我们需要编写路由配置文件。在 下创建一个router目录src，然后index.ts在该目录下创建一个文件：

└── src/  
├── router/  
├── index.ts

index.ts的内容：

import {
  createRouter,
  createWebHashHistory,
  RouteRecordRaw,
} from "vue-router";
import Home from "@/views/home.vue";
import Vuex from "@/views/vuex.vue";const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/vuex",
    name: "Vuex",
    component: Vuex,
  },
  {
    path: "/axios",
    name: "Axios",
    component: () => import("@/views/Axios.vue"), // lazy-load
  },
];const router = createRouter({
  history: createWebHashHistory(),
  routes,
});export default router;

在上面的文件中，我们配置了三个路由器。

/ ==> @/views/Home.vue 
/vuex ==> @/views/Vuex.vue 
/axios ==> @/views/Axios.vue

但是目前还没有路由对应的组件。

为了使项目能够运行，让我们在目录中创建Home.vue, Vuex.vue, 和。Axios.vue``views

因为现阶段我们还在测试Vue Router的功能，所以不会写任何有意义的组件。我们只需在组件中编写以下内容：

<template>
  <div>
    Home.vue
  </div>
</template><script lang="ts">
import { defineComponent } from 'vue'export default defineComponent({
  setup() {
    
  },
})
</script>

稍后，我们将为这些组件添加更多有意义的内容。

然后我们需要将此路由器安装在main.ts：

好了，我们在前面的步骤中配置了路由，但是我们并没有真正在页面上使用这些路由器。我们可以修改我们的App.vue文件来实际使用这个路由器：

<template> 
  <ul> 
    <li><router-link to="/">首页</router-link></li> 
    <li><router-link to="/vuex">Vuex</router-link ></li> 
    <li><router-link to="/axios">Axios</router-link></li> 
  </ul> 
  <router-view/> 
</template><script lang="ts">
import 'vue' form { defineComponent }export default defineComponent({ 
  name: 'App' 
}) 
</script>

好了，这时候我们终于完成了路由器的配置。

我们来看看项目的结果：

在配置Vue Router时，我们大致遵循以下流程：

• 安装包
• 编写配置文件
• 安装它main.ts

结论

这是一篇很长的文章，我将把它分成两个部分来写完。同样很高兴你读到它。这既是对我的认可，也是对你的提升。

让我们总结一下我们之前做了什么。

首先，我们使用 Vite 初始化了一个基本的项目模板。然后，我们手动安装了 Vue Router、Axios 和其他库。在使用这些库的时候，基本上就是三步：安装对应的包，编写配置文件，在主程序中挂载。

后续文章会不断的继续更新

如果您对这些步骤中的任何一个有任何疑问，请随时发表评论。