Vue CLI 与 Vite：构建工具的选择及其在 Vue 项目中的应用(如何在 Vue 2 中使用 Vue CLI 进行项目创建、Vue 3 项目中如何使用 Vite 实现快速开发)

文章目录

• 1. 引言
• 2. Vue CLI 与 Vite 的基本概念
• • 2.1 Vue CLI 概述
  • 2.2 Vite 概述
• 3. 如何在 Vue 2 中使用 Vue CLI 进行项目创建
• • 3.1 安装 Vue CLI
  • 3.2 创建 Vue 2 项目
  • 3.3 启动开发服务器
• 4. Vue 3 项目中如何使用 Vite 实现快速开发
• • 4.1 使用 Vite 初始化 Vue 3 项目
  • 4.2 启动 Vite 开发服务器
  • 4.3 Vite 与 Vue 3 的生态集成
• 5. 如何在 Vue 3 项目中实现自定义 Vite 插件
• • 5.1 创建 Vite 插件的基础结构
  • 5.2 在 Vite 配置中使用插件
  • 5.3 插件的实际应用场景
• 6. 总结

1. 引言

在 Vue 项目开发中，构建工具是提升开发效率的重要因素。Vue CLI 和 Vite 是两种主流的 Vue 项目构建工具，它们在项目初始化、配置灵活性、性能和插件体系上各具特色。本文将深入探讨 Vue CLI 与 Vite 的基本概念，如何在 Vue 2 和 Vue 3 项目中使用它们进行快速开发，并讨论在 Vue 3 中如何实现自定义 Vite 插件。

2. Vue CLI 与 Vite 的基本概念

2.1 Vue CLI 概述

Vue CLI（Command Line Interface）是 Vue.js 官方团队提供的一款用于快速生成和管理 Vue 项目的脚手架工具。Vue CLI 基于 Webpack 构建，支持丰富的插件系统，开发者可以通过简单的命令生成完整的 Vue 项目结构。

• 特点：
  • 提供了基于 Webpack 的预配置，简化了复杂的 Webpack 配置。
  • 支持插件和 Vue UI 管理项目。
  • 提供了完整的单元测试、E2E 测试以及 PWA 支持。

2.2 Vite 概述

Vite 是由 Vue.js 的作者尤雨溪开发的轻量化构建工具。与 Vue CLI 基于 Webpack 不同，Vite 采用了 ES 模块 (ESM) 和 Rollup 进行打包，其核心优势在于开发时的极速热更新和更快的构建速度。

• 特点：
  • 极速开发：通过 ESM 实现按需编译，避免了 Webpack 全量编译的性能瓶颈。
  • 极简配置：开箱即用的配置，并支持灵活的插件扩展。
  • 现代化支持：Vite 完美支持 Vue 3 等现代前端框架，并且原生支持 TypeScript。

3. 如何在 Vue 2 中使用 Vue CLI 进行项目创建

3.1 安装 Vue CLI

首先，全局安装 Vue CLI 工具：

npm install -g @vue/cli

3.2 创建 Vue 2 项目

通过以下命令生成一个 Vue 2 项目：

vue create my-vue2-project

在创建过程中，Vue CLI 提供了许多项目配置选项，包括 Babel、TypeScript、ESLint、CSS 预处理器等。可以根据项目需求选择合适的配置。

3.3 启动开发服务器

项目创建完成后，可以通过以下命令启动开发服务器：

cd my-vue2-project
npm run serve

Vue CLI 会使用 Webpack 进行模块打包和热重载，提供良好的开发体验。

4. Vue 3 项目中如何使用 Vite 实现快速开发

4.1 使用 Vite 初始化 Vue 3 项目

Vite 支持 Vue 3 的项目创建。首先，全局安装 Vite：

npm init vite@latest

在命令执行后，Vite 会提供项目模板选择，选择 Vue 作为框架：

npm init vite@latest my-vue3-project
cd my-vue3-project
npm install

4.2 启动 Vite 开发服务器

Vite 的启动速度非常快，因为它只在开发时编译实际被请求的模块，而不是整个项目。

npm run dev

Vite 提供了出色的热模块替换（HMR）支持，代码修改后会即时在浏览器中更新，无需手动刷新页面。

4.3 Vite 与 Vue 3 的生态集成

Vite 天生支持 Vue 3 的单文件组件（SFC），通过官方的 @vitejs/plugin-vue 插件来加载 .vue 文件：

npm install @vitejs/plugin-vue

5. 如何在 Vue 3 项目中实现自定义 Vite 插件

5.1 创建 Vite 插件的基础结构

Vite 插件的开发与 Rollup 插件 API 兼容。一个基本的 Vite 插件结构如下：

export default function myPlugin() {
  return {
    name: 'my-plugin',
    transform(code, id) {
      // 自定义处理逻辑
      if (id.endsWith('.vue')) {
        console.log('Processing Vue file:', id);
      }
      return code;
    }
  };
}

5.2 在 Vite 配置中使用插件

将自定义插件导入到 Vite 配置文件 vite.config.js 中：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import myPlugin from './plugins/myPlugin';

export default defineConfig({
  plugins: [vue(), myPlugin()]
});

5.3 插件的实际应用场景

• 代码转换：可以用于自动化代码修改，如替换变量、添加注释等。
• 打包优化：通过插件实现对打包过程的自定义优化，例如压缩文件、移除冗余代码。

Vite 插件机制简单而强大，可以极大地提升项目构建的灵活性和可扩展性。

6. 总结

Vue CLI 和 Vite 分别代表了传统与现代构建工具的两种不同思路。Vue CLI 更适合复杂、兼容性要求高的项目，而 Vite 则是针对现代前端开发进行优化的轻量工具。通过掌握这两种工具的使用，开发者能够在不同场景下选择最合适的方案，从而提高开发效率和项目性能。在 Vue 3 中，自定义 Vite 插件还可以进一步增强项目的灵活性。