vue create 项目名
和 npm init vue@latest
是 Vue 生态中两个不同时代的项目创建工具,核心差异源于底层构建工具和设计理念的不同,具体区别如下:
1. 本质区别:底层构建工具与设计理念
-
vue create 项目名
基于 Vue CLI (Vue 命令行工具),是 Vue 2 时代的官方脚手架,底层依赖 Webpack 作为构建工具。
设计理念是「打包优先」:开发时会将代码预先打包成浏览器可识别的格式,启动速度较慢,但对传统项目兼容性好。
-
npm init vue@latest
基于 create-vue (Vue 3 官方推荐的脚手架),底层依赖 Vite 作为构建工具。
设计理念是「原生 ES 模块优先」:开发时不预先打包,直接利用浏览器原生 ES 模块解析代码,启动速度极快,是 Vue 3 时代的主流选择。
2. 项目创建命令与前置条件
特性 | vue create 项目名 (Vue CLI) |
npm init vue@latest (create-vue) |
---|---|---|
前置依赖 | 需要全局安装 Vue CLI: npm install -g @vue/cli |
无需全局安装,直接通过 npm init 调用(依赖 npm 7+) |
创建命令 | vue create 项目名 |
npm init vue@latest 项目名 (可省略项目名,交互式输入) |
交互式配置 | 支持(通过命令行选择预设:babel、TypeScript、路由等) | 更友好的交互式配置(支持选择 TypeScript、JSX、测试工具等) |
3. 项目运行与打包命令
由于底层构建工具不同,核心脚本命令存在差异:
操作 | vue create 创建的项目(Webpack) |
npm init vue@latest 创建的项目(Vite) |
---|---|---|
启动开发服务器 | npm run serve |
npm run dev |
打包生产环境代码 | npm run build |
npm run build (命令相同,但底层逻辑不同) |
检查代码格式 | npm run lint (需配置 ESLint) |
npm run lint (默认集成 ESLint) |
4. 项目结构与配置文件
-
vue create
项目结构(Webpack 风格)包含 Webpack 相关的隐藏配置,显式配置文件为
vue.config.js
(用于覆盖 Webpack 配置):plaintext
项目名/ ├── node_modules/ ├── public/ # 静态资源(直接复制到输出目录) ├── src/ # 源代码 ├── .eslintrc.js # ESLint 配置 ├── babel.config.js # Babel 配置(转译 ES6+) ├── package.json └── vue.config.js # Vue CLI 配置(覆盖 Webpack 选项)
-
npm init vue@latest
项目结构(Vite 风格)基于 Vite,配置文件为
vite.config.js
(更简洁,直接配置 Vite 选项):plaintext
项目名/ ├── node_modules/ ├── public/ # 静态资源(与 Vue CLI 类似) ├── src/ # 源代码 ├── .eslintrc.js # ESLint 配置 ├── package.json └── vite.config.js # Vite 配置(替代 Webpack 配置)
5. 插件引入与配置方式
引入 Vue 生态插件(如 Element Plus、Pinia)
-
vue create
(Vue CLI)通过
vue.config.js
配置,或直接在入口文件(main.js
)中导入注册:javascript
// main.js import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import { createApp } from 'vue' import App from './App.vue' createApp(App).use(ElementPlus).mount('#app')
-
npm init vue@latest
(Vite)方式与 Vue CLI 类似(入口文件导入注册),但如果是 Vite 专用插件(如
unplugin-auto-import
),需在vite.config.js
中配置:javascript
// vite.config.js import { defineConfig } from 'vite' import AutoImport from 'unplugin-auto-import/vite' export default defineConfig({ plugins: [ AutoImport({ /* 配置 */ }) // 直接在 plugins 数组中添加 ] })
引入构建工具插件(Webpack 插件 vs Vite 插件)
-
vue create
(Webpack 插件)需要通过
vue.config.js
的configureWebpack
或chainWebpack
配置 Webpack 插件:javascript
// vue.config.js module.exports = { configureWebpack: { plugins: [new SomeWebpackPlugin()] // 引入 Webpack 插件 } }
-
npm init vue@latest
(Vite 插件)Vite 不基于 Webpack,因此需使用 Vite 生态的插件,直接在
vite.config.js
的plugins
数组中配置:javascript
// vite.config.js import { defineConfig } from 'vite' import SomeVitePlugin from 'some-vite-plugin' export default defineConfig({ plugins: [SomeVitePlugin()] // 引入 Vite 插件 })
6. 导入导出语法
两者在 ES 模块语法 上完全一致(均支持 import
/export
),因为现代 Vue 项目均基于 ES 模块规范:
javascript
// 导出
export const foo = 'bar'
export default { /* ... */ }
// 导入
import { foo } from './module'
import MyComponent from './MyComponent.vue'
差异仅在于 TypeScript 支持 :create-vue
默认更推荐 TypeScript(交互式配置中优先选项),而 Vue CLI 需要手动选择 TypeScript 选项。
总结:如何选择?
- 若需兼容 Vue 2 或依赖 Webpack 特定插件,使用
vue create
(Vue CLI)。 - 若开发 Vue 3 项目,追求更快的开发体验(热更新、启动速度),优先使用
npm init vue@latest
(create-vue + Vite),这也是 Vue 官方当前推荐的方式。