本篇內(nèi)容介紹了“Vue.js的構(gòu)建工具有哪些區(qū)別”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
為企業(yè)提供做網(wǎng)站、網(wǎng)站制作、網(wǎng)站優(yōu)化、營銷型網(wǎng)站建設(shè)、競價托管、品牌運營等營銷獲客服務(wù)。創(chuàng)新互聯(lián)擁有網(wǎng)絡(luò)營銷運營團(tuán)隊，以豐富的互聯(lián)網(wǎng)營銷經(jīng)驗助力企業(yè)精準(zhǔn)獲客，真正落地解決中小企業(yè)營銷獲客難題，做到“讓獲客更簡單”。自創(chuàng)立至今，成功用技術(shù)實力解決了企業(yè)“網(wǎng)站建設(shè)、網(wǎng)絡(luò)品牌塑造、網(wǎng)絡(luò)營銷”三大難題，同時降低了營銷成本，提高了有效客戶轉(zhuǎn)化率，獲得了眾多企業(yè)客戶的高度認(rèn)可！
1.先決條件
本教程假定讀者具備以下條件：
Node.js 10x 或者更高版本
安裝了Yarn或者NPM
JavaScript的基本知識以及框架如何工作
Vue.js的基礎(chǔ)知識
2.腳手架工具
腳手架工具是建立在一些構(gòu)建工具之上的抽象，最主要的是開發(fā)服務(wù)器/模塊捆綁器，它們消除了配置和使用構(gòu)建工具的麻煩。
腳手架工具可以幫助你動態(tài)地引導(dǎo)你創(chuàng)建新項目，你不必?fù)?dān)心配置問題。
腳手架工具還包括項目的配置選項、為未來項目保存配置預(yù)置的能力，以及升級使用它們構(gòu)建的項目依賴關(guān)系的機(jī)制。
我們將比較的Vue社區(qū)中可用于腳手架應(yīng)用程序和庫的工具是：
Vite
Vue CLI
Poi
Bili
3.什么是Vite？
Vite，最初只是作為Vue單文件組件(SFC)的開發(fā)服務(wù)器，是一個利用原生ES模塊導(dǎo)入的無捆綁JavaScript開發(fā)服務(wù)器。
create-vite-app 是一個用于引導(dǎo)新的Vite項目的模板，使用create-vit-app，你不必安裝Vue包，因為它作為默認(rèn)的啟動器與Vue捆綁在一起，你可以安裝其他應(yīng)用的依賴。create-vite-app還支持其他框架，例如React和Preact。也可以使用 —template 標(biāo)志配置要使用的模板。
重要的是要注意，Vite仍處于試驗階段，正在努力使其適合生產(chǎn)。最好不要在關(guān)鍵項目上使用它，直到它變得穩(wěn)定為止。
Vite還不向后兼容，因此它不支持Vue 2以外的任何其他Vue.js版本。
Vite包含了一個令人難以置信的快速熱模塊替換(HMR)，你的文件變化幾乎會立即反映在瀏覽器中，它也有開箱即用的支持TypeScript，.tsx 和 .jsx 文件，使用esbuild進(jìn)行移植，CSS預(yù)處理器，PostCSS和CSS模塊。
Vite的其他功能包括：
Asset URL處理
支持CSS預(yù)處理器，PostCSS和CSS模塊
支持模式選項和環(huán)境變量
在項目的 base/root 目錄下或當(dāng)前工作目錄下用 vite.config.js 或 vite.config.ts 文件擴(kuò)展默認(rèn)值
支持插件
支持自定義文件轉(zhuǎn)換
你可以在此處閱讀有關(guān)Vite的更多信息。
4.什么是Vue CLI？
Vue CLI是基于Webpack構(gòu)建的用于項目的官方Vue.js腳手架工具，它可以避免開發(fā)人員為項目配置和設(shè)置構(gòu)建過程的麻煩。它提供了一個有組織的代碼結(jié)構(gòu)，并幫助你選擇在應(yīng)用程序中需要的工具，同時它負(fù)責(zé)配置，并讓你專注于編寫為項目提供支持的代碼。
它還具有對Babel，TypeScript，ESLint，PostCSS和CSS預(yù)處理器，漸進(jìn)式Web應(yīng)用程序（PWA），單元測試和端到端測試的現(xiàn)成支持。它還具有基于插件的可擴(kuò)展體系結(jié)構(gòu)，該體系結(jié)構(gòu)允許開發(fā)人員構(gòu)建，共享和使用插件來解決特定問題。
你還可以在項目的腳手架過程中使用Vue Router添加路由，并使用Vuex添加狀態(tài)管理，并且開箱即可使用熱模塊替換（HMR）。其他一些值得注意的功能是：
支持模式和環(huán)境變量
使用 vue.config.js 或 vue.config.ts 配置文件來修改默認(rèn)的webpack配置，從而實現(xiàn)擴(kuò)展性。
適合喜歡使用GUI的開發(fā)人員的圖形用戶界面
5.什么是Poi？
Poi是一個建立在webpack之上的零配置捆綁程序，它的目的是通過使用預(yù)先配置的預(yù)設(shè)，使webpack的開發(fā)和捆綁應(yīng)用盡可能的簡單。Poi與框架無關(guān)，可以與任何JavaScript框架一起使用。 Poi通過減少和處理代碼來優(yōu)化性能并加快應(yīng)用程序的加載速度。
Poi更適合于構(gòu)建Web應(yīng)用程序。
Create Poi App是一種用于交互式創(chuàng)建新Poi項目的腳手架工具。
Poi提供了一個很好的開發(fā)體驗，同時也提供了一個用配置文件擴(kuò)展應(yīng)用的選項。
它還具有一些值得注意的功能，例如：
對JS，CSS，文件資產(chǎn)等的現(xiàn)成支持
Poi與框架無關(guān)
無需配置即可支持JSX，Vue等
使用插件擴(kuò)展功能
6.什么是Bili？
Bili 在其官方文檔中被描述為一個令人愉快的庫捆綁器。
Bili是Poi的Rollup替代品，它是建立在Rollup上的零配置捆綁器，它讓開發(fā)設(shè)置變得輕而易舉，它更適合構(gòu)建庫而不是Web應(yīng)用。
Bili幫助庫作者將庫捆綁成JavaScript多種格式，例如CommonJS，UMD和ES模塊。
注意：Bili沒有CLI交互式shell。
該工具同時提供了命令行和Node.js API，所以開發(fā)者可以選擇最適合他們使用案例的方式，它是面向未來的，因為它是由Babel使用 babel-preset-env 和 babel-preset-typescript 移植的，所以你可以自由地使用現(xiàn)代的JavaScript功能，它的一些功能，正如其文檔中所說的那樣，包括：
快速，默認(rèn)為零配置
在“引擎蓋”下使用Rollup
使用Buble/Babel/TypeScript自動轉(zhuǎn)換JS文件
內(nèi)置對CSS、Sass、Stylus、Less和CSS模塊的支持
使用Rollup插件擴(kuò)展功能
友好的錯誤日志體驗
用TypeScript編寫，自動生成的API文檔
7.安裝及使用
7.1 Vue CLI
開始使用Vue CLI工具，使用以下命令之一安裝CLI工具：
npm install -g @vue/cli # OR yarn global add @vue/cli
全局安裝CLI包后，我們可以在終端中訪問 vue 命令，vue create 命令可以幫助我們創(chuàng)建一個新的項目。
接下來，使用 vue create 命令創(chuàng)建一個新項目：
vue create testing-vue-cli
我用“testing-vue-cli”這個名字作為本教程的項目名，可以用任何你認(rèn)為合適的名字代替。
運行這個命令可以給你一個交互式的腳手架體驗，你可以選擇你的應(yīng)用需要的包，你也可以決定將配置保存為預(yù)設(shè)，以備將來的項目使用。
接下來，將目錄更改為你的項目文件夾：
cd testing-vue-cli
通過運行這些命令之一來服務(wù)你的應(yīng)用程序。
yarn serve # or npm run serve
運行以下命令后，你的應(yīng)用默認(rèn)應(yīng)在 http://localhost:8080上運行：
7.2 Vite
運行以下命令以使用模板創(chuàng)建一個新的Vite應(yīng)用程序：
npx create-vite-app testing-vite # OR yarn create vite-app testing-vite
現(xiàn)在，使用以下命令轉(zhuǎn)到創(chuàng)建的項目目錄：
cd testing-vite
然后繼續(xù)安裝我們的項目正常運行所需的必要軟件包：
npm install # OR yarn
然后，你可以通過運行以下命令在瀏覽器中啟動開發(fā)服務(wù)器：
npm run dev # OR yarn dev
運行dev命令后，應(yīng)該在 http://localhost:3000上獲得與此類似的內(nèi)容：
7.3 創(chuàng)建Poi應(yīng)用程序
要開始使用Poi引導(dǎo)你的項目，請首先安裝創(chuàng)建Poi應(yīng)用程序CLI工具：
yarn global add create-poi-app # OR npm i -g create-poi-app
這個命令使 creat-poi-app 可以在全局范圍內(nèi)使用，現(xiàn)在你可以使用 cpa 命令來創(chuàng)建新項目。
使用以下命令創(chuàng)建一個新項目：
cpa testing-poi
運行此命令將給你一個shell，你可以決定在你的項目中包含哪些工具。
接下來，使用以下命令轉(zhuǎn)到你的項目目錄：
cd testing-poi
繼續(xù)安裝Vue，還要安裝Vue模板編譯器，作為開發(fā)依賴，Vue模板編譯器把模板編譯下來變成渲染函數(shù)。
yarn add vue && yarn add vue-template-compiler --dev
打開位于 src 資源管理器中的 index.js 文件，并添加以下內(nèi)容：
重慶分公司
重慶分公司
import Vue from 'vue' import App from './App.vue' new Vue({ el: "#app", render: h => h( App ) });接下來，在 src 文件夾中創(chuàng)建一個 App.vue 文件，并添加以下內(nèi)容：
