一、什么是Vue打包工具(構(gòu)建工具)

在學(xué)習(xí)之前請確保你已經(jīng)安裝了node.js,且你的node.js版本在20以上。

比如我們的代碼有ES6高級語法，TS語法，Less語法，Sass語法。這些直接在瀏覽器中跑，瀏覽器不認(rèn)識。我們的以前的解決辦法就是通過插件(Less)或者包(TS)把這些語法轉(zhuǎn)為JS語法解決瀏覽器不認(rèn)識這些語法的問題。

比如：我們的使用TS,Less一起開發(fā)開發(fā)，Less通過Easy Less插件生成對應(yīng)css樣式，Ts通過安裝ts-node包執(zhí)行tsc --init 指令會生成對應(yīng)js語法，然后我們需要把生成的js文件和css文件整和到html中進行使用。這太麻煩有沒有一種方式我們只需要下載對應(yīng)的包，然后直接幫我們生成html+Css+JS的工具呢。

答案當(dāng)然是有的：Vue打包工具(Webpack,Vite)。

二、Webpack和vue-cli

一般Vue2項目常用Webpack作為打包工具,vue-cli作為其腳手架。成熟穩(wěn)定，適合復(fù)雜場景，兼容Vue3

下面使用vue-cli創(chuàng)建Webpack項目

2.1 全局安裝腳手架

使用npm安裝

# 不加版本號時默認(rèn)會安裝最新穩(wěn)定版本
??npm install -g @vue/cli

# 安裝 Vue CLI 3.x 及以上版本
npm install -g @vue/cli@5.0.8  # 示例

# 安裝 Vue CLI 2.x 版本（如 2.9.6）
npm install -g vue-cli@2.9.6    # 注意包名區(qū)別

卸載

npm uninstall -g @vue/cli  # 卸載 Vue CLI 3.x+  
npm uninstall -g vue-cli   # 卸載 Vue CLI 2.x（舊版） [3,6](@ref)

查看vue-cli腳手架版本

vue --version
# 輸出結(jié)果：@vue/cli 5.0.8

注意 不同版本的腳手架創(chuàng)建的項目目錄可能不一樣。可指定vue-cli腳手架版本之后，再去創(chuàng)建。

2.2 創(chuàng)建項目

2.2.1 指定目錄創(chuàng)建項目

基于 vue-cli 快速生成工程化的 Vue 項目：vue create 項目的名稱

注意：我是基礎(chǔ)vue-cli腳手架為5.0.8創(chuàng)建的,你最好也是安裝5.0.8 否則和我的安裝步驟可能不一樣。

• 第一步，打開你要創(chuàng)建的目錄，比如打開day3_code文件夾
• 第二步，在文件上方搜索欄輸入cmd 回車

2.2.2 選擇自定安裝

• 第三步 選擇要安裝哪些東西。

vue create demo-first 
// 使用上下箭頭改變下面三個選項  回車表示選中
Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
  Default ([Vue 3] babel, eslint)  //這個是安裝Vue 3
  Default ([Vue 2] babel, eslint)  //這個是安裝Vue 2
> Manually select features         //這個是手動選擇你要安裝那個功能，一般選這個

2.2.3 選擇你要安裝的功能

上下箭頭代表移動，空格代表選中，回車代表繼續(xù)。

這里選中Babel 和CSS Pre-processors就行。

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
>(*) Babel   //這是解決js兼容性，必須安裝                
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support  // 漸進式的web
 ( ) Router
 ( ) Vuex
 (*) CSS Pre-processors  //CSS預(yù)處理器  按下空格鍵前面小括號有個星號代表選中安裝
 ( ) Linter / Formatter  // 先不選 這個是約束團隊寫代碼的風(fēng)格。如果不是規(guī)定風(fēng)格就會報錯
 ( ) Unit Testing
 ( ) E2E Testing

選項功能詳解??

Babel??

• ??作用??：將 ES6+ 語法轉(zhuǎn)換為瀏覽器兼容的 ES5 代碼，支持現(xiàn)代 JavaScript 特性（如箭頭函數(shù)、解構(gòu)賦值）。
• ??適用場景??：需兼容舊瀏覽器（如 IE11）或使用實驗性 JS 語法時必選。
• ??默認(rèn)啟用??：Vue CLI 預(yù)設(shè)模板已勾選。

??TypeScript??

• ??作用??：集成 TypeScript 支持，提供靜態(tài)類型檢查和增強代碼可維護性。
• ??啟用后配置??：需選擇是否使用類風(fēng)格組件語法、是否與 Babel 共存（推薦共存以支持 JSX 轉(zhuǎn)譯）。
• ??適用場景??：中大型項目或團隊協(xié)作開發(fā)。

??Progressive Web App (PWA) Support??

• ??作用??：添加離線緩存、推送通知等 PWA 特性，提升 Web 應(yīng)用原生體驗。
• ??啟用后配置??：自動生成 service-worker.js和 Web App Manifest 文件。
• ??適用場景??：需離線訪問或安裝到用戶設(shè)備的應(yīng)用（如移動端網(wǎng)頁）。

??Router??

• ??作用??：集成 Vue Router 庫，實現(xiàn)單頁應(yīng)用（SPA）的路由管理。
• ??啟用后配置??：選擇是否使用 History 模式（需服務(wù)器支持，否則默認(rèn) Hash 模式）。
• ??適用場景??：多頁面跳轉(zhuǎn)或需動態(tài)路由的項目。

Vuex??

• ??作用??：集成 Vuex 狀態(tài)管理庫，實現(xiàn)跨組件數(shù)據(jù)共享與響應(yīng)式更新。
• ??適用場景??：復(fù)雜狀態(tài)交互（如用戶登錄狀態(tài)全局管理）。

??CSS Pre-processors??

• ??作用??：支持 Sass/SCSS、Less 或 Stylus 等 CSS 預(yù)處理器，增強樣式編寫效率。
• ??啟用后配置??：選擇具體預(yù)處理器（推薦 Sass/SCSS with dart-sass）。
• ??適用場景??：需嵌套語法、變量或 Mixin 等高級樣式功能。

??Linter / Formatter??

• ??作用??：集成代碼規(guī)范工具（默認(rèn) ESLint），強制統(tǒng)一代碼風(fēng)格并自動格式化。
• ??啟用后配置??：
• 選擇校驗規(guī)則（如 ESLint + Prettier兼顧錯誤檢查與自動格式化）。
• 選擇觸發(fā)時機（Lint on save保存時檢查 / Lint and fix on commit提交時修復(fù)）。
• ??適用場景??：團隊協(xié)作或需代碼質(zhì)量管控的項目（??強烈建議啟用??）。

??Unit Testing??

• ??作用??：集成單元測試框架（默認(rèn) Jest 或 Mocha），驗證組件/函數(shù)邏輯正確性。
• ??啟用后配置??：選擇測試框架（Vue CLI 推薦 Jest）。
• ??適用場景??：需高可靠性的核心功能模塊。

??E2E Testing??

• ??作用??：集成端到端測試工具（如 Cypress），模擬用戶操作驗證完整業(yè)務(wù)流程。
• ??適用場景??：關(guān)鍵路徑測試（如用戶注冊、支付流程）。

2.2.4 選擇安裝vue的版本

選擇2.x版本

? Choose a version of Vue.js that you want to start the project with
  3.x
> 2.x

2.2.5 選擇css預(yù)處理器

下面全是css預(yù)處理器，選擇sass即可

Vue CLI v5.0.8
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)
  Less
  Stylus

2.2.6 選擇配置文件的存儲位置

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files # 選這個獨立配置
  In package.json

??In dedicated config files（獨立的配置文件）??

??含義??：為每個工具（Babel、ESlint 等）創(chuàng)建單獨的配置文件，例如：

• Babel → babel.config.js或 .babelrc
• ESLint → .eslintrc.js或 .eslintrc.json

??特點??：

• ??清晰分離??：每個工具的配置獨立存放，結(jié)構(gòu)清晰，便于維護。
• ??功能完整??：支持更復(fù)雜的配置（如條件判斷、動態(tài)導(dǎo)入），適合中大型項目。
• ??工具兼容性??：部分工具（如編輯器插件）默認(rèn)優(yōu)先讀取獨立配置文件。

??In package.json（集成到 package.json）??

??含義??：將配置直接寫入 package.json文件的特定字段中，例如：

• Babel → package.json中的 babel字段
• ESLint → package.json中的 eslintConfig字段

??特點??：

• ??集中管理??：所有配置集中在 package.json，減少文件數(shù)量，適合小型項目。
• ??簡化結(jié)構(gòu)??：避免項目根目錄被大量配置文件占據(jù)，保持簡潔。

2.2.7 是否保存上面選項

如果我們保存就說明下一次還是和上面一樣的選擇就可以直接創(chuàng)建不需要在選擇了。這里選擇N

? Save this as a preset for future projects? (y/N)

可以在C:\Users\86184\.vuerc查看你的預(yù)設(shè)。如果不想要可以刪除這個

2.2.8總結(jié)

2.3 運行??

• 第四步：使用VSCode或者Trae CN打開項目。不同版本Vue-Cli創(chuàng)建的目錄可能不同但是大概都是一樣的。

打開vscode的終端，執(zhí)行一下指令

npm run serve   # 啟動開發(fā)服務(wù)器（基于 webpack-dev-server）

2.4 打包

打包前在 vue.config.js中添加 publicPath: ‘./’，強制資源使用相對路徑：

// vue.config.js
module.exports = {
  publicPath: './' // 關(guān)鍵配置
}

打開終端執(zhí)行一下命令

npm run build   # 生產(chǎn)環(huán)境打包（輸出到 dist/ 目錄）

多了一個dist文件夾，這就是打包之后的東西。

我們雙擊index.html就可以運行了。

三、Vite和create-vue

一般Vue3項目常用Vite作為打包工具,create-vue作為其腳手架。開發(fā)體驗快如閃電，配置更輕量，可兼容Vue2項目

下面使用create-vue創(chuàng)建Vite項目

3.1 一鍵創(chuàng)建項目??（無需全局安裝）

3.1.1 指定目錄創(chuàng)建項目

基于 vue-cli 快速生成工程化的 Vue 項目：vue create 項目的名稱

• 第一步，打開你要創(chuàng)建的目錄，比如打開day3_code文件夾
• 第二步，在文件上方搜索欄輸入cmd 回車

3.1.2執(zhí)行指令

我使用的vite的7.0.6版本。

使用的create-vue腳手架版本是3.18.0。

可以通過指令npm view create-vue versions 查看create-vue腳手架有哪些版本

npm create vue # 等價于npm create vue@latest 顯式指定最新版本
npm create vue@3.8.0 # @3.8.0明確指向的是 create-vue腳手架工具自身的版本

3.1.3 輸入項目名稱

3.1.4選擇功能

*  請選擇要包含的功能： (↑/↓ 切換，空格選擇，a 全選，回車確認(rèn))
|  [ ] TypeScript
|  [ ] JSX 支持
|  [+] Router（單頁面應(yīng)用開發(fā)）
|  [ ] Pinia（狀態(tài)管理）
|  [ ] Vitest（單元測試）
|  [ ] 端到端測試
|  [ ] ESLint（錯誤預(yù)防）
|  [ ] Prettier（代碼格式化）

JSX 支持??

• ??作用??：允許在 Vue 組件中使用 JSX 語法（類 React 的 JavaScript 語法擴展）。
• ????適用場景??：??需要高度動態(tài)的模板邏輯（如復(fù)雜條件渲染）。??團隊有 React 開發(fā)背景，習(xí)慣 JSX 風(fēng)格。????注意??：Vue 默認(rèn)推薦模板語法，JSX 需手動配置 Babel 插件。

??TypeScript??

• ????作用??：集成 TypeScript 靜態(tài)類型檢查，提升代碼健壯性。
• ????推薦場景??：??中大型項目、團隊協(xié)作開發(fā)。??需要嚴(yán)格類型約束的公共組件庫。
• ????成本??：需學(xué)習(xí) TS 語法，增加初期配置復(fù)雜度。

Router（單頁面應(yīng)用開發(fā)）??

• ????作用??：集成 Vue Router，實現(xiàn) SPA 路由管理（動態(tài)路由、導(dǎo)航守衛(wèi)等）。
• ????必選場景??：??多頁面應(yīng)用（如后臺管理系統(tǒng)、電商網(wǎng)站）。??需實現(xiàn)頁面跳轉(zhuǎn)、路由懶加載等功能。????替代方案??：若項目僅單頁可跳過（如純展示頁）。

??Pinia（狀態(tài)管理）??

• ????作用??：輕量級狀態(tài)管理庫（替代 Vuex），支持響應(yīng)式數(shù)據(jù)共享。
• ????推薦場景??：??跨組件狀態(tài)共享（如用戶登錄信息、全局主題）。??復(fù)雜數(shù)據(jù)流管理（如購物車、實時數(shù)據(jù)看板）。
• ????注意??：小型項目（無共享狀態(tài)需求）可不選。

??Vitest（單元測試）??

• ????作用??：基于 Vite 的極速單元測試框架（兼容 Jest API）。
• ????推薦場景??：??核心工具函數(shù)/組件邏輯需高覆蓋率驗證。??開源項目或企業(yè)級應(yīng)用。
• ????成本??：需編寫測試用例，增加開發(fā)時間。

??端到端測試??

• ????作用??：集成 Cypress 或 Playwright，模擬用戶操作驗證全流程。
• ????適用場景??：??關(guān)鍵業(yè)務(wù)流程測試（如用戶注冊、支付流程）。??對穩(wěn)定性要求極高的生產(chǎn)系統(tǒng)。
• ??成本??：配置復(fù)雜，適合中后期項目追加。

ESLint（錯誤預(yù)防）??

• ????作用??：代碼質(zhì)量檢查（如變量未使用、隱式類型轉(zhuǎn)換）。
• ????強烈推薦??：所有項目均應(yīng)啟用，避免低級錯誤。
• ????典型規(guī)則??：no-unused-vars, no-console。

??Prettier（代碼格式化）??

• ????作用??：自動格式化代碼（縮進、引號、分號等），統(tǒng)一團隊風(fēng)格。
• ????推薦組合??：??與 ESLint 搭配使用（選 ESLint + Prettier配置）。??避免手動調(diào)整代碼格式?jīng)_突。

3.1.5 選擇試驗

截止到2025年8.11日 尤玉溪團隊剛剛推出他們公司(voidzero)新推出的技術(shù)Oxlint和Rolldown-Vite。

這里可以不選直接回車。

• Oxlint：極速代碼檢查（替代 ESLint）快 50–100 倍
• ??Rolldown-Vite?：極速生產(chǎn)構(gòu)建（替代 Rollup）快 3–16 倍

??3.2 安裝依賴與啟動??

剩下的這些就是上面的vue2的一樣了。

cd my-vite-project
npm install
npm run dev  # 冷啟動 <1 秒（原生 ESM 按需加載）
npm run build  # 生產(chǎn)構(gòu)建（Rollup 優(yōu)化，輸出 dist/）

四、總結(jié)

• Webpack 使用的腳手架是vue-cli 需要全局安裝。
• Vite 使用的腳手架是create-vue 不需要全局安裝。

這兩個工程化開發(fā)首選Vite，因為vite??按需編譯??速度快。

未來趨勢已明顯傾向于 Vite 為核心的 create-vue。

大家想要自己從0-1搭建Webpack，請看我發(fā)的文章：從0-1搭建webpack的前端工程化項目

學(xué)習(xí)了Webpack從0-1的構(gòu)建可以類比Vite

其實這一塊從0-1的構(gòu)建可以學(xué)也可以不學(xué)，只要會用就行。學(xué)完這個有助于你更加深刻的理解底層原理。

現(xiàn)在2024年10月份尤雨溪創(chuàng)建了公司voidZero，這個公司旨在解決前端開發(fā)中的碎片化和配置復(fù)雜以及性能問題。VoidZero的技術(shù)布局是分為底層工具鏈(Oxc_parser、oxLint、OxcFormatter等等)和上層應(yīng)用工具(RollDown打包工具用于替代esbuild)。預(yù)計2025年下半年可以提供給用戶使用。

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論