Vue3 项目创建实战：Vue CLI 与 Vite 深度对比与操作指南 - 教程

在 Vue3 生态中，项目构建工具的选择直接影响开发效率与项目性能。作为前端开发者，你是否曾困惑于 Vue CLI 与 Vite 的取舍？为什么同样是创建 Vue3 项目，两者的体验却大相径庭？本文将从实战出发，带你全面掌握两种工具的使用方法，深入剖析其底层差异，助你在不同场景下做出最优选择。

一、前置知识：为什么需要构建工具？

Vue3 作为渐进式框架，虽然支持直接通过<script>标签引入使用，但在实际开发中，我们需要处理模块化、代码压缩、热更新等问题。构建工具就像 "项目管家"，帮我们完成这些复杂工作：

• 模块化管理：支持 ES Module、CommonJS 等模块规范
• 资源处理：解析 CSS、图片、字体等非 JS 资源
• 开发效率：提供热更新、代码检查、调试支持
• 生产优化：代码压缩、Tree-Shaking、按需加载

Vue CLI 和 Vite 正是这类工具，但它们的实现思路却截然不同。

二、Vue CLI 创建 Vue3 项目全流程

Vue CLI 是 Vue 官方早期推出的标准化工具，基于 Webpack 构建，适合中大型项目开发。

2.1 环境准备

首先确保安装了 Node.js（推荐 v14.0.0+），可通过以下命令检查：

node -v # 查看Node版本

npm -v # 查看npm版本

安装 Vue CLI（注意 Vue CLI 4 + 才支持 Vue3）：

npm install -g @vue/cli

# 或使用yarn

yarn global add @vue/cli

验证安装成功：

vue --version # 显示@vue/cli 4.x或5.x即成功

2.2 创建项目

执行创建命令，输入项目名称（此处以vue3-cli-demo为例）：

vue create vue3-cli-demo

关键配置选择（按键盘上下键切换选项，空格键选择）

1. 选择手动配置：

   ? Please pick a preset:
     Default ([Vue 2] babel, eslint)
     Default (Vue 3) ([Vue 3] babel, eslint)
   ❯ Manually select features

2. 必选核心功能（按需求勾选）：

   ? Check the features needed for your project:
   ❯◉ Babel
   ◉ TypeScript (可选，推荐大型项目)
   ◉ Progressive Web App (PWA) Support (可选)
   ◉ Router (路由)
   ◉ Vuex (状态管理)
   ◉ CSS Pre-processors (CSS预处理器)
   ◉ Linter / Formatter (代码检查)
   ◉ Unit Testing (单元测试，可选)
   ◉ E2E Testing (端到端测试，可选)

3. 选择 Vue 版本：

   ? Choose a version of Vue.js that you want to start the project with
     2.x
   ❯ 3.x

4. 其他配置建议：

   • TypeScript：选择Yes使用 class-style 组件语法
   • Babel：选择Yes与 TypeScript 配合使用
   • Router：选择Yes启用 history 模式（需后端配合）
   • CSS 预处理器：推荐Sass/SCSS (with dart-sass)
   • 代码检查：推荐ESLint + Prettier
   • 检查时机：Lint on save（保存时检查）
   • 配置文件存放：In dedicated config files（单独文件管理）
   • 是否保存预设：根据需求选择Yes或No

等待依赖安装完成（首次可能较慢，可配置 npm 镜像加速）。

2.3 项目结构解析

vue3-cli-demo/
├── public/               # 静态资源（直接复制到dist根目录）
│   ├── favicon.ico
│   └── index.html        # 入口HTML
├── src/
│   ├── assets/           # 源代码中的资源（会被webpack处理）
│   ├── components/       # 组件
│   ├── router/           # 路由配置
│   ├── store/            # 状态管理
│   ├── views/            # 页面组件
│   ├── App.vue           # 根组件
│   └── main.ts           # 入口文件
├── .eslintrc.js          # ESLint配置
├── babel.config.js       # Babel配置
├── package.json          # 项目依赖与脚本
└── vue.config.js         # Vue CLI配置（可自定义webpack）

核心差异点：

• public与assets：前者资源不经过 webpack 处理，后者会被打包
• vue.config.js：提供 webpack 配置的上层封装，简化配置难度

2.4 运行与构建

启动开发服务器（默认端口 8080）：

cd vue3-cli-demo

npm run serve

构建生产版本（输出到dist目录）：

npm run build

2.5 Vue CLI 工作原理示意

Vue CLI 基于 Webpack，其核心特点是先打包再服务：开发时会将所有模块预先编译打包，再启动服务器。这种方式在项目规模扩大后，启动速度会明显变慢。

三、Vite 创建 Vue3 项目全流程

Vite 是 Vue 作者尤雨溪推出的新一代构建工具，以 "极速开发体验" 为卖点，采用浏览器原生 ES 模块支持，适合快速迭代的项目。

3.1 环境准备

Vite 对 Node.js 版本要求更高（v14.18.0+），检查版本：

node -v # 确保≥v14.18.0

Vite 无需全局安装，可直接通过npm create命令创建项目。

3.2 创建项目

执行创建命令（Vite 官方推荐方式）：

npm create vite@latest

交互式配置步骤：

1. 输入项目名称（此处以vue3-vite-demo为例）：

   ? Project name: » vue3-vite-demo

2. 选择框架：

   ? Select a framework: » - Use arrow-keys. Return to submit.
     Vanilla
     React
     Preact
     Lit
     Svelte
   ❯ Vue

3. 选择变体（是否使用 TypeScript）：

   ? Select a variant: » - Use arrow-keys. Return to submit.
   ❯ Vue
     Vue + TypeScript

进入项目目录并安装依赖：

cd vue3-vite-demo

npm install

3.3 项目结构解析

vue3-vite-demo/
├── public/               # 静态资源（与Vue CLI一致）
│   └── favicon.ico
├── src/
│   ├── assets/           # 资源文件
│   ├── components/       # 组件
│   ├── App.vue           # 根组件
│   └── main.js           # 入口文件
├── .eslintrc.cjs         # ESLint配置
├── index.html            # 入口HTML（注意位置：根目录）
├── package.json
└── vite.config.js        # Vite配置文件

核心差异点：

• index.html在根目录：Vite 将其作为入口，更符合浏览器原生逻辑
• 无默认路由 / 状态管理：需手动安装（npm i vue-router@4 pinia）
• 配置文件更简洁：vite.config.js基于 Rollup，配置更直观

3.4 运行与构建

启动开发服务器（默认端口 5173）：

npm run dev

构建生产版本（输出到dist目录）：

npm run build

预览生产版本：

npm run preview # Vite特有的预览命令，无需额外服务器

3.5 Vite 工作原理示意

Vite 的核心创新是按需编译：

1. 开发时不打包所有文件，而是直接启动服务器
2. 浏览器请求某个模块时，Vite 才即时编译该模块
3. 对第三方依赖（如 vue）进行预构建，转为浏览器可直接使用的 ES 模块

四、核心差异深度对比

维度	Vue CLI	Vite
底层工具	Webpack	开发环境：原生 ES 模块；生产：Rollup
启动速度	较慢（全量打包）	极快（按需编译）
热更新速度	随项目规模下降	保持快速（只更新修改的模块）
配置复杂度	中等（webpack 封装）	低（Rollup 风格配置）
生态兼容性	极佳（Webpack 生态成熟）	良好（持续完善）
适用场景	大型复杂项目、需要 Webpack 特性	中小型项目、快速迭代、开发体验优先
生产构建性能	优秀（Webpack 优化成熟）	优秀（Rollup Tree-Shaking 更强）
学习成本	较高（需了解 Webpack 概念）	较低（更贴近浏览器原生）

性能对比示意图：

从图中可见，随着项目规模增长，Vue CLI 的启动时间显著增加，而 Vite 的启动时间几乎保持稳定，这是两者最直观的差异。

五、如何选择？实战建议

1. 新项目首选 Vite：

   • 开发体验优势明显（秒级启动、即时热更新）
   • 配置更简洁，学习成本低
   • 生产构建产物更优（Rollup 的 Tree-Shaking 更高效）

2. 继续使用 Vue CLI 的场景：

   • 项目依赖大量 Webpack 专属插件
   • 团队已熟练掌握 Vue CLI+Webpack 生态
   • 需要复杂的构建流程定制（Webpack loader 生态更成熟）

3. 迁移策略：

   • 小型项目：直接用 Vite 重构，成本低
   • 大型项目：可先在新功能模块尝试 Vite，逐步迁移

六、总结

Vue CLI 和 Vite 作为 Vue3 生态的两大构建工具，各有侧重：

• Vue CLI 代表 "稳定成熟"，基于 Webpack 生态，适合复杂项目
• Vite 代表 "未来趋势"，基于原生 ES 模块，专注开发体验

无论选择哪种工具，核心目标都是提升开发效率与项目性能。随着 Vite 生态的不断完善，它已成为 Vue3 项目的主流选择，但了解 Vue CLI 的工作原理仍有助于深入理解前端构建流程。

希望本文的实战指南能帮你快速上手两种工具，在实际开发中做出最合适的技术选型！