vue-cli的工程模板與構(gòu)建工具詳解
vue-cli提供的腳手架只是一個最基礎(chǔ)的,也可以說是Vue團隊認為的工程結(jié)構(gòu)的一種最佳實踐。對于初學(xué)者或者以前曾從事AngularJS/React開發(fā)的用戶來說,可能對開發(fā)環(huán)境有自已習(xí)慣性用法和熟悉的工具,但我建議用Vue來開發(fā)的話還是先按照官方推薦的來做,待我們掌握了Vue官方推薦的環(huán)境配置后再按照實際情況進行相應(yīng)的調(diào)整,這樣會少走一些彎路,節(jié)省不少時間。
我們下面要討論的工程結(jié)構(gòu)都是圍繞webpack-simple與webpack展開的,browserify也只是在這兩個模板的基礎(chǔ)上移植的一個版本,所以就不過多地贅述。
webpack和webpack-simple這兩個模板從文件結(jié)構(gòu)上看幾乎是一致的,只是一個是簡化版,另一個是完全版。其實不然,webpack-simple是基于Webpack@2.1.0-beta.25進行配置的版本,而webpack模板則是基于Webpack ^1.3.2配置的。這兩個版本暫時是互相不兼容的,而且使用的依賴包的版本也不一樣,所以不要將webpack模板創(chuàng)建的項目文件結(jié)構(gòu)復(fù)制到webpack-simple中進行直接的取代升級,而是需要將node_modules內(nèi)安裝的所有的依賴包刪除,然后重新安裝才有可能遷移成功,這一點是需要注意的。
1.webpack-simple模板
以下為webpack-simple模板構(gòu)建的項目的工程目錄結(jié)構(gòu):
├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ └── main.js └── webpack.config.js
webpack-simple只配置了Babel和Vue的編譯器,其他的一無所有。這個模板值得一提的就是src目錄,所有的Vue代碼源程序都放置在這個目錄中,五個模板構(gòu)建出來的這個src目錄都是一樣的,只是在webpack模板中多了components目錄用于存放公用組件。
2.webpack模板
webpack模板的工程目錄結(jié)構(gòu)如下:
├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── config │ ├── dev.env.js │ ├── index.js │ ├── prod.env.js │ └── test.env.js ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── Hello.vue │ └── main.js ├── static └── test ├── e2e │ ├── custom-assertions │ │ └── elementCount.js │ ├── nightwatch.conf.js │ ├── runner.js │ └── specs │ └── test.js └── unit ├── index.js ├── karma.conf.js └── specs └── Hello.spec.js
這個webpack模板的結(jié)構(gòu)是非常合理的,而且配置的工具也相當(dāng)豐富,當(dāng)投入真正的項目開發(fā)時會覺得模板的實用性很強。
所以我們很有必要花些時間將這個模板的結(jié)構(gòu)以及它所提供的工具配置了解清楚,掌握Vue官方團隊對項目開發(fā)的環(huán)境配置與使用思路,以便于我們能結(jié)合自己的實際情況進行適當(dāng)?shù)呐渲门c調(diào)整。
在上文中我們已經(jīng)提過src目錄的用法與約定,此處就不再贅述。在項目的根目錄下多了4個目錄,它們的作用分別如下:
● build——存放用于編譯用的webpack配置與相關(guān)的輔助工具代碼;
● config——存放三大環(huán)境配置文件,用于設(shè)定環(huán)境變量和必要的路徑信息;
● test——存放E2E測試與單元測試文件以及相關(guān)的配置文件;
● static——存放項目所需要的其他靜態(tài)資源文件;
● dist——存放運行npm run build指令后的生產(chǎn)環(huán)境輸出文件,可直接部署到服務(wù)器對應(yīng)的靜態(tài)資源文件夾內(nèi),該文件夾只有在運行build之后才會生成。
可見,這些目錄的存在是依賴于模板內(nèi)配置的開發(fā)工具的,webpack模板配置以下的工具。
3.構(gòu)建工具
由于開發(fā)、測試與生產(chǎn)三大運行環(huán)境都需要進行構(gòu)建,而且針對不同的環(huán)境要求,它的配置會有一定的區(qū)別,后面的學(xué)習(xí)中我們會對具體的配置進行一些定制與修改,我們應(yīng)該清楚地了解webpack模板是如何進行構(gòu)建的。
● 編譯開發(fā)環(huán)境
在開發(fā)環(huán)境下通過以下指令加載運行Vue項目:
$ npm run dev
這個指令的配置是在package.json的script屬性中設(shè)置的,實質(zhì)上它是由npm來引導(dǎo)執(zhí)行入口程序dev-server.js完成以下的加載過程:
(1) 加載環(huán)境變量
該環(huán)節(jié)從config目錄加載index.js和dev.env.js兩個模塊,準備開發(fā)調(diào)試環(huán)境所必需的一些目錄和全局變量。
(2) 合并webpack配置
在build目錄下一共有三個webpack的配置文件:
webpack.base.conf.js——公用的基本webpack配置;
webpack.dev.conf.js——開發(fā)環(huán)境專用的webpack配置項;
webpack.prod.conf.js——生產(chǎn)環(huán)境專用的webpack配置項。
這里使用了一個叫webpack-merge的包來進行兩個webpack配置之間的合并,這個環(huán)節(jié)就是通過這個包將webpack.base.conf.js和webpack.dev.conf.js合并成最終的webpack配置。
(3) 配置熱加載
熱加載是一個非常棒的功能,這個功能啟用后的效果就是:當(dāng)開發(fā)環(huán)境被啟動并進入調(diào)試模式后,一旦我們修改了任意地方的源代碼,瀏覽器中對應(yīng)的內(nèi)容就會被自動刷新,而無須手工對瀏覽器進行刷新的操作,這個配置將是我們做頁面布局或者功能調(diào)整時的一大臂助。
上一個環(huán)境中合并的webpack配置也是通過這個環(huán)節(jié)被動態(tài)加載的,當(dāng)代碼文件發(fā)生變化,熱加載就會啟動webpack進行重新編譯,然后將最新的編譯文件重新加載到瀏覽器中。
(4) 配置代理服務(wù)器
這個環(huán)境是為我們的代碼增加一個模擬的服務(wù)端做準備,有了它的存在,我們就可以在沒有后端程序支持的情況下,直接模擬遠程服務(wù)器執(zhí)行的一些請求的效果。例如,向服務(wù)器發(fā)出一個HTTP GET/api/books/的請求,那么我們就可以利用代理服務(wù)器將這一請求截獲下來,然后返回一組這個API應(yīng)該執(zhí)行成功的返回結(jié)果,這樣我們的前端程序運行起來的效果就與接入了服務(wù)端后的效果是一致的了。我們將這一技術(shù)稱為服務(wù)模擬,在后面的學(xué)習(xí)中會具體介紹這一技術(shù)。
(5) 配置靜態(tài)資源
將圖片、字體、樣式表和編譯后的JS腳本等,生成對應(yīng)的一些印記(Footprint)并存放到由開發(fā)服務(wù)器托管的一個static虛目錄中,使得我們在瀏覽器中可以正常訪問到這些資源。每個生成的文件Footprint是一些哈希代碼,當(dāng)文件內(nèi)容發(fā)生變化時這些哈希代碼就會發(fā)生改變,使用Footprint是將靜態(tài)文件發(fā)布到CDN或者進行離線緩沖時通知瀏覽器文件是否發(fā)生改變的重要依據(jù)。
(6) 加載開發(fā)服務(wù)器
啟動一個Express的Web服務(wù)器,將上述各個環(huán)境中配置好的模塊進行加載,并使程序能通過瀏覽器進行訪問。
以上就是npm run dev的完整執(zhí)行思路。
● 編譯生產(chǎn)環(huán)境
當(dāng)項目準備發(fā)布時,在命令行鍵入:
$ npm run build
執(zhí)行效果如下:
生產(chǎn)環(huán)境的構(gòu)建過程比較簡單,首先是對必要的資源文件進行打包加上FootPrint,然后是對腳本進行編譯、壓縮和包大小的分割。
總結(jié)
以上所述是小編給大家介紹的vue-cli的工程模板與構(gòu)建工具,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- 使用vue-cli3+typescript的項目模板創(chuàng)建工程的教程
- 基于vue-cli3+typescript的tsx開發(fā)模板搭建過程分享
- 詳解搭建一個vue-cli的移動端H5開發(fā)模板
- vue-cli3 項目優(yōu)化之通過 node 自動生成組件模板 generate View、Component
- 在vue-cli的組件模板里使用font-awesome的兩種方法
- 新版vue-cli模板下本地開發(fā)環(huán)境使用node服務(wù)器跨域的方法
- 快速解決vue-cli不能初始化webpack模板的問題
- vue-cli webpack模板項目搭建及打包時路徑問題的解決方法
- 使用vue官方提供的模板vue-cli搭建一個helloWorld案例分析
- vue-cli的webpack模板項目配置文件分析
- 如何使用 vue-cli 創(chuàng)建模板項目
相關(guān)文章
Vue 防止短時間內(nèi)連續(xù)點擊后多次觸發(fā)請求的操作
這篇文章主要介紹了Vue 防止短時間內(nèi)連續(xù)點擊后多次觸發(fā)請求的操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11ElementPlus組件與圖標按需自動引入的實現(xiàn)方法
這篇文章主要介紹了ElementPlus組件與圖標按需自動引入的實現(xiàn)方法,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-06-06VUE使用vue?create命令創(chuàng)建vue2.0項目的全過程
vue-cli是創(chuàng)建Vue項目的一個腳手架工具,vue-cli提供了vue create等命令,下面這篇文章主要給大家介紹了關(guān)于VUE使用vue?create命令創(chuàng)建vue2.0項目的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-07-07vue如何根據(jù)權(quán)限生成動態(tài)路由、導(dǎo)航欄
這篇文章主要介紹了vue如何根據(jù)權(quán)限生成動態(tài)路由、導(dǎo)航欄,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-03-03vue-loader中引入模板預(yù)處理器的實現(xiàn)
這篇文章主要介紹了vue-loader中引入模板預(yù)處理器的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09