Vue CLI 入门指南：快速构建 Vue.js 项目的利器

在 Vue.js 开发中，手动配置 Webpack、Babel、ESLint 等工具链往往费时费力。Vue CLI（Vue Command Line Interface）作为 Vue 官方提供的脚手架工具，能够一键生成项目结构，集成现代化前端开发所需的核心工具，让开发者专注于业务逻辑而非环境搭建。

什么是 Vue CLI？

Vue CLI 是一个基于 Node.js 的命令行工具，用于快速初始化 Vue.js 项目。它提供：
✅ 标准化项目模板（Vue 2/Vue 3 支持）
✅ 内置 Webpack、Babel、ESLint 等配置（开箱即用）
✅ 插件系统（轻松集成 Vue Router、Vuex、TypeScript 等）
✅ 可视化项目管理界面（vue ui）
✅ 多环境构建支持（开发、生产、测试模式）

虽然现在 Vue 官方推荐使用 Vite（基于 ES Modules 的极速构建工具），但 Vue CLI 仍然适用于需要 Webpack 高级配置或浏览器兼容性要求的项目。

---

核心功能

1. 快速创建项目

通过一行命令，即可生成完整的 Vue 项目结构：

npm install -g @vue/cli  # 全局安装
vue create my-project   # 创建项目

在交互式命令行中，可以选择：

• Vue 2 或 Vue 3
• 是否集成 Vue Router、Vuex
• 是否使用 TypeScript、Sass/Less
• 是否启用 ESLint、单元测试（Jest/Cypress）

2. 插件系统

Vue CLI 支持通过插件扩展功能，例如：

vue add router     # 添加 Vue Router
vue add vuex       # 添加 Vuex 状态管理
vue add typescript # 添加 TypeScript 支持

3. 图形化管理界面（GUI）

运行 vue ui 可打开可视化项目管理界面，功能包括：

• 查看项目依赖
• 运行/调试脚本
• 安装插件
• 配置 Webpack 和 ESLint

[图片上传失败...(ima ui-new-project.png

ge-36e47f-1744615648622)]

4. 环境变量与构建模式

Vue CLI 支持不同环境变量（.env 文件）：

# .env.development
VUE_APP_API_URL=http://localhost:3000

然后在代码中通过 process.env.VUE_APP_API_URL 访问。

构建命令：

npm run serve   # 开发模式（热更新）
npm run build   # 生产模式（优化代码）
npm run test    # 运行测试

---

Vue CLI vs Vite

特性	Vue CLI (Webpack)	Vite
构建工具	Webpack	原生 ES Modules
启动速度	较慢（打包所有文件）	极快（按需编译）
配置复杂度	较高（需熟悉 Webpack）	极简
适用场景	传统浏览器兼容需求	现代浏览器项目

Vite 更适合新项目，而 Vue CLI 仍然适用于：

• 需要 Webpack 高级配置（如自定义 Loader/Plugin）
• 需要兼容 IE11 等旧浏览器
• 维护已有的 Vue CLI 项目

---

总结

Vue CLI 是 Vue 生态中经典的脚手架工具，适合：
🚀 快速搭建企业级 Vue 项目
🔧 需要灵活 Webpack 配置的场景
📦 维护旧版 Vue 2 项目

如果你是新手，可以从 Vue CLI 开始学习，后续再迁移到 Vite。而对于新项目，建议直接使用 Vite + create-vue（Vue 官方推荐）。