Vue CLI 脚手架使用与适用场景

Vue CLI 是 Vue 2 时代官方主推的项目脚手架工具，底层基于 Webpack 构建。它提供了一套交互式的命令行工具，能快速生成带有完整工程配置的 Vue 项目，让开发者跳过繁琐的 Webpack 配置环节，直接进入业务开发。

使用方式

1. 全局安装

npm install -g @vue/cli

2. 创建项目

vue create my-project

执行后，CLI 会弹出交互式选择界面，让你选择预设：

• Default（默认预设）：包含 Babel、ESLint，适合快速启动的小项目。
• Manually select features（手动选择）：可以按需勾选 Router、Vuex、CSS Pre-processors、TypeScript、PWA、Unit Testing 等特性。

选择完成后，CLI 会自动下载依赖、生成目录结构，并在本地启动开发服务器。

3. 项目结构
典型的 Vue CLI 项目目录如下：

my-project/
├── public/          # 静态资源，不经过 webpack 处理
├── src/
│   ├── components/  # 组件
│   ├── views/       # 页面
│   ├── App.vue
│   └── main.js
├── package.json
├── vue.config.js    # 可选的 webpack 自定义配置
└── ...

4. 自定义配置
根目录下的 vue.config.js 允许你覆盖 Webpack 的默认配置，例如调整代理、修改输出目录等，无需直接修改 node_modules 中的配置。

适用场景

随着 Vite 成为 Vue 3 官方推荐方案，Vue CLI 已标记为维护模式（不再添加新功能，仅修复严重 bug）。但在以下场景中，它仍然是务实的选择：

• Vue 2 老项目维护

Vue CLI 是 Vue 2 生态的标准脚手架，大量线上项目基于它搭建。对这些项目进行迭代时，继续沿用 Vue CLI 可以避免迁移成本，保持构建环境的稳定。

• 必须依赖 Webpack 特有生态

某些场景下 Webpack 的 loader 或 plugin 无法被 Vite 完全替代，例如：

• 自定义复杂的代码拆分策略
• 使用了仅支持 Webpack 的老旧库（如部分内部私有的 Webpack 插件）
• 项目深度依赖 require.context 等 Webpack 特有功能

• 团队对 Webpack 配置有积累

如果团队长期使用 Webpack，沉淀了大量 vue.config.js 配置和自定义构建脚本，切换到 Vite 可能需要重写这些逻辑。在人力紧张或项目周期短的情况下，继续用 Vue CLI 更稳妥。

• 需要与 Vue 2 统一构建环境

某些混合项目中同时存在 Vue 2 和 Vue 3 模块，使用同一个构建工具链（Vue CLI）可以简化维护。

一句话总结：新项目首选 Vite，但如果你面对的是一个活生生的 Vue 2 老项目，或者你的构建需求强依赖 Webpack 生态，Vue CLI 依然是那个“踏实好用”的老伙计，能够稳定、可靠地完成任务。