引入 Vuex

配置 Vuex 的过程完全一样。

1. 安装 Vuex：

$ npm i vuex@next

2.创建配置文件：

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

import { createStore } from "vuex";const defaultState = {
  count: 0,
};// Create a new store instance.
export default createStore({
  state() {
    return defaultState;
  },
  mutations: {
    increment(state: typeof defaultState) {
      state.count++;
    },
  },
  actions: {
    increment(context) {
      context.commit("increment");
    },
  },
  getters: {
    double(state: typeof defaultState) {
      return 2 * state.count;
    },
  },
});

3.安装main.ts

引入Element Plus

Element Plus是一个支持Vue3的UI框架，这里我们先安装它：

$ npm i element-plus

然后在文件中挂载Element Plus `main.ts`

import { createApp } from 'vue'
import App from './App.vue'import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'createApp(App).use(ElementPlus).mount('#app')

需要注意的是，对于 UI 框架，我们不仅要导入它的 JavaScript 模块，还要导入一个 CSS 样式文件。

我使用的是Element Plus框架，大家可以选择自己喜欢的UI框架。不管是什么UI框架，使用流程如下：

• 安装包
• 引入 JavaScript 模块main.ts
• 引入 CSS 样式

集成 Axios 进行 HTTP 请求

Axios 和 Vue 没有耦合关系，我们直接安装最新版本的 Axios 即可：$ npm i axios

Axios 是一个用于发出 HTTP 请求的工具。`axios.ts`所以，我们在该目录下创建`utils`作为axios的配置文件：

└── src/  
├── utils/  
├── axios.ts

axios.ts拦截器

import Axios from 'axios'
import { ElMessage } from 'element-plus'
const baseURL = 'https://api.github.com'
const axios = Axios.create({
  baseURL,
  timeout: 20000
})
// Intercept before sending HTTP requests
axios.interceptors.request.use(
  (response) => {
    /**
     * you can process config here
     */
    return response
  },
  (error) => {
    return Promise.reject(error)
  }
)
// Intercept after received HTTP requests
axios.interceptors.response.use(
  (response) => {
    /**
     * you can process response and error here
     */
    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

以下是 Axios 工作原理的示例：

<template></template>
<script lang="ts">
import { defineComponent } from 'vue'
import axios from '../utils/axios'
export default defineComponent({
    setup() {
      axios
        .get('/users/BytefishMedium')
        .then((res) => {
          console.log('res: ', res)
        })
        .catch((err) => {
          console.log('err: ', err)
        })
    }
  })
</script>

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

本项目使用CSS预编译器Stylus，您可以直接将其作为开发依赖安装。Vite 内部已经为我们集成了相关的 loader，无需额外配置。当然，你可以用同样的方式使用 Sass 和 Less。

安装：

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

使用方法:

<style lang="stylus">
  ...
</style>

真实项目

恭喜，我们项目的核心框架现已完成。

之前在讲解Vuex、Element Plus、Axios的时候，并没有给出具体的代码示例。所以这里我准备了一个完整的项目，充分利用了前面提到的技术栈：

github.com/sun-dream/v…

与我们之前展示的最终项目相比，这个 repo 只包含核心工作代码，没有其他复杂的配置，非常适合个人项目。

由于文章篇幅，我就不分析这个项目的具体内容了。大家可以自行阅读源码，有问题可以留言。当然，如果你想让我再写一篇关于这个项目的文章，请告诉我。

如果你只是想开发一个个人项目，那么上面的技术栈就足够你使用了。但是如果要开发一个企业级的项目，代码风格检查、单元测试、自动部署是必不可少的。下面我们依次介绍这些。

来个三连叭，大爷

代码风格

随着前端应用逐渐变得更大更复杂，当多人参与同一个项目时，每个人的习惯都不一样。他们经常在项目中使用不同的编码风格来编写代码。如果继续下去，项目的健壮性会越来越差。

解决这些问题，理论上口头约定和代码审查都可以，但这些方式不能实时反馈，沟通成本高，不够灵活。更重要的是，它无法控制。我们不得不在项目中使用一些工具来约束代码风格。

本节介绍如何使用EditorConfig + Prettier + ESLint 实现代码格式标准化。

这样做有以下好处：

• 解决跨团队代码不规范导致可读性差、可维护性差的问题。
• 解决团队成员使用不同编辑器导致编码风格不一致的问题。
• 提前发现代码风格问题，给出相应提示，及时修复
• 通过减少代码审查过程的来回来回节省时间。
• 自动格式化，统一编码风格。

编辑配置

不同的编辑器有不同的默认行为：

• 一些编辑器默认使用UTF8字符集；其他人没有。
• 一些编辑器的默认缩进为 2 个空格，其他的为 4 个。
• ……

为了统一项目不同成员的编辑器的默认行为，我们可以使用 EditorConfig。EditorConfig 有助于为跨各种编辑器和 IDE 处理同一项目的多个开发人员保持一致的编码风格。

现在打开我们之前的项目，.editorconfig在项目根目录下添加一个文件：

# Editor configuration, see http://editorconfig.org# Indicates that this is the top level EditorConfig configuration file
root = true[*] # Indicates that the following rules apply to all files
charset = utf-8 # Set the character set to utf-8
indent_style = space # tab | space）
indent_size = 2 # 2 spaces
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true[*.md] # Indicates that only md files apply the following rules
max_line_length = off
trim_trailing_whitespace = false

请注意，此功能尚未内置到 VSCode 中，您需要安装一个插件：

像 WebStorm 这样的编辑器已经内置了这个功能，所以你可以直接使用它。

Prettier

Prettier 是一个强大的代码格式化工具，支持 JavaScript、TypeScript、CSS、SCSS、LESS、JSX、Angular、Vue、GraphQl、JSON、Markdown 等语言。它几乎可以处理前端可用的任何文件格式，并且是目前最流行的代码格式化工具。 安装： $ npm i prettier -D

Prettier 支持多种格式的配置文件，例如.json, .yml, .yaml,.js等，这里我们.prettierrc在本项目的根目录下创建一个文件

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

安装并配置 Prettier 后，您可以使用以下命令格式化文件。

*#* 格式化所有文件  
$ npx prettier --write .

像 WebStorm 这样的 IDE 已经内置了这个功能，所以你可以直接使用它。

Prettier配置完成后，当使用VSCode或WebStorm等编辑器的格式化功能时，编辑器会按照Prettier配置文件中指定的规则对文件进行格式化。

举一个栗子：

这样，项目中每个团队成员在格式化代码后都会得到相同的结果。

ESLint

只有 EditorConfig 和 Prettier 是不够的，如果我们想对代码风格进行更深入的检查，那么 ESLint 是必不可少的。 安装：$ npm i eslint -D

在使用ESLint的时候，我们还需要编写一个ESLint配置文件来说明代码风格的规则。但是手动编写配置文件太麻烦，而且容易出错，所以我们可以使用如下命令自动生成配置文件。

初始化：npx eslint --init，之后我们会进入命令行交互界面，然后它会让我们做出一些选择：

首先，它会让我们选择严格的代码检查级别。这里我们希望 ESLint 能够强制执行代码风格检查，所以我们选择第三种方案。

然后我们选择 JavaScript 模块。

选择 Vue.js。

使用 TypeScript。

我们的项目在浏览器中运行，构建工具和后来的测试框架在 Node.js 中运行，因此请同时检查浏览器和 Node.js。

然后是最重要的一步：配置代码风格规则。虽然我们可以自定义规则，但我们不必这样做。我们可以从社区中获取成熟的解决方案。

所以我们选择“使用Airbnb的风格指南”。

ESLint 为我们提供了社区中流行的三种 JavaScript 样式指南的列表：Airbnb、Standard 和 Google。

这三份风格指南由多位具有多年开发经验的人编写而成，足以被全球许多大大小小的公司所使用。

这里我们选择了 GitHub 上 star 最多的 Airbnb，省去配置 ESLint 规则的繁琐时间，然后让团队成员学习 Airbnb JavaScript style guide。

github.com/airbnb/java…

下一步：

配置文件使用 javascript 格式

接下来用 npm 安装它们。

注意： 如果自动安装依赖失败，可以手动安装：

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

我们完成这些选项后，就可以在项目的根目录下看到配置文件了。

现在我们可以使用 ESLint，但是如果你使用的是 VS 代码，你需要安装一个插件：

如果我们有不符合规则的代码，ESLint 会提示我们：

EditorConfig、Prettier、ESLint的关系

在这里，您可能想知道为什么我们需要这么多与样式相关的工具，而只使用一个就可以了吗？

其实这三个工具的功能是完全不同的。EditorConfig 用于控制编辑器的默认行为，仅当您通过编辑器输入代码时才起作用。

如果你是复制粘贴别人的代码，那么EditorConfig不会帮你纠正代码风格。重新格式化代码的 Prettier 具有广泛的适用性，但无法在更深层次上解析 JavaScript 代码。另一方面，ESLint 旨在检查 JavaScript 和 TypeScript 代码，以更深入地了解语法细节。

当然，Prettier 和 ESLint 在某些方面有重叠，所以它们会发生冲突。所以让我们来解决这个问题。

解决 Prettier 和 ESLint 之间的冲突

本项目的 ESLint 配置中使用了 Airbnb JavaScript Style Guide 验证。其中一个规则是在代码结束后加一个分号，但是我们在Prettier配置文件中添加了一个规则，代码结束后的非分号项，所以就产生了冲突。

为了解决这些冲突，我们需要使用eslint-plugin-prettierand eslint-config-prettier。

• eslint-plugin-prettier: 将 Prettier 的规则设置为 ESLint 的规则。
• eslint-config-prettier: 关闭 ESLint 中会与 Prettier 冲突的规则。

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

现在让我们安装这两个插件：

$ npm i eslint-plugin-prettier eslint-config-prettier -D

并将 Prettier 插件添加到.eslintrc.js：

module.exports = { 
  ... 
  extends: [ 
    'plugin:vue/essential', 
    'airbnb-base', 
    'plugin:prettier/recommended' 
  ], 
  ... 
}

Husky

虽然我们之前通过 Prettier 和 ESLint 写了很多规则，但是对于一个大项目，总会有人不遵守规则，或者不小心破坏规则。为了使这些规则可执行，我们可以使用一个名为 Husky 的工具。

git comit当用户尝试提交时，Husky 可以通过 Husky 拦截、强制执行 ESLint 命令，git commit如果发现代码不符合 ESLint 的规则，则不允许。

安装Husky并初始化配置：

$ npx husky-init && npm install

该命令执行以下操作：

1. 安装 Huskey

1. 在项目根目录下创建一个.husky目录

3.在目录下创建一个pre-commithook .husky，初始化precommitcommand为npm test.

4.修改的scripts并package.json添加“prepare”: “husky install”

上面生成的内容是默认配置。现在我们将对以上内容做一些简单的修改。

修改.husky/pre-commit文件：

我们npm test改为eslint — fix ./src — ext .vue,.js,.ts

上面的钩子pre-commit文件做的是： 当我们做的时候git commit-m “XXX”，它首先对目录中的eslint — fix所有.vue,.js和.ts文件执行命令src。如果 ESLint 没有报错，那么 commit 过程就没问题；如果 ESLint 报告错误，则此提交将终止。

eslint --fix然而，一个新的问题出现了：有时我们只更改一个或两个文件，但我们对所有这些文件都执行。如果这是一个历史项目，并且我们在过程中间配置了 ESLint 规则，那么在提交代码时也会检查所有其他未修改的“历史”文件，这可能会导致大量文件出现 ESLint 错误，这显然不是我们想要的。

我们需要确保我们只使用 ESLint 来修复我们这次编写的代码，而不会影响其他代码。lint-staged是一个很棒的工具，我们可以改用它。

lint 阶段

lint-staged通常与哈士奇结合使用。git add它允许 Husky 的钩子只对 Git 暂存区中的文件（files by ）而不是任何其他文件触发命令。

1. 安装：

$ npm i lint-staged -D

2.添加配置package.json

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

eslint --fix这条命令的意思是只在git暂存区的.vue., .js.,和文件上执行。.ts

3、修改.husky/pre-commit钩子触发命令为：npx lint-staged

Git 提交消息约定

我们之前统一了代码风格，对commit进行了强约束，保证了项目的质量。在多人项目中，commit code时也有一种情况：不能保证每个人都能准确描述commit message。

为了规范commit message，我们可以采用社区最流行的风格：AngularJS Git Commit Message Conventions

查看 Angular 项目提交历史：

从上图中可以看出，这些提交消息是经过格式化的。

AngularJS Git Commit Message Conventions的详细内容可以到下面的链接查看官方文档：

docs.google.com/document/d/…

这里我们重点介绍如何在项目中使用它。

Commitizen

Commititizen 是一个帮助您编写格式良好的提交消息的工具。

1. 安装

$ npm install commitizen -D

2.初始化

成功安装 commitizen 后，我们使用适配器初始化项目cz-conventional-changelog：

$ npx commitizen init cz-conventional-changelog --save-dev --save-exact

这个命令做了一些事情：

• 安装cz-conventional-changelog到开发依赖
• 添加config.commitizen到package.json

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

使用 Commitizen

以前我们用 commit 代码git commit -m ‘xxx'，现在可以改成git czor npx cz。

执行该命令后，我们将进入命令行交互界面，系统会提示我们编写标准的提交信息。

举一个栗子:

• feat

feat(browser): onUrlChange event (popstate/hashchange/polling)Added new event to browser:
- forward popstate event if available
- forward hashchange event if popstate not available
- do polling when neither popstate nor hashchange availableBreaks $browser.onHashChange, which was removed (use onUrlChange instead)

• fix

fix(compile): couple of unit tests for IE9Older IEs serialize html uppercased, but IE9 does not...
Would be better to expect case insensitive, unfortunately jasmine does
not allow to user regexps for throw expectations.Closes #392
Breaks foo.bar api, foo.baz should be used instead

• style

style(location): add couple of missing semi colons

Commitlint

为确保每条提交消息都符合我们的要求，我们可以使用 husky + commitlint 来强制验证。这与我们之前在代码样式部分中使用它的方式相同。

1. 安装

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

2.配置

创建commitlint.config.js并填充以下内容：

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

添加 husky commit-msg hook:

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

现在，如果我们尝试提交一条不符合规则的消息，它将被彻底拒绝。

单元测试

单元测试是项目开发中的一个重要步骤。完整的测试可以为代码提供质量保证，减少错误的发生。

这里我们使用以下工具：

• vue-test-utils：Vue Test Utils 的下一个迭代。它针对 Vue 3。
• jest：令人愉快的 JavaScript 测试。
• vue-jest :  Jest Vue 转换器
• ts-jest ： 具有源映射支持的 Jest 转换器，可让您使用 Jest 测试用 TypeScript 编写的项目。

安装：

$ npm i @vue/test-utils @next jest vue-jest@next ts-jest -D# 或者使用纱线$ yarn add @vue/test-utils@next jest vue-jest@next ts-jest --dev

配置：

jest.config.js在根目录下创建。

module.exports = { 
  moduleFileExtensions: ['vue', 'js', 'ts'],
  预设: 'ts-jest', 
  testEnvironment: 'jsdom', 
  transform: { 
    '^.+\.vue$': ' vue-jest', 
    '^.+\.ts$': 'ts-jest' 
  }, 
  testRegex: '(/__tests__/.*|(\.|/)(test|spec))\.( TS)$' 
}

测试文件：

创建一个 Vue 组件进行测试：

• ./src/views/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: 'Vuex',
    setup() {
      const count = ref<number>(0)
      const increment = () => {
        count.value += 1
      }
      return { count, increment }
    }
  })
</script>

在目录中创建一个测试文件tests：:

├── src/
└── tests/                      
    ├── 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')
})

整合@type/jest

如果您发现此错误：

你可以通过安装这个包来解决这个问题：

$ npm i @types/jest -D

集成 eslint-plugin-jest

您可能会发现此错误：

这是因为我们项目中使用了ESLint，测试文件不符合ESLint的规则。因此，我们还需要在 ESLint 中添加插件，eslint-plugin-jest让它去验证 jest 文件。

您可以通过安装此软件包来解决此问题：

$ npm i eslint-plugin-jest -D

然后配置.eslintrc.js：

module.exports = { 
  ... 
  extends: [ 
    ... 
    'plugin:jest/recommended' 
  ], 
  ... 
}

执行单元测试

在中添加一个新脚本package.json：

    {  
    "script": {  
        "test": "jest"  
        }  
    }

然后我们可以开始单元测试npm run test：

当单元测试没有全部通过时，我们需要根据错误信息优化相应组件的代码，进一步提高项目的健壮性。

然而，编写单元测试是一件痛苦的事情。我个人认为没有必要为所有组件编写单元测试。根据项目的实际情况编写即可。

推送测试

和以前一样，只要开发人员试图将提交推送到远程存储库，我们就可以使用 git hook 来强制进行单元测试。

pre-push通过husky创建一个钩子：

$ npx husky add .husky/pre-push "npm run test $1"

此命令将pre-push在目录中创建一个文件.husky。

npm run test现在，只要开发人员尝试将代码提交到远程存储库，就会强制执行。

自动化部署

本项目是搭建一个标准的前端开发环境，为此我们使用CI（Continuous Integration）来完成项目的最终部署。

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

在这里，我们使用 GitHub Actions。

什么是 GitHub 操作？

GitHub Actions 是 GitHub 的持续集成服务。持续集成包括捕获代码、运行测试、登录远程服务器、发布到第三方服务等操作。

创建 GitHub 存储库

由于 GitHub Actions 仅适用于 GitHub 存储库，因此我们创建了 GitHub 存储库来托管项目代码。

生成令牌

在使用 GitHub Action 时，我们需要生成一个具有足够权限的 Token。

首先，打开我们的 GitHub 帐户并转到：配置文件 → 开发人员设置 → 个人访问令牌：

然后我们点击Generate new token获取token作为我们的访问凭证。

生成令牌时，有一些权限控制选项。对于本文，我们将选择 repo 和 workflow：

现在我们有了自己的令牌。

将令牌设置到存储库

将令牌添加到您的项目：

settings-> Secrets->New repository secret

为操作创建配置文件

deploy.yml使用.github/workflows以下内容创建：

name: deployon:
  push:
    branches: [master]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
        with:
          publish_dir: ./dist
          github_token: ${{ secrets.GH_PAGES_DEPLOY }}
          user_name: ${{ secrets.MY_USER_NAME }}
          user_email: ${{ secrets.MY_USER_EMAIL }}
          commit_message: Update Vite2.x + Vue3.x + TypeScript Starter

这是如何运作的？

当新提交的代码被推送到GitHub仓库时，会触发GitHub Actions在GitHub服务器上执行Action命令，如：安装依赖、打包项目等，然后将打包好的静态文件部署到GitHub Pages，最后，我们可以在线访问它们。

通过自动化部署，我们只需关注项目的开发阶段，将任何重复和枯燥的活动留给程序来完成。

懒惰是程序员的第一生产力。

事实上，GitHub Action 可以完成很多事情，但这只是一个简单的练习。

GitHub 页面

经过以上配置后，每当我们向仓库推送代码时，GitHub服务器会自动帮我们打包代码，并将打包后的代码放在分支中gh-pages。

该分支gh-pages由 GitHub Action 创建。

然后让我们设置 GitHub Pages：

至此，我们的项目上线了： 如果您稍后对项目进行更改并将其推送到 GitHub，GitHub Actions 将自动重新打包项目并为您更新 GitHub Pages。自动化部署可以为您节省大量时间。

结论

这是一篇很长的文章。很高兴你读到它。这既是对我的认可，也是对你的提升。

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

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

然后我们使用EditorConfig、Prettier、ESLint规范了我们的代码格式，我们也设置了git commit规则，然后我们为项目添加了单元测试。为了确保遵循这些规则，我们使用 Husky 来设置 git 钩子并在提交和推送期间强制执行一些检查。

最后，我们使用 GitHub Action 来自动化部署。

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

头发要没了，得去死亡隧道打两把狙。我会瞬狙的其实