Vue 脚手架发展

Vue 脚手架是一个基于 Vue.js 进行快速开发的完整系统，Vue 脚手架致力于将 Vue 生态中的工具基础标准化。Vue 的工具链 CLI（通常指 @vue/cli）与 create-vue 是 Vue 生态中两个不同的脚手架工具，它们在功能定位、技术栈和适用场景上有显著区别。

Vue CLI（@vue/cli）

Vue CLI 是官方提供的基于 Webpack 构建的工具链，它适用于创建 Vue2 或 Vue3 项目。目前处于维护模式，官方不再积极更新，仅推荐用于 Vue2 项目或需要 Webpack 特性的场景。但 Webpack 的打包速度较慢，尤其在大型项目中启动和热更新性能较差。

1. 使用场景和特点

需要依赖 Webpack 特定功能（如复杂代码拆分、旧浏览器兼容）的存量项目，或 Vue2 项目维护。

• 提供高度可配置的 Webpack 环境，支持通过插件扩展功能（如 Vue Router、Vuex 等）。
• 依赖 Webpack 生态，插件系统庞大但耦合度高如 @vue/cli-plugin-*）。
• 传统模块化打包，适合复杂企业级应用。
• 大型项目中启动和热更新性能较差。

2. Vue CLI2.x（旧版）

2.1. 安装命令

npm install -g vue-cli@2.x
# OR
yarn add global vue-cli@2.x
# 创建项目
vue init webpack vue2-cli2-project

2.2 特点

• 默认生成 Vue2.x 项目。
• 不支持 Vue3。

3. Vue CLI3.x（新版起点）

3.1. 安装命令

npm install -g @vue/cli@3.x
# OR
yarn add global @vue/cli@3.x
# 创建项目
vue create vue2-cli3-project

3.2. 特点

• 默认生成 Vue2.x 项目。
• 不支持直接创建 Vue3 项目，但可通过插件升级。
• 更名为 @vue/cli，基于 Webpack4 的现代化配置。
• 支持图形界面（vue ui）

4. Vue CLI4.x（主流稳定版）

4.1. 安装命令

npm install -g @vue/cli@4.x
# OR
yarn add global @vue/cli@4.x
# 创建项目
vue create vue2-cli4-project

4.2. 特点

• 默认生成 Vue2.x 项目。
• Vue CLI4.5.0+ 支持创建 Vue3 项目。
• 支持 Webpack5 和更多现代化工具。
• 默认集成 Vue3 选项（4.5.0 之后）。

5. Vue CLI5.x（最新版）

5.1. 安装命令

npm install -g @vue/cli@5.x
# OR
yarn add global @vue/cli@5.x
# 创建项目
vue create vue2-cli5-project

5.2. 特点

• 支持 Vue2.x 和 Vue3.x。
• 创建时可通过选项自由选择版本。
• 默认使用 Webpack 5 和更快的构建工具。
• 优化了插件系统和兼容性。

6. 桥接CLI旧版本

Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

7. Vue CLI安装版本检查

# 查看 Vue CLI 版本
vue --version
# OR
vue -V

create-vue

create-vue 是 Vue3 的官方推荐工具，持续迭代并集成最新生态（如 Vite3.0、Volar 等）。基于 Vite 构建，专为 Vue3 设计（兼容 Vue2）。Vite 利用原生 ES 模块和 Rollup 打包，开发环境下无需打包，启动和热更新速度极快。

1. 安装命令

npm create vue@latest

2. 使用场景和特点

新项目开发，尤其是追求开发效率和现代浏览器特性的 Vue3 应用。

• 基于 ESM 的按需编译，适合现代轻量级应用。
• 开发环境下无需打包，启动和热更新速度极快。
• 极简配置，适合快速启动；默认启用 Tree-shaking 等优化。
• 模板基于 Vite 预设，集成 Rollup 插件生态（如 @vitejs/plugin-vue），默认支持 TypeScript、JSX 等。

Vue 脚手架使用总结

除非有历史遗留需求，否则新项目应优先选择 create-vue。若需兼容旧浏览器或深度定制构建流程，可考虑 Vue CLI。

• 旧项目维护：根据项目使用的 Vue 版本选择对应 CLI（如 Vue2 项目用 CLI4.x）。
• 新项目开发：
  1. Vue2：推荐 @vue/cli@5.x。
  2. Vue3：推荐使用 Vite (npm create vue@latest) 或 CLI5.x。

维度	Vue CLI（@vue/cli）	create-vue
适用项目	Vue 2 或需要 Webpack 的复杂项目	Vue 3 新项目或追求开发效率的现代应用
构建速度	较慢（Webpack 打包）	极快（Vite 按需编译）
配置复杂度	高（暴露 Webpack 配置）	低（隐藏配置，按需扩展）
官方支持	维护中，不推荐新项目使用	主力推荐，持续更新