Vue 3 工程化：从理论到实践 （上篇）

引言

Vue 3 是 Vue.js 的最新版本，带来了许多新特性，如 Composition API、更好的 TypeScript 支持、性能优化等。随着 Vue 3 的普及，如何高效地进行 Vue 3 工程化开发成为了开发者关注的焦点。本文将深入探讨 Vue 3 工程化的核心概念、常用工具以及实际开发中的应用。

---

一、Vue 3 工程化的核心概念

1.1 Composition API

Vue 3 引入了 Composition API，这是 Vue 3 工程化的核心特性之一。Composition API 提供了更灵活的组织代码的方式，特别适合处理复杂逻辑和状态管理。与 Options API 相比，Composition API 具有以下优势：

• 逻辑复用：通过自定义 Hook（类似于 React 的 Hook），可以更方便地复用逻辑。

• 更好的 TypeScript 支持：Composition API 的函数式编程风格更适合 TypeScript 的类型推断。

• 代码组织更灵活：可以将相关逻辑组织在一起，而不是分散在 data、methods、computed 等选项中。

示例：

import { ref, computed } from 'vue';

export function useCounter() {
  const count = ref(0);
  const doubleCount = computed(() => count.value * 2);

  function increment() {
    count.value++;
  }

  return {
    count,
    doubleCount,
    increment,
  };
}

在组件中使用：

1.2 模块化与组件化

Vue 3 依然支持模块化和组件化开发。通过将 UI 拆分为多个组件，开发者可以更好地组织代码。Vue 3 的单文件组件（SFC）依然是开发的核心方式。

1.3 构建工具

Vue 3 的工程化离不开构建工具的支持。常用的构建工具有：

• Vite：Vue 3 官方推荐的构建工具，基于原生 ES 模块，具有极快的启动速度和热更新能力。

• Vue CLI：虽然 Vue CLI 依然支持 Vue 3，但 Vite 逐渐成为 Vue 3 项目的首选构建工具。

1.4 状态管理

Vue 3 推荐使用 Pinia 作为状态管理工具。Pinia 是 Vue 3 的轻量级状态管理库，相比 Vuex，它具有以下优势：

• 更简单的 API：Pinia 的 API 更加简洁，学习成本低。

• 更好的 TypeScript 支持：Pinia 完全基于 TypeScript 设计，类型推断更加友好。

• 模块化设计：每个 Store 都是独立的，便于组织和管理。

1.5 路由管理

Vue Router 4 是 Vue 3 的官方路由管理工具，支持动态路由、嵌套路由、路由守卫等功能。

1.6 代码规范与质量

Vue 3 工程化中，代码规范和质量依然是重要的一环。常用的工具包括：

• ESLint：用于 JavaScript 和 TypeScript 代码的静态检查。

• Prettier：代码格式化工具，自动格式化代码以保持一致的风格。

• Stylelint：用于 CSS/SCSS 代码的静态检查。

1.7 自动化测试

Vue 3 的自动化测试工具与 Vue 2 类似，常用的工具包括：

• Jest：JavaScript 测试框架，支持单元测试和快照测试。

• Vue Test Utils：Vue 3 官方提供的测试工具库，用于测试 Vue 组件。

• Cypress：端到端测试工具，用于模拟用户操作，测试整个应用的功能。

---

二、Vue 3 工程化的常用工具

2.1 Vite

Vite 是 Vue 3 官方推荐的构建工具，具有极快的启动速度和热更新能力。

2.1.1 创建项目

使用 Vite 创建一个 Vue 3 项目：

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

2.1.2 项目结构

Vite 生成的项目结构如下：

my-vue3-app/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   ├── main.js
├── vite.config.js
├── package.json

2.2 Pinia

Pinia 是 Vue 3 推荐的状态管理工具，适用于中小型项目。

2.2.1 安装 Pinia

npm install pinia

2.2.2 使用 Pinia

在 src/store/counter.js 中创建 Store：

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
  },
  getters: {
    doubleCount: (state) => state.count * 2,
  },
});

在组件中使用 Pinia：

2.3 Vue Router 4

Vue Router 4 是 Vue 3 的官方路由管理工具。

2.3.1 安装 Vue Router

npm install vue-router@4

2.3.2 使用 Vue Router

在 src/router/index.js 中配置路由：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
];

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

export default router;

在 main.js 中使用路由：

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

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

---

三、Vue 3 工程化在实际开发中的应用案例

3.1 项目初始化

使用 Vite 快速初始化一个 Vue 3 项目：

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

3.2 使用 Composition API 组织逻辑

通过 Composition API 将逻辑抽离为自定义 Hook，例如 useCounter、useUser 等。

3.3 使用 Pinia 管理状态

在项目中使用 Pinia 管理全局状态，例如用户登录状态、主题设置等。

3.4 使用 Vue Router 4 管理路由

配置动态路由、嵌套路由和路由守卫，满足复杂应用的路由需求。

3.5 代码规范与质量

在项目中集成 ESLint 和 Prettier，确保代码风格一致并提高代码质量。

3.6 自动化测试

使用 Jest 和 Vue Test Utils 编写单元测试，使用 Cypress 编写端到端测试。

---

四、总结

Vue 3 工程化是现代前端开发中的重要实践。通过 Composition API、模块化开发、构建工具（如 Vite）、状态管理（如 Pinia）、路由管理（如 Vue Router 4）、代码规范与质量、自动化测试等手段，开发者可以显著提高开发效率和代码质量。在实际开发中，合理使用这些工具和技术，能够帮助我们构建出高效、可维护的 Vue 3 应用。

希望本文能够帮助读者更好地理解 Vue 3 工程化的核心概念和实际应用，并在实际项目中加以实践。