Vue2和Vue3创建应用对比
Vue2和Vue3全面对比的第一项，也是启动工作的开始就是创建一个应用，此类工作官方都会有模板和脚手架，从官方模版最简单的初始化和项目结构对比更容易了解Vue3的差异。
Vue2主要是通过Vue CLI（包含Webpack打包工具）创建，Vue CLI也可以创建Vue3应用，只是此方式创建的Vue3应用只能用JavaScript；而Vue3官方推荐的方式是Vite（新一代构建工具）。Vue2和Vue3在创建应用方面主要是构建工具的不同，具体比较如下：
|
对比项 |
Vue CLI/Webpack |
Vite |
|
前置安装 |
需全局安装 @vue/cli |
无需全局安装 |
|
创建命令 |
vue create my-app # 或直接指定模板 vue create my-app -p default # 默认配置 vue create my-app -p webpack # 手动选择特性 |
npm create vite@latest my-app # 或指定模板 npm create vite@latest my-app -- --template vue npm create vite@latest my-app -- --template vue-ts |
|
交互式配置 |
有，逐步问答选择 交互式选项： - Vue 版本（2 或 3） - Babel / TypeScript - Router / Vuex / Pinia - CSS 预处理器 - Linter / Formatter - 单元测试 / E2E 测试 |
无，直接指定模板 可选模板： - vue — Vue 3 + JavaScript - vue-ts — Vue 3 + TypeScript - react / react-ts - svelte / svelte-ts - vanilla / vanilla-ts |
|
配置灵活性 |
高，可选 Router/Vuex/Linter/测试 |
低，模板固定，需手动添加 |
|
创建速度 |
慢，需下载模板再初始化 |
快，几秒完成 |
|
默认模板 |
Vue 2 或 Vue 3 均可 |
仅 Vue 3 |
|
默认特性 |
Babel + ESLint 可选 |
TypeScript 可选、无默认 ESLint |
|
Router/Store |
创建时可自动安装 |
需手动安装 |
|
目录结构 |
复杂（含测试/e2e） my-app/ ├── public/ │ └── index.html ← 模板入口 ├── src/ │ ├── assets/ │ ├── components/ │ ├── views/ │ ├── App.vue │ └── main.js ← 打包入口 ├── tests/ ← 可选 ├── babel.config.js ← Babel 配置 ├── vue.config.js ← 构建配置 ├── .eslintrc.js ← ESLint 配置 └── package.json |
精简（仅核心文件） my-app/ ├── index.html ← 直接入口 ├── src/ │ ├── assets/ │ ├── components/ │ ├── App.vue │ └── main.ts ← 被 HTML 引用 ├── vite.config.ts ← 构建配置 ├── tsconfig.json ← TS 配置 ├── package.json └── node_modules/ ← 小，仅必要依赖 |
|
构建入口 |
main.js |
index.html |
|
入口差异 |
-- index.html <!DOCTYPE html> <html lang=""> <head>...</head> <body> <noscript>...</noscript> <div id="app"></div> </body> </html> -- main.js new Vue({ render: h => h(App), }).$mount('#app')
处理流程： 1.public/index.html（模板） 2.webpack + html-webpack-plugin 处理 3.注入打包后的 JS/CSS 4.生成 dist/index.html（最终产物）
Webpack 以 src/main.js 为打包入口，public/index.html 只是模板，构建时被处理并注入资源 |
-- index.html <!doctype html> <html lang="en"> <head>...</head> <body> <div id="app"></div> <script type="module" src="/src/main.ts"></script> </body> </html> -- main.ts createApp(App).mount('#app')
处理流程： 1.index.html（直接入口） 2.浏览器加载 HTML 3.遇到 <script src="/src/main.ts"> 4.vite 按需编译 main.ts 及其依赖
Vite 以 index.html 为直接入口，HTML 里直接引用源码文件，不需要预处理注入 |
|
node_modules |
大（Webpack 全套） |
小（仅 Vite + 插件） |
|
添加 Router /Store/Pinia |
# 创建时自动添加，或后期安装 vue add router vue add vuex # Vue 2 vue add pinia # Vue 3（需手动） |
# 必须手动安装 npm install vue-router@4 npm install pinia |
|
CSS处理 |
预配置 // vue.config.js中css相关 module.exports = { ... } |
内置支持 |
|
TypeScript |
预配置（babel，慢） babel.config.js |
原生支持（esbuild，快10-100倍） |
|
ES Module |
需配置 // vue.config.js module.exports = { ... } |
原生支持 |
|
启动速度 |
慢（打包后启动） |
快（不打包，秒开） |
|
配置文件 |
vue.config.js |
vite.config.ts |
|
生产打包 |
Webpack |
Rollup |
|
启动方式 |
cd my-app # 启动开发 npm run serve #实际执行的内容 // Vue CLI 的 package.json { "scripts": { "serve": "vue-cli-service serve" // 启动 webpack-dev-server } } #说明:先打包再启动，Vue CLI（Vue 2）创建过程自动执行 npm install，node_modules 自动生成，所以可以自动运行 |
cd my-app # 安装依赖 npm install # 启动开发 npm run dev # 实际执行的内容 // Vite 的 package.json { "scripts": { "dev": "vite" // 启动 vite 开发服务器 } } #说明:不打包直接启动，Vite（Vue 3）创建过程不自动安装，仅创建文件骨架，node_modules 不存在，所以运行前必须手动安装npm install |
|
官方状态 |
维护模式 |
官方推荐 |
以上也能直观的感受到Vue3在创建应用和启动上都比Vue2快，以及了解初步了解资源的依赖和加载是提升效率的一个主要原因。