从0搭建规范vue3+typescript+vite项目最近在跟着从 0 开始手把手带你搭建一套规范的 Vue3.x 项

最近在跟着从 0 开始手把手带你搭建一套规范的 Vue3.x 项目工程环境文章学习搭建过程中遇到了一些细节问题，经过各种查询终于解决，并最终实现了一套具备代码规范+提交规范+单元测试+自动化部署的前端环境，写此文章记录一下流程。相关需求功能如下：

架构搭建
代码规范
提交规范
单元测试
自动化部署

架构搭建

初始化架构

初始化vite

npm init @vitejs/app

配置终端完成初始化

修改vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 如果编辑器提示 path 模块找不到，则可以安装一下 @types/node -> npm i @types/node -D
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve:{
    alias:{
      '@':path.resolve(__dirname,'src')
    }
  },
  base:'./',
  server:{
    port:4000,
    open:true,
    cors:true
  }
})

vue3-vite
├─ .gitignore
├─ .vscode
│  └─ extensions.json
├─ index.html
├─ package-lock.json
├─ package.json
├─ public
│  └─ favicon.ico
├─ README.md
├─ src
│  ├─ App.vue
│  ├─ assets
│  │  └─ logo.png
│  ├─ common
│  ├─ components
│  │  └─ HelloWorld.vue
│  ├─ env.d.ts
│  ├─ main.ts
│  ├─ router
│  ├─ store
│  ├─ style
│  ├─ utils
│  └─ views
├─ tests
├─ tsconfig.json
└─ vite.config.ts

初始化路由

安装路由

npm install vue-router@4

配置路由文件

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

挂载路由

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
const app= createApp(App);
app.use(router).mount('#app')

初始化vuex

安装vuex

npm install vuex@next

配置store

import { InjectionKey } from 'vue'
import { createStore, Store, useStore as baseUseStore } from 'vuex'
import RootStateTypes, { AllStateTypes } from './types'

import numFactoryModule from './modules/NumFactory'

export const store = createStore<RootStateTypes>({
  state: {
    text: 'This is Vuex Root.state.text'
  },
  getters: {},
  mutations: {},
  actions: {},
  modules: {
    numFactoryModule
  }
})

export const key: InjectionKey<Store<RootStateTypes>> = Symbol('vue-store')

export function useStore<T = AllStateTypes>() {
  return baseUseStore<T>(key)
}

挂载vuex

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import { key, store } from './store/index'
const app= createApp(App);
app.use(router).use(store,key).mount('#app')

集成ui框架### Element Plus

安装Element Plus

npm install element-plus

选择按需加载，首先需要安装 unplugin-vue-components

npm install unplugin-vue-components

配置vite.config.js

import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default {
  plugins: [
    // ...
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

添加style-import.ts utis目录添加style-import.ts，用来安装需要的用到的组件

import { App } from 'vue'
import { ElIcon, ElLoading, ElCard, ElButton } from 'element-plus'

/**
 * 按需导入 Element Plus 组件
 * Vite 插件 https://github.com/element-plus/vite-plugin-element-plus
 * @param app {App}
 */
export default function styleImport(app: App) {
  ;[ElButton, ElCard, ElLoading, ElIcon].forEach((v) => {
    app.use(v)
  })
  return app
}

main.js挂载element-plus

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import { key, store } from './store/index'
import styleImport from './utils/style-import'
const app= createApp(App);
styleImport(app).use(router).use(store,key).mount('#app')

集成axios

安装axios

npm i axios

配置axios utils目录下新建axios.ts

import Axios from 'axios'
import { ElMessage } from 'element-plus'

const baseURL = 'https://api.github.com'

const axios = Axios.create({
  baseURL,
  timeout: 20000 // 请求超时 20s
})

// 前置拦截器（发起请求之前的拦截）
axios.interceptors.request.use(
  (response) => {
    /**
     * 根据你的项目实际情况来对 config 做处理
     * 这里对 config 不做任何处理，直接返回
     */
    return response
  },
  (error) => {
    return Promise.reject(error)
  }
)

// 后置拦截器（获取到响应时的拦截）
axios.interceptors.response.use(
  (response) => {
    /**
     * 根据你的项目实际情况来对 response 和 error 做处理
     * 这里对 response 和 error 不做任何处理，直接返回
     */
    return response
  },
  (error) => {
    if (error.response && error.response.data) {
      const code = error.response.status
      const msg = error.response.data.message
      ElMessage.error(`Code: ${code}, Message: ${msg}`)
      console.error(`[Axios Error]`, error.response)
    } else {
      ElMessage.error(`${error}`)
    }
    return Promise.reject(error)
  }
)

export default axios

集成 CSS 预编译器 Stylus/Sass/Less

vite内部安装了相关的loader，不需要单独处理，只需要下载相关开发依赖即可

npm i stylus -D 
# or 
npm i sass -D 
npm i less -D

至此，一个基于 TypeScript + Vite + Vue3 + Vue Router + Vuex + Element Plus + Axios + Stylus/Sass/Less 的前端项目开发环境搭建完毕,接下来就是配置代码检测+提交检测+单元测试+自动化部署。

代码规范

集成 EditorConfig 配置

EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。

官网：editorconfig.org

在项目根目录下增加 .editorconfig 文件：

# Editor configuration, see http://editorconfig.org

# 表示是最顶层的 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

注意： VSCode 使用 EditorConfig 需要去插件市场下载插件 EditorConfig for VS Code

集成 Prettier 配置

Prettier 是一款强大的代码格式化工具，支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等语言，基本上前端能用到的文件格式它都可以搞定，是当下最流行的代码格式化工具。

官网：prettier.io/

安装Prettier

npm i prettier -D

配置 .prettierrc 项目根目录下创建.prettierrc文件，配置如下：

{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "semi": false
}

注意：

VSCode 编辑器使用 Prettier 配置需要下载插件 Prettier - Code formatter

Prettier 配置好以后，在使用 VSCode格式化功能时，编辑器就会按照 Prettier 配置文件的规则来进行格式化，避免了因为大家编辑器配置不一样而导致格式化后的代码风格不统一的问题。

集成 ESLint 配置

ESLint 是一款用于查找并报告代码中问题的工具，并且支持部分问题自动修复。其核心是通过对代码解析得到的 AST（Abstract Syntax Tree 抽象语法树）进行模式匹配，来分析代码达到检查代码质量和风格问题的能力。

正如前面我们提到的因团队成员之间编程能力和编码习惯不同所造成的代码质量问题，我们使用 ESLint 来解决，一边写代码一边查找问题，如果发现错误，就给出规则提示，并且自动修复，长期下去，可以促使团队成员往同一种编码风格靠拢。

安装 ESLint

npm i eslint -D

配置 ESLint ESLint 安装成功后，执行 npx eslint --init，然后按照终端操作提示完成一系列设置来创建配置文件。

根据上面的选择，ESLint 会自动去查找缺失的依赖，我们这里选择 Yes，使用 NPM 下载安装这些依赖包。

注意：如果自动安装依赖失败，那么需要手动安装

npm i @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue -D

ESLint 配置文件 .eslintrc.js 在上一步操作完成后，会在项目根目录下自动生成 .eslintrc.js 配置文件：

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'airbnb-base',
    'plugin:jest/recommended',
    'plugin:prettier/recommended' // 添加 prettier 插件
  ],
  parserOptions: {
    ecmaVersion: 13,
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    'generator-star-spacing': 'off',
    'no-debugger': 'off',
    'no-tabs': 'off',
    'no-unused-vars': 'off',
    'no-console': 'off',
    'no-irregular-whitespace': 'off',
    'import/no-unresolved': 'off',
    'import/extensions': 'off',
    'import/no-absolute-path': 'off',
    'import/no-extraneous-dependencies': 'off',
    'vue/no-multiple-template-root': 'off',
    'no-param-reassign': [
      'error',
      {
        props: true,
        ignorePropertyModificationsFor: [
          'e', // for e.returnvalue
          'ctx', // for Koa routing
          'req', // for Express requests
          'request', // for Express requests
          'res', // for Express responses
          'response', // for Express responses
          'state' // for vuex state
        ]
      }
    ]
  },
  settings: { 'import/resolver': { typescript: { project: `${__dirname}/tsconfig.json` } } }
}

注意：

VSCode 使用 ESLint 配置文件需要去插件市场下载插件 ESLint

配置好以后，我们在 VSCode 中开启 ESLin，写代码时，ESLint 就会按照我们配置的规则来进行实时代码检查，发现问题会给出对应错误提示和修复方案。虽然，现在编辑器已经给出错误提示和修复方案，但需要我们一个一个去点击修复，还是挺麻烦的。很简单，我们只需设置编辑器保存文件时自动执行 eslint --fix 命令进行代码风格修复。

VSCode 在 settings.json 设置文件中，增加以下代码：

"editor.codeActionsOnSave": { "source.fixAll.eslint": true }

typescript使用import时候esLint会报错

需要安装 eslint-plugin-import与eslint-import-resolver-typescript插件，配置eslint使用tsconfig.js的path

"paths": { "@/*": ["./*"]}

解决 Prettier 和 ESLint 的冲突

通常大家会在项目中根据实际情况添加一些额外的 ESLint 和 Prettier 配置规则，难免会存在规则冲突情况。

本项目中的 ESLint 配置中使用了 Airbnb JavaScript 风格指南校验，其规则之一是代码结束后面要加分号，而我们在 Prettier 配置文件中加了代码结束后面不加分号的配置项，这样就有冲突了，会出现用 Prettier 格式化后的代码，ESLint 检测到格式有问题的，从而抛出错误提示。

解决两者冲突问题，需要用到 eslint-plugin-prettier 和 eslint-config-prettier。

eslint-plugin-prettier 将 Prettier 的规则设置到 ESLint 的规则中。
eslint-config-prettier 关闭 ESLint 中与 Prettier 中会发生冲突的规则。

最后形成优先级：Prettier 配置规则 > ESLint 配置规则。

在 .eslintrc.js 添加 prettier 插件

 extends: [
    'plugin:vue/vue3-essential',
    'airbnb-base',
    'plugin:prettier/recommended' // 添加 prettier 插件
  ],

集成 husky 和 lint-staged

我们在项目中已集成 ESLint 和 Prettier，在编码时，这些工具可以对我们写的代码进行实时校验，在一定程度上能有效规范我们写的代码，但团队可能会有些人觉得这些条条框框的限制很麻烦，选择视“提示”而不见，依旧按自己的一套风格来写代码，或者干脆禁用掉这些工具，开发完成就直接把代码提交到了仓库，日积月累，ESLint 也就形同虚设。

所以，我们还需要做一些限制，让没通过 ESLint 检测和修复的代码禁止提交，从而保证仓库代码都是符合规范的。

为了解决这个问题，我们需要用到 Git Hook，在本地执行 git commit 的时候，就对所提交的代码进行 ESLint 检测和修复（即执行 eslint --fix），如果这些代码没通过 ESLint 规则校验，则禁止提交。

实现这一功能，我们借助 husky + lint-staged 。 husky —— Git Hook 工具，可以设置在 git 各个阶段（pre-commit、commit-msg、pre-push 等）触发我们的命令。
lint-staged —— 在 git 暂存的文件上运行 linters。

配置 husky

使用 husky-init 命令快速在项目初始化一个 husky 配置

npx husky-init ; npm install

这行命令做了四件事：

安装 husky 到开发依赖

在项目根目录下创建 .husky 目录

在 .husky 目录创建 pre-commit hook，并初始化 pre-commit 命令为 npm test

修改 package.json 的 scripts，增加 "prepare": "husky install"

到这里，husky 配置完毕，现在我们来使用它：

husky 包含很多 hook（钩子），常用有：pre-commit、commit-msg、pre-push。这里，我们使用 pre-commit 来触发 ESLint 命令。

修改 .husky/pre-commit hook 文件的触发命令：

eslint --fix ./src --ext .vue,.js,.ts

上面这个 pre-commit hook 文件的作用是：当我们执行 git commit -m "xxx" 时，会先对 src 目录下所有的 .vue、.js、.ts 文件执行 eslint --fix 命令，如果 ESLint 通过，成功 commit，否则终止 commit。

但是又存在一个问题：有时候我们明明只改动了一两个文件，却要对所有的文件执行 eslint --fix。假如这是一个历史项目，我们在中途配置了 ESLint 规则，那么在提交代码时，也会对其他未修改的“历史”文件都进行检查，可能会造成大量文件出现 ESLint 错误，显然不是我们想要的结果。

我们要做到只用 ESLint 修复自己此次写的代码，而不去影响其他的代码。所以我们还需借助一个神奇的工具 lint-staged 。

配置 lint-staged

lint-staged 这个工具一般结合 husky 来使用，它可以让 husky 的 hook 触发的命令只作用于 git add那些文件（即 git 暂存区的文件），而不会影响到其他文件。

安装 lint-staged

npm i lint-staged -D

在 package.json里增加 lint-staged 配置项

"lint-staged": { "*.{vue,js,ts}": "eslint --fix" }

修改 .husky/pre-commit hook 的触发命令为：npx lint-staged

至此，husky 和 lint-staged 组合配置完成。假如我们修改了 scr 目录下的 test-1.js、test-2.ts 和 test-3.md 文件，然后 git add ./src/，最后 git commit -m "test..."，这时候就会只对 test-1.js、test-2.ts 这两个文件执行 eslint --fix。如果 ESLint 通过，成功提交，否则终止提交。从而保证了我们提交到 Git 仓库的代码都是规范的。

提交规范

commit message 格式规范

commit message 由 Header、Body、Footer 组成。

<Header>

<Body>

<Footer>
复制代码

Header

Header 部分包括三个字段 type（必需）、scope（可选）和 subject（必需）。

<type>(<scope>): <subject>
复制代码

type

type 用于说明 commit 的提交类型（必须是以下几种之一）。

值	描述
feat	新增一个功能
fix	修复一个 Bug
docs	文档变更
style	代码格式（不影响功能，例如空格、分号等格式修正）
refactor	代码重构
perf	改善性能
test	测试
build	变更项目构建或外部依赖（例如 scopes: webpack、gulp、npm 等）
ci	更改持续集成软件的配置文件和 package 中的 scripts 命令，例如 scopes: Travis, Circle 等
chore	变更构建流程或辅助工具
revert	代码回退

scope

scope 用于指定本次 commit 影响的范围。scope 依据项目而定，例如在业务项目中可以依据菜单或者功能模块划分，如果是组件库开发，则可以依据组件划分。（scope 可省略）

subject

subject 是本次 commit 的简洁描述，长度约定在 50 个字符以内，通常遵循以下几个规范：

用动词开头，第一人称现在时表述，例如：change 代替 changed 或 changes
第一个字母小写
结尾不加句号（.）

集成 commitlint 验证提交规范

在“代码规范”章节，我们已经讲到过，尽管制定了规范，但在多人协作的项目中，总有些人依旧我行我素，因此提交代码这个环节，我们也增加一个限制：只让符合 Angular 规范的 commit message 通过，我们借助 @commitlint/config-conventional 和 @commitlint/cli 来实现。

安装 commitlint

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

配置 commitlint

创建 commitlint.config.js 文件在项目根目录下创建 commitlint.config.js 文件，并填入以下内容：

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

.husky 目录下创建 commit-msg 文件

.husky 目录下创建 commit-msg 文件，并在此执行 commit message 的验证命令

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx --no-install commitlint --edit

commitlint 验证
不符合规范的提交信息如下图，提交信息 111 不符合规范，提交失败。

符合规范的提交信息如下图，提交信息 test: commitlint test 符合规范，成功提交到仓库。

单元测试

单元测试是项目开发中一个非常重要的环节，完整的测试能为代码和业务提供质量保证，减少 Bug 的出现

安装开发依赖

npm i @vue/test-utils@next jest vue-jest@next ts-jest -D

创建 jest 配置文件

在项目根目录下新建 jest.config.js 文件：

module.exports = {
  moduleFileExtensions: ['vue', 'js', 'ts'],
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.vue$': 'vue-jest', // vue 文件用 vue-jest 转换
    '^.+\\.ts$': 'ts-jest' // ts 文件用 ts-jest 转换
  },
  // 匹配 __tests__ 目录下的 .js/.ts 文件 或其他目录下的 xx.test.js/ts xx.spec.js/ts
  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(ts)$'
}

创建单元测试文件

在上面的 jest.config.js 文件中，我们配置只匹配 __tests__ 目录下的任意 .ts 文件或其他目录下的 xx.test.ts/xx.spec.ts 文件进行单元测试。

这里，我们在项目根目录下创建 tests 目录来存储单元测试文件

├── src/
└── tests/                           // 单元测试目录
    ├── Test.spec.ts                 // Test 组件测试

Test.spec.ts

import { mount } from '@vue/test-utils'
import Test from '../src/views/Test.vue'

test('Test.vue', async () => {
  const wrapper = mount(Test)
  expect(wrapper.html()).toContain('Unit Test Page')
  expect(wrapper.html()).toContain('count is: 0')
  await wrapper.find('button').trigger('click')
  expect(wrapper.html()).toContain('count is: 1')
})

Test.vue

<template>
  <div class="test-container page-container">
    <div class="page-title">Unit Test Page</div>
    <p>count is: {{ count }}</p>
    <button @click="increment">increment</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'VuexDemo',
  setup() {
    const count = ref<number>(0)
    const increment = () => {
      count.value += 1
    }
    return { count, increment }
  }
})
</script>

集成 @types/jest

如上图，我们使用 VSCode / WebStrom / IDEA 等编辑器时，在单元测试文件中，IDE 会提示某些方法不存在（如 test、describe、it、expect等），安装 @types/jest 即可解决。

npm i @types/jest -D

TypeScript 的编译器也会提示 jest 的方法和类型找不到，我们还需把 @types/jest 添加根目录下的 ts.config.json（TypeScript 配置文件）中：

{ "compilerOptions": { ... "types": ["vite/client", "jest"] }, }

添加 eslint-plugin-jest

因为我们在项目中集成了 ESLint，如上图很明显是没通过 ESLint 规则检验。因此，我们还需要在 ESLint 中增加 eslint-plugin-jest 插件来解除对 jest 的校验。

安装 eslint-plugin-jest

npm i eslint-plugin-jest -D

添加 eslint-plugin-jest 到 ESLint 配置文件 .eslintrc.js 中

extends: [
    'plugin:vue/vue3-essential',
    'airbnb-base',
    'plugin:jest/recommended',
    'plugin:prettier/recommended' // 添加 prettier 插件
  ],

执行单元测试

在根目录下 package.json 文件的 scripts 中，添加一条单元测试命令： "test": "jest"

执行命令 npm run test 即可进行单元测试，jest 会根据 jest.config.js 配置文件去查找 __tests__ 目录下的 .ts 文件或其他任意目录下的 .spec.ts 和 .test.ts 文件，然后执行单元测试方法。

注意：

若是报下面的错误是jest版本有问题，可以安装jest@26.6.3、ts-jest@26.5.5版本

单元测试约束

前面，我们使用 husky 在 Git 的 pre-commit 和 commit-msg 阶段分别约束代码风格规范和提交信息规范。这一步，我们在 pre-push 阶段进行单元测试，只有单元测试全部通过才让代码 push 到远端仓库，否则终止 push。

使用 husky 命令在 .husky 目录下自动创建 pre-push hook 文件，并在此执行单元测试命令 npm run test。

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npm run test

现在，我们在 git push 时就能先进行单元测试了，只有单元测试全部通过，才能成功 push

自动部署

本项目是要搭建一套规范的前端工程化环境，为此我们使用 CI（Continuous Integration 持续集成）来完成项目最后的部署工作。

常见的 CI 工具有 GitHub Actions、GitLab CI、Travis CI、Circle CI 等。

这里，我们使用 GitHub Actions。

什么是 GitHub Actions

GitHub Actions 是 GitHub 的持续集成服务，持续集成由很多操作组成，比如抓取代码、运行测试、登录远程服务器、发布到第三方服务等等，GitHub 把这些操作称为 actions。

配置 GitHub Actions

因为 GitHub Actions 只对 GitHub 仓库有效，所以我们创建 GitHub 仓库来托管项目代码

其中，我们用：

master 分支存储项目源代码
gh-pages 分支存储打包后的静态文件

gh-pages 分支，是 GitHub Pages 服务的固定分支，可以通过 HTTP 的方式访问到这个分支的静态文件资源。

创建 GitHub Token

创建一个有 repo 和 workflow 权限的 GitHub Token

注意：新生成的 Token 只会显示一次，保存起来，后面要用到。如有遗失，重新生成即可

在仓库中添加 secret

将上面新创建的 Token 添加到 GitHub 仓库的 Secrets 里，并将这个新增的 secret 命名为 VUE3_DEPLOY （名字无所谓，看你喜欢）。

步骤：仓库 -> settings -> Secrets -> New repository secret。

新创建的 secret VUE3_DEPLOY 在 Actions 配置文件中要用到，两个地方需保持一致！

创建 Actions 配置文件

在项目根目录下创建 .github 目录。
在 .github 目录下创建 workflows 目录。
在 workflows 目录下创建 deploy.yml 文件。

name: deploy

on:
  push:
    branches: [master] # master 分支有 push 时触发

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - name: Setup Node.js v14.x
        uses: actions/setup-node@v1
        with:
          node-version: '14.x'

      - name: Install
        run: npm install # 安装依赖

      - name: Build
        run: npm run build # 打包

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3 # 使用部署到 GitHub pages 的 action
        with:
          publish_dir: ./dist # 部署打包后的 dist 目录
          github_token: ${{ secrets.vue3_deploy }} # secret 名
          user_name: ${{ secrets.MY_USER_NAME }}
          user_email: ${{ secrets.MY_USER_EMAIL }}
          commit_message: Update Vite2.x + Vue3.x + TypeScript Starter # 部署时的 git 提交信息，自由填写

自动部署触发原理

当有新提交的代码 push 到 GitHub 仓库时，就会触发 GitHub Actions，在 GitHub 服务器上执行 Action 配置文件里面的命令，例如：安装依赖、项目打包等，然后将打包好的静态文件部署到 GitHub Pages 上，最后，我们就能通过域名访问了。

通过域名 jingyuanhe.github.io/vue3-typesc… 访问本项目

最后

这篇文章是参考人家的，再次感谢从 0 开始手把手带你搭建一套规范的 Vue3.x 项目工程环境，主要就是想记录一下学习过程中遇到的一些坑，防止以后再遇到同样的问题。

从0搭建规范vue3+typescript+vite项目

架构搭建

初始化架构

修改vite.config.js

初始化项目目录

初始化路由

初始化vuex

集成ui框架### Element Plus

集成axios

集成 CSS 预编译器 Stylus/Sass/Less

代码规范

集成 EditorConfig 配置

集成 Prettier 配置

集成 ESLint 配置

解决 Prettier 和 ESLint 的冲突

集成 husky 和 lint-staged

配置 husky

配置 lint-staged

提交规范

commit message 格式规范

Header

type

scope

subject

集成 commitlint 验证提交规范

安装 commitlint

配置 commitlint

.husky 目录下创建 commit-msg 文件

commitlint 验证

单元测试

安装开发依赖

创建 jest 配置文件

创建单元测试文件

集成 @types/jest

添加 eslint-plugin-jest

执行单元测试

单元测试约束

自动部署

什么是 GitHub Actions

配置 GitHub Actions

创建 GitHub Token

在仓库中添加 secret

创建 Actions 配置文件

自动部署触发原理

最后

`.husky` 目录下创建 `commit-msg` 文件