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 官方推荐）。