前言如果你是Vue开发者最近创建新项目时一定注意到了这个变化官方文档不再推荐使用vue create而是大力推行npm create vuelatest。这背后发生了什么Vue CLI和create-vue到底有什么区别新项目该用哪个本文将带你全面了解这两个官方脚手架工具并通过详细的步骤演示帮你快速上手。一、Vue CLI曾经的王者1.1 什么是Vue CLIVue CLICommand 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-vuecreate-vue是Vue官方推出的新一代脚手架工具专门用于快速创建基于Vite的Vue项目。它本身只是一个轻量级的脚手架工具——负责询问你需要的功能特性然后生成对应的项目模板剩下的构建工作全部交给Vite。2.2 为什么推荐create-vuecreate-vue的核心优势在于底层构建工具从Webpack切换到了Vite极快的启动速度Vite基于原生ES模块无需打包即可启动开发服务器按需编译极速的热更新基于ES模块的HMR修改代码后几乎瞬时生效更简洁的配置Vite预设了优化配置开箱即用原生支持Vue 3新特性不会像Vue CLI那样被新特性“抛弃”2.3 兼容性说明create-vue默认创建Vue 3项目但也支持创建Vue 2项目通过legacy标签# Vue 3项目npmcreate vuelatest# Vue 2项目如需支持IE11npmcreate vuelegacy三、create-vue vs Vue CLI全方位对比对比维度create-vueVue CLI官方状态✅ 当前官方推荐⚠️ 维护模式底层构建工具ViteWebpack启动速度极快按需编译较慢全量打包热更新速度极快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.0node-v# 应输出 v18.0.0 或更高版本4.2 创建项目在终端中执行以下命令npmcreate vuelatest⚠️ 重要提示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 安装依赖并启动# 进入项目目录cdmy-vue-app# 安装依赖npminstall# 启动开发服务器npmrun 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 # 入口HTMLVite直接处理 ├── 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 CLInpminstall-gvue/cli安装完成后验证是否成功vue--version# 输出类似 vue/cli 5.0.85.3 创建项目vue create my-vue-app如果你在Windows上通过Git Bash使用此命令可能需要winpty vue.cmd create my-vue-app5.4 选择配置你会被提示选择一个预设preset? Please pick a preset: (Use arrow keys) Default ([Vue 3] babel, eslint) Default ([Vue 2] babel, eslint) Manually select featuresDefault预设快速创建原型包含Babel ESLintManually 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 Testing5.5 安装依赖并启动cdmy-vue-appnpmrun serve项目启动后访问http://localhost:8080查看应用。5.6 图形化界面可选Vue CLI还提供了一个图形化界面来创建和管理项目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仍然稳定可用只是不再拥抱未来。技术选型没有绝对的对错只有是否适合当下的场景。希望这篇文章能帮你做出明智的选择。
Vue项目脚手架之争：create-vue与Vue CLI全面对比
前言如果你是Vue开发者最近创建新项目时一定注意到了这个变化官方文档不再推荐使用vue create而是大力推行npm create vuelatest。这背后发生了什么Vue CLI和create-vue到底有什么区别新项目该用哪个本文将带你全面了解这两个官方脚手架工具并通过详细的步骤演示帮你快速上手。一、Vue CLI曾经的王者1.1 什么是Vue CLIVue CLICommand 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-vuecreate-vue是Vue官方推出的新一代脚手架工具专门用于快速创建基于Vite的Vue项目。它本身只是一个轻量级的脚手架工具——负责询问你需要的功能特性然后生成对应的项目模板剩下的构建工作全部交给Vite。2.2 为什么推荐create-vuecreate-vue的核心优势在于底层构建工具从Webpack切换到了Vite极快的启动速度Vite基于原生ES模块无需打包即可启动开发服务器按需编译极速的热更新基于ES模块的HMR修改代码后几乎瞬时生效更简洁的配置Vite预设了优化配置开箱即用原生支持Vue 3新特性不会像Vue CLI那样被新特性“抛弃”2.3 兼容性说明create-vue默认创建Vue 3项目但也支持创建Vue 2项目通过legacy标签# Vue 3项目npmcreate vuelatest# Vue 2项目如需支持IE11npmcreate vuelegacy三、create-vue vs Vue CLI全方位对比对比维度create-vueVue CLI官方状态✅ 当前官方推荐⚠️ 维护模式底层构建工具ViteWebpack启动速度极快按需编译较慢全量打包热更新速度极快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.0node-v# 应输出 v18.0.0 或更高版本4.2 创建项目在终端中执行以下命令npmcreate vuelatest⚠️ 重要提示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 安装依赖并启动# 进入项目目录cdmy-vue-app# 安装依赖npminstall# 启动开发服务器npmrun 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 # 入口HTMLVite直接处理 ├── 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 CLInpminstall-gvue/cli安装完成后验证是否成功vue--version# 输出类似 vue/cli 5.0.85.3 创建项目vue create my-vue-app如果你在Windows上通过Git Bash使用此命令可能需要winpty vue.cmd create my-vue-app5.4 选择配置你会被提示选择一个预设preset? Please pick a preset: (Use arrow keys) Default ([Vue 3] babel, eslint) Default ([Vue 2] babel, eslint) Manually select featuresDefault预设快速创建原型包含Babel ESLintManually 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 Testing5.5 安装依赖并启动cdmy-vue-appnpmrun serve项目启动后访问http://localhost:8080查看应用。5.6 图形化界面可选Vue CLI还提供了一个图形化界面来创建和管理项目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仍然稳定可用只是不再拥抱未来。技术选型没有绝对的对错只有是否适合当下的场景。希望这篇文章能帮你做出明智的选择。
