Vue3 + Vite2 + TS4 搭建项目环境规范的方法

目录

1. 引言
2. 项目初始化
   • 安装 Node.js 和 npm
   • 使用 Vite 创建项目
   • 项目结构介绍
3. 配置 TypeScript
   • 安装 TypeScript
   • 配置 tsconfig.json
   • 类型声明文件
4. 配置 ESLint 和 Prettier
   • 安装 ESLint 和 Prettier
   • 配置 ESLint
   • 配置 Prettier
   • 集成 ESLint 和 Prettier
5. 配置 Vue Router
   • 安装 Vue Router
   • 配置路由
6. 配置 Vuex
   • 安装 Vuex
   • 配置 Vuex
7. 配置 Axios
   • 安装 Axios
   • 封装 Axios
8. 配置环境变量
   • 使用 .env 文件
   • 配置环境变量
9. 配置样式
   • 安装 Sass
   • 配置全局样式
10. 配置单元测试
    • 安装 Jest 和 Vue Test Utils
    • 配置 Jest
    • 编写单元测试
11. 配置 Git Hooks
    • 安装 Husky
    • 配置 Husky
12. 总结

引言

在现代前端开发中，Vue3 已经成为了一个非常流行的框架，而 Vite2 新一代的构建工具，以其极快的启动速度和热更新能力，迅速赢得了开发者的青睐。TypeScript 作为 JavaScript 的超集，提供了强大的类型系统，使得代码更加健壮和可维护。本文将详细介绍如何使用 Vue3、Vite2 和 TypeScript4 搭建一个规范的前端项目环境。

项目初始化

安装 Node.js 和 npm

在开始之前，确保你已经安装了 Node.js 和 npm。你可以通过以下命令检查是否已经安装：

node -v
npm -v

如果没有安装，可以从 Node.js 官网 下载并安装。

使用 Vite 创建项目

Vite 提供了一个非常简单的命令行工具来创建项目。你可以通过以下命令创建一个新的 Vue3 项目：

npm create vite@latest my-vue-app --template vue-ts

这个命令会创建一个名为 my-vue-app 的项目，并使用 Vue3 和 TypeScript 模板。

项目结构介绍

创建项目后，你会看到如下的项目结构：

my-vue-app/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   ├── main.ts
│   └── vite-env.d.ts
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts

• public/：存放静态资源文件。
• src/：项目的源代码目录。
• assets/：存放图片、字体等资源文件。
• components/：存放 Vue 组件。
• App.vue：根组件。
• main.ts：项目的入口文件。
• vite-env.d.ts：Vite 环境变量类型声明文件。
• index.html：项目的入口 HTML 文件。
• package.json：项目的依赖和脚本配置。
• tsconfig.json：TypeScript 配置文件。
• vite.config.ts：Vite 配置文件。

配置 TypeScript

安装 TypeScript

在创建项目时，Vite 已经自动安装了 TypeScript。如果你需要手动安装，可以使用以下命令：

npm install typescript --save-dev

配置 tsconfig.json

tsconfig.json 是 TypeScript 的配置文件，用于指定编译选项。Vite 已经为我们生成了一个默认的配置文件，你可以根据需要进行修改。以下是一个常见的配置示例：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules"]
}

类型声明文件

在 src/vite-env.d.ts 文件中，Vite 已经为我们生成了环境变量的类型声明。你可以根据需要添加其他类型声明。例如：

/// <reference types="vite/client" />

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

配置 ESLint 和 Prettier

安装 ESLint 和 Prettier

ESLint 是一个用于检查和修复 JavaScript 代码的工具，而 Prettier 是一个代码格式化工具。你可以通过以下命令安装它们：

npm install eslint prettier eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier --save-dev

配置 ESLint

在项目根目录下创建一个 .eslintrc.js 文件，并添加以下配置：

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended',
    'plugin:prettier/recommended',
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'prettier/prettier': 'error',
  },
}

配置 Prettier

在项目根目录下创建一个 .prettierrc.js 文件，并添加以下配置：

module.exports = {
  semi: true,
  singleQuote: true,
  printWidth: 80,
  trailingComma: 'all',
  arrowParens: 'always',
}

集成 ESLint 和 Prettier

为了确保 ESLint 和 Prettier 能够协同工作，我们需要在 .eslintrc.js 中配置 plugin:prettier/recommended。这样，ESLint 会自动使用 Prettier 的规则来格式化代码。

配置 Vue Router

安装 Vue Router

Vue Router 是 Vue.js 的官方路由管理器。你可以通过以下命令安装它：

npm install vue-router@4

配置路由

在 src 目录下创建一个 router 文件夹，并在其中创建一个 index.ts 文件。然后，添加以下代码：

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue'),
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue'),
  },
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router

然后，在 main.ts 中引入并使用路由：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

配置 Vuex

安装 Vuex

Vuex 是 Vue.js 的官方状态管理库。你可以通过以下命令安装它：

npm install vuex@next

配置 Vuex

在 src 目录下创建一个 store 文件夹，并在其中创建一个 index.ts 文件。然后，添加以下代码：

import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++
    },
  },
  actions: {
    increment({ commit }) {
      commit('increment')
    },
  },
  modules: {},
})

然后，在 main.ts 中引入并使用 Vuex：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(router).use(store).mount('#app')

配置 Axios

安装 Axios

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。你可以通过以下命令安装它：

npm install axios

封装 Axios

在 src 目录下创建一个 utils 文件夹，并在其中创建一个 axios.ts 文件。然后，添加以下代码：

import axios from 'axios'

const instance = axios.create({
  baseURL: process.env.VITE_API_BASE_URL,
  timeout: 10000,
})

instance.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么
    return config
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

instance.interceptors.response.use(
  (response) => {
    // 对响应数据做些什么
    return response.data
  },
  (error) => {
    // 对响应错误做些什么
    return Promise.reject(error)
  }
)

export default instance

然后，你可以在项目中通过 import axios from '@/utils/axios' 来使用封装好的 Axios 实例。

配置环境变量

使用 .env 文件

Vite 支持使用 .env 文件来管理环境变量。你可以在项目根目录下创建 .env 文件，并添加以下内容：

VITE_API_BASE_URL=https://api.example.com

配置环境变量

在 vite.config.ts 中，你可以通过 import.meta.env 来访问环境变量。例如：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  define: {
    'process.env': import.meta.env,
  },
})

配置样式

安装 Sass

Sass 是一个 CSS 预处理器，提供了变量、嵌套、混合等功能。你可以通过以下命令安装它：

npm install sass --save-dev

配置全局样式

在 src/assets 目录下创建一个 styles 文件夹，并在其中创建一个 global.scss 文件。然后，你可以在 main.ts 中引入这个全局样式文件：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import '@/assets/styles/global.scss'

createApp(App).use(router).use(store).mount('#app')

配置单元测试

安装 Jest 和 Vue Test Utils

Jest 是一个 JavaScript 测试框架，而 Vue Test Utils 是 Vue.js 的官方测试工具库。你可以通过以下命令安装它们：

npm install jest @vue/test-utils vue-jest ts-jest @types/jest --save-dev

配置 Jest

在项目根目录下创建一个 jest.config.js 文件，并添加以下配置：

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  moduleFileExtensions: ['js', 'ts', 'json', 'vue'],
  transform: {
    '^.+\\.ts$': 'ts-jest',
    '^.+\\.vue$': 'vue-jest',
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
  testMatch: ['**/tests/unit/**/*.spec.ts'],
}

编写单元测试

在 src/tests/unit 目录下创建一个 example.spec.ts 文件，并添加以下代码：

import { mount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'Hello, World!'
    const wrapper = mount(HelloWorld, {
      props: { msg },
    })
    expect(wrapper.text()).toMatch(msg)
  })
})

配置 Git Hooks

安装 Husky

Husky 是一个 Git Hooks 工具，可以在 Git 操作时自动执行一些脚本。你可以通过以下命令安装它：

npm install husky --save-dev

配置 Husky

在 package.json 中添加以下配置：

{
  "scripts": {
    "prepare": "husky install"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,ts,vue}": ["eslint --fix", "prettier --write"]
  }
}

然后，运行以下命令初始化 Husky：

npm run prepare

总结

通过本文的介绍，你已经学会了如何使用 Vue3、Vite2 和 TypeScript4 搭建一个规范的前端项目环境。我们从项目初始化开始，逐步配置了 TypeScript、ESLint、Prettier、Vue Router、Vuex、Axios、环境变量、样式、单元测试和 Git Hooks。希望这些内容能够帮助你更好地管理和开发 Vue3 项目。