Vue项目脚手架之争：create-vue与Vue CLI全面对比

前言

如果你是Vue开发者，最近创建新项目时一定注意到了这个变化：官方文档不再推荐使用vue create，而是大力推行npm create vue@latest。这背后发生了什么？Vue CLI和create-vue到底有什么区别？新项目该用哪个？

本文将带你全面了解这两个官方脚手架工具，并通过详细的步骤演示，帮你快速上手。

一、Vue CLI：曾经的王者

1.1 什么是Vue CLI？

Vue CLI（Command Line Interface）是Vue官方提供的标准脚手架工具，诞生于Vue 2时代。它是一个完整的开发系统 ，提供了交互式的项目脚手架、运行时依赖（@vue/cli-service）、丰富的官方插件生态，甚至还有一个图形化管理界面。

简单来说，Vue CLI不仅仅是一个"创建项目的命令"，而是一整套工具链：

@vue/cli ：全局安装的命令行工具，提供vue create命令
@vue/cli-service：项目本地的运行时依赖，基于Webpack构建
官方插件体系 ：以@vue/cli-plugin-开头的插件，集成Babel、ESLint、TypeScript等

1.2 Vue CLI的现状

⚠️ 重要提示：Vue CLI现已进入维护模式（Maintenance Mode）！

官方文档明确声明：

Vue CLI 现已处于维护模式！现在官方推荐使用 create-vue 来创建基于 Vite 的新项目。

这意味着Vue CLI不再积极开发新功能，只会修复关键的安全漏洞和重大Bug。对于Vue 3.4+的新特性（如defineModel自动推导等），Vue CLI已经无法支持。

但这不意味着Vue CLI完全没用了------对于维护中的Vue 2旧项目，或者需要兼容IE11等老旧浏览器的项目，Vue CLI仍然是最稳定、最成熟的选择。

二、create-vue：新时代的官方推荐

2.1 什么是create-vue？

create-vue是Vue官方推出的新一代脚手架工具，专门用于快速创建基于Vite 的Vue项目。它本身只是一个轻量级的脚手架工具------负责询问你需要的功能特性，然后生成对应的项目模板，剩下的构建工作全部交给Vite。

2.2 为什么推荐create-vue？

create-vue的核心优势在于底层构建工具从Webpack切换到了Vite：

极快的启动速度：Vite基于原生ES模块，无需打包即可启动开发服务器，按需编译
极速的热更新：基于ES模块的HMR，修改代码后几乎瞬时生效
更简洁的配置：Vite预设了优化配置，开箱即用
原生支持Vue 3新特性：不会像Vue CLI那样被新特性"抛弃"

2.3 兼容性说明

create-vue默认创建Vue 3项目，但也支持创建Vue 2项目（通过@legacy标签）：

bash 复制代码

# Vue 3项目
npm create vue@latest

# Vue 2项目（如需支持IE11）
npm create vue@legacy

三、create-vue vs Vue CLI：全方位对比

对比维度	create-vue	Vue CLI
官方状态	✅ 当前官方推荐	⚠️ 维护模式
底层构建工具	Vite	Webpack
启动速度	极快（按需编译）	较慢（全量打包）
热更新速度	极快（ES Module HMR）	较慢（重新构建）
配置复杂度	简单（Vite预设优化）	相对复杂
插件生态	Vite插件生态（兼容Rollup）	成熟丰富的Webpack生态
Vue 3.4+支持	✅ 完全支持	❌ 不支持新特性
图形化界面	❌ 无	✅ `vue ui`
适用场景	新项目、现代浏览器	旧项目维护、Vue 2、IE11兼容
项目标识	`package.json`中使用`vite`命令	`package.json`中使用`vue-cli-service`

四、使用create-vue创建项目的详细步骤

4.1 环境准备

确保你的Node.js版本 ≥ 18.0.0：

bash 复制代码

node -v
# 应输出 v18.0.0 或更高版本

4.2 创建项目

在终端中执行以下命令：

bash 复制代码

npm create vue@latest

⚠️ 重要提示 ：@latest标签不能省略，否则npm可能会解析到缓存的过时版本。

4.3 交互式配置

命令执行后，create-vue会以交互式问答的方式引导你选择项目特性：

复制代码

✔ Project name: ... my-vue-app
✔ Add TypeScript? ... No / Yes
✔ Add JSX Support? ... No / Yes
✔ Add Vue Router for Single Page Application development? ... No / Yes
✔ Add Pinia for state management? ... No / Yes
✔ Add Vitest for Unit Testing? ... No / Yes
✔ Add an End-to-End Testing Solution? › No / Cypress / Playwright
✔ Add ESLint for code quality? ... No / Yes
✔ Add Prettier for code formatting? ... No / Yes

你可以根据项目需求自由选择。对于新手，建议至少选择：

Vue Router：页面路由必备
Pinia：状态管理（Vuex的官方替代）
ESLint + Prettier：保证代码质量

4.4 安装依赖并启动

bash 复制代码

# 进入项目目录
cd my-vue-app

# 安装依赖
npm install

# 启动开发服务器
npm run dev

开发服务器启动后，访问 http://localhost:3000 即可看到你的Vue应用。

4.5 项目结构一览

create-vue生成的项目结构如下：

复制代码

my-vue-app/
├── node_modules/
├── public/          # 静态资源（不经过构建）
├── src/
│   ├── assets/      # 资源文件（会被构建处理）
│   ├── components/  # Vue组件
│   ├── App.vue      # 根组件
│   └── main.js      # 入口文件
├── .gitignore
├── index.html       # 入口HTML（Vite直接处理）
├── package.json
├── vite.config.js   # Vite配置文件
└── README.md

注意观察package.json中的scripts命令------使用的是vite而不是vue-cli-service。

五、使用Vue CLI创建项目的详细步骤

5.1 环境准备

Vue CLI 4.x需要Node.js v8.9或更高版本（推荐v10以上）。

5.2 全局安装Vue CLI

bash 复制代码

npm install -g @vue/cli

安装完成后，验证是否成功：

bash 复制代码

vue --version
# 输出类似 @vue/cli 5.0.8

5.3 创建项目

bash 复制代码

vue create my-vue-app

如果你在Windows上通过Git Bash使用此命令，可能需要：

bash 复制代码

winpty vue.cmd create my-vue-app

5.4 选择配置

你会被提示选择一个预设（preset）：

复制代码

? Please pick a preset: (Use arrow keys)
  > Default ([Vue 3] babel, eslint)
    Default ([Vue 2] babel, eslint)
    Manually select features

Default预设：快速创建原型，包含Babel + ESLint
Manually select features：手动选择需要的特性，适合生产项目

如果选择手动模式，会出现如下特性列表：

复制代码

? Check the features needed for your project:
  > Babel
    TypeScript
    Progressive Web App (PWA) Support
    Router
    Vuex
    CSS Pre-processors
    Linter / Formatter
    Unit Testing
    E2E Testing

5.5 安装依赖并启动

bash 复制代码

cd my-vue-app
npm run serve

项目启动后，访问 http://localhost:8080 查看应用。

5.6 图形化界面（可选）

Vue CLI还提供了一个图形化界面来创建和管理项目：

bash 复制代码

vue ui

上述命令会打开一个浏览器窗口，以图形化界面引导你完成项目创建。

5.7 项目结构一览

Vue CLI生成的项目结构：

复制代码

my-vue-app/
├── node_modules/
├── public/
│   ├── favicon.ico
│   └── index.html      # 主页面（Webpack处理）
├── src/
│   ├── assets/         # 静态资源
│   ├── components/     # Vue组件
│   ├── App.vue
│   └── main.js         # 入口文件
├── .gitignore
├── babel.config.js     # Babel配置
├── package.json
├── vue.config.js       # Vue CLI配置文件（可选）
└── README.md

注意package.json中的scripts使用的是vue-cli-service。

六、如何选择？

选择 create-vue 的场景：

✅ 全新Vue 3项目 ------毫无疑问的首选

✅ 追求极致的开发体验 ------Vite的启动和热更新速度无可比拟

✅ 希望配置简洁 ------Vite预设了最佳实践

✅ 使用现代浏览器------无需兼容IE11等老旧浏览器

选择 Vue CLI 的场景：

✅ 维护现有的Vue 2项目 ------最稳定、最成熟的选择

✅ 需要兼容IE11 ------Vue CLI的Webpack构建链支持更完善

✅ 依赖特定的Webpack插件 ------某些生态插件尚未迁移到Vite

✅ 习惯图形化界面管理 ------vue ui提供了独特的可视化体验

七、写在最后

从Vue CLI到create-vue，背后是前端构建工具从Webpack到Vite的范式转移。Vite带来的开发体验提升是革命性的------启动速度从"等几秒"变成"瞬间完成"，热更新从"刷新页面"变成"实时反馈"。

对于新项目，毫不犹豫地选择create-vue。对于旧项目，也不必急于迁移------Vue CLI仍然稳定可用，只是不再拥抱未来。

技术选型没有绝对的对错，只有是否适合当下的场景。希望这篇文章能帮你做出明智的选择。