1.vue3 + vite搭建項目方法
（需要提前裝node,js）
1. 使用官方 create-vite 工具（推薦）
1.使用npm-----------------------------
npm create vue@latest
2.使用pnpm-----------------------------
pnpm create vue@latest
3.使用yarn-----------------------------
#For Yarn (v1+)
yarn create vue#For Yarn Modern (v2+)
yarn create vue@latest#For Yarn ^v4.11
yarn dlx create-vue@latest
4.使用bun-----------------------------
bun create vue@latest
這一指令將會安裝并執行 create-vue，它是 Vue 官方的項目腳手架工具。你將會看到一些諸如 TypeScript 和測試支持之類的可選功能提示：
cd my-vue-app
npm install
npm run dev
訪問地址：http://localhost:5173/，頁面運行結果
2. 使用 Vue CLI（需安裝 @vitejs 插件）
雖然 Vue CLI 默認使用 webpack，但可以通過插件支持 Vite：
npm install -g @vue/cli
vue create my-project
# 創建后手動添加 vite 支持
vue add vite
cd my-project
npm run serve
需要手動選擇vue2、vue3
Vue3 + Webpack搭建項目方法
方法 1：使用 Vue CLI（官方推薦）
# 1. 安裝 Vue CLI（如果尚未安裝）
npm install -g @vue/cli
# 或
yarn global add @vue/cli# 2. 創建項目
vue create my-vue3-webpack-app# 3. 在交互式菜單中選擇 Vue 3
# 使用方向鍵選擇 "Manually select features"
# 確保選中 "Vue Version" 并選擇 3.x
# 其他選項按需選擇# 4. 進入項目目錄
cd my-vue3-webpack-app# 5. 啟動開發服務器
npm run serve
方法 2：手動配置 Webpack
1.初始化項目：
mkdir my-vue3-webpack-app
cd my-vue3-webpack-app
npm init -y
2.安裝必要依賴：
npm install vue@next
npm install webpack webpack-cli webpack-dev-server vue-loader @vue/compiler-sfc css-loader style-loader html-webpack-plugin -D
3.配置 webpack.config.js：
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {mode: 'development',entry: './src/main.js',module: {rules: [{test: /\.vue$/,loader: 'vue-loader'},{test: /\.css$/,use: ['style-loader', 'css-loader']}]},plugins: [new VueLoaderPlugin(),new HtmlWebpackPlugin({template: './src/index.html' // 或使用內置模板})]
}
4.添加 package.json 腳本：
{"scripts": {"serve": "webpack serve","build": "webpack --mode production"}
}
與 Vite 的主要區別
啟動速度：Webpack 冷啟動比 Vite 慢
配置復雜度：Webpack 配置通常更復雜
熱更新：Vite 的 HMR 更快
生態系統：Webpack 有更豐富的插件生態
何時選擇 Webpack 而非 Vite
項目需要特定的 Webpack 插件
現有 Webpack 項目遷移到 Vue 3
需要微調復雜的構建流程
團隊對 Webpack 有豐富經驗
))
