当前位置：首页 > news >正文

Vue3 项目创建指南（Vue-CLI vs Vite 对比）

news 2025/10/28 13:43:56

Vue3 作为目前 Vue 生态的主流版本，提供了两种核心项目创建方式：Vue-CLI（传统方案）和 Vite（新一代构建工具）。本文将详细对比两种方案的优劣，带你一步步搭建 Vue3 开发环境，并解析项目结构与核心配置。

一、前置准备：环境搭建

无论选择哪种方案，首先需确保本地环境满足要求：

Node.js：建议 v14.18+ 或 v16+（可通过 node -v 查看版本）
包管理器：npm（内置）或 yarn（推荐，需额外安装：npm install -g yarn）
代码编辑器：VSCode + 插件（Vue Language Features (Volar)、TypeScript Vue Plugin）

二、方案一：Vue-CLI 创建（兼容 Vue2 项目）

Vue-CLI 是 Vue2 时代的主流工具，目前处于维护模式，适合需要兼容旧项目或团队熟悉 CLI 流程的场景。

1. 安装 Vue-CLI

# 查看当前版本（需确保 ≥4.5.0）
vue --version
# 安装/升级 Vue-CLI
npm install -g @vue/cli

2. 创建 Vue3 项目

# 执行创建命令
vue create vue3-cli-demo
# 选择项目配置：
# 1. 手动选择特性（Manually select features）
# 2. 勾选需要的特性（建议：Babel、TypeScript、Router、Pinia、ESLint）
# 3. 选择 Vue 版本：3.x
# 4. 其余配置按需选择（如 TypeScript 类型检查、ESLint 规则等）

3. 启动项目

cd vue3-cli-demo
npm run serve # 启动开发服务器

三、方案二：Vite 创建（推荐）

Vite 是 Vue 团队推出的新一代构建工具，基于 ES 模块原生支持，解决了 Webpack 冷启动慢、热更新卡顿的问题，是 Vue3 新项目的首选。

1. 创建 Vite 项目

# 执行创建命令（Vue 官方推荐）
npm create vue@latest
# 按提示配置项目：
√ Project name: vue3-vite-demo # 项目名称
√ Add TypeScript? Yes # 建议启用 TypeScript
√ Add JSX Support? No # 按需选择（非必要不选）
√ Add Vue Router? Yes # 路由支持
√ Add Pinia? Yes # 状态管理
√ Add Vitest? No # 测试工具（按需选择）
√ Add ESLint? Yes # 代码检查

2. 安装依赖并启动

cd vue3-vite-demo
npm install # 安装依赖
npm run dev # 启动开发服务器（秒级启动）

四、Vue-CLI vs Vite 核心对比

对比维度	Vue-CLI（Webpack）	Vite（原生 ES 模块）
启动速度	慢（需打包整个项目）	极快（按需编译）
热更新速度	较慢（依赖 Webpack 编译）	极快（仅更新修改模块）
构建体积	优化较好，但配置复杂	自动优化，支持 Tree-Shaking
配置复杂度	高（需熟悉 Webpack 配置）	低（零配置启动，按需扩展）
兼容性	好（支持旧浏览器）	一般（依赖 ES 模块支持）
适用场景	旧项目迁移、复杂 Webpack 配置需求	新项目、追求开发效率的场景

实战体验：

Vite 开发服务器启动时间通常在 100ms 以内，而 Vue-CLI 可能需要 3-5 秒
热更新时，Vite 修改组件后瞬间生效，Vue-CLI 需等待编译完成

五、Vue3 项目结构解析（Vite 为例）

vue3-vite-demo/
├─ node_modules/       # 依赖包
├─ public/             # 静态资源（不被 Vite 处理）
├─ src/
│  ├─ assets/          # 静态资源（被 Vite 处理）
│  ├─ components/      # 公共组件
│  ├─ router/          # 路由配置
│  ├─ stores/          # Pinia 状态管理
│  ├─ views/           # 页面组件
│  ├─ App.vue          # 根组件
│  ├─ main.ts          # 入口文件
│  └─ vite-env.d.ts    # Vite 类型声明
├─ .eslintrc.js        # ESLint 配置
├─ index.html          # 入口 HTML（Vite 特有，在项目根目录）
└─ vite.config.ts      # Vite 配置文件

核心文件说明：

index.html：Vite 入口，通过 <script type="module" src="/src/main.ts"> 加载项目
vite.config.ts：Vite 配置入口，可配置代理、插件、别名等
src/main.ts：Vue 应用入口，通过 createApp 创建实例并挂载

六、VSCode 开发环境配置

必装插件：
- Vue Language Features (Volar)：Vue3 语法支持、智能提示
- TypeScript Vue Plugin (Volar)：TypeScript 与 Vue 结合支持
- ESLint：代码规范检查

2、配置建议：在 .vscode/settings.json 中添加：

{"editor.formatOnSave": true, // 保存自动格式化"vue.volar.autoCompleteRefs": true, // Ref 自动补全 .value"eslint.validate": ["vue", "typescript"] // ESLint 检查 Vue 和 TS 文件
}