小編給大家分享一下vue-cli工程模板與構(gòu)建工具的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比公主嶺網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式公主嶺網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋公主嶺地區(qū)。費(fèi)用合理售后完善，10年實(shí)體公司更值得信賴。vue-cli提供的腳手架只是一個(gè)最基礎(chǔ)的，也可以說(shuō)是Vue團(tuán)隊(duì)認(rèn)為的工程結(jié)構(gòu)的一種最佳實(shí)踐。對(duì)于初學(xué)者或者以前曾從事AngularJS/React開(kāi)發(fā)的用戶來(lái)說(shuō)，可能對(duì)開(kāi)發(fā)環(huán)境有自已習(xí)慣性用法和熟悉的工具，但我建議用Vue來(lái)開(kāi)發(fā)的話還是先按照官方推薦的來(lái)做，待我們掌握了Vue官方推薦的環(huán)境配置后再按照實(shí)際情況進(jìn)行相應(yīng)的調(diào)整，這樣會(huì)少走一些彎路，節(jié)省不少時(shí)間。
我們下面要討論的工程結(jié)構(gòu)都是圍繞webpack-simple與webpack展開(kāi)的，browserify也只是在這兩個(gè)模板的基礎(chǔ)上移植的一個(gè)版本，所以就不過(guò)多地贅述。
webpack和webpack-simple這兩個(gè)模板從文件結(jié)構(gòu)上看幾乎是一致的，只是一個(gè)是簡(jiǎn)化版，另一個(gè)是完全版。其實(shí)不然，webpack-simple是基于Webpack@2.1.0-beta.25進(jìn)行配置的版本，而webpack模板則是基于Webpack ^1.3.2配置的。這兩個(gè)版本暫時(shí)是互相不兼容的，而且使用的依賴包的版本也不一樣，所以不要將webpack模板創(chuàng)建的項(xiàng)目文件結(jié)構(gòu)復(fù)制到webpack-simple中進(jìn)行直接的取代升級(jí)，而是需要將node_modules內(nèi)安裝的所有的依賴包刪除，然后重新安裝才有可能遷移成功，這一點(diǎn)是需要注意的。
1.webpack-simple模板
以下為webpack-simple模板構(gòu)建的項(xiàng)目的工程目錄結(jié)構(gòu)：
├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ └── main.js └── webpack.config.js
webpack-simple只配置了Babel和Vue的編譯器，其他的一無(wú)所有。這個(gè)模板值得一提的就是src目錄，所有的Vue代碼源程序都放置在這個(gè)目錄中，五個(gè)模板構(gòu)建出來(lái)的這個(gè)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
這個(gè)webpack模板的結(jié)構(gòu)是非常合理的，而且配置的工具也相當(dāng)豐富，當(dāng)投入真正的項(xiàng)目開(kāi)發(fā)時(shí)會(huì)覺(jué)得模板的實(shí)用性很強(qiáng)。
所以我們很有必要花些時(shí)間將這個(gè)模板的結(jié)構(gòu)以及它所提供的工具配置了解清楚，掌握Vue官方團(tuán)隊(duì)對(duì)項(xiàng)目開(kāi)發(fā)的環(huán)境配置與使用思路，以便于我們能結(jié)合自己的實(shí)際情況進(jìn)行適當(dāng)?shù)呐渲门c調(diào)整。
在上文中我們已經(jīng)提過(guò)src目錄的用法與約定，此處就不再贅述。在項(xiàng)目的根目錄下多了4個(gè)目錄，它們的作用分別如下：
● build——存放用于編譯用的webpack配置與相關(guān)的輔助工具代碼；
● config——存放三大環(huán)境配置文件，用于設(shè)定環(huán)境變量和必要的路徑信息；
● test——存放E2E測(cè)試與單元測(cè)試文件以及相關(guān)的配置文件；
● static——存放項(xiàng)目所需要的其他靜態(tài)資源文件；
● dist——存放運(yùn)行npm run build指令后的生產(chǎn)環(huán)境輸出文件，可直接部署到服務(wù)器對(duì)應(yīng)的靜態(tài)資源文件夾內(nèi)，該文件夾只有在運(yùn)行build之后才會(huì)生成。
可見(jiàn)，這些目錄的存在是依賴于模板內(nèi)配置的開(kāi)發(fā)工具的，webpack模板配置以下的工具。
3.構(gòu)建工具
由于開(kāi)發(fā)、測(cè)試與生產(chǎn)三大運(yùn)行環(huán)境都需要進(jìn)行構(gòu)建，而且針對(duì)不同的環(huán)境要求，它的配置會(huì)有一定的區(qū)別，后面的學(xué)習(xí)中我們會(huì)對(duì)具體的配置進(jìn)行一些定制與修改，我們應(yīng)該清楚地了解webpack模板是如何進(jìn)行構(gòu)建的。
● 編譯開(kāi)發(fā)環(huán)境
在開(kāi)發(fā)環(huán)境下通過(guò)以下指令加載運(yùn)行Vue項(xiàng)目：
$ npm run dev
這個(gè)指令的配置是在package.json的script屬性中設(shè)置的，實(shí)質(zhì)上它是由npm來(lái)引導(dǎo)執(zhí)行入口程序dev-server.js完成以下的加載過(guò)程：
(1) 加載環(huán)境變量
該環(huán)節(jié)從config目錄加載index.js和dev.env.js兩個(gè)模塊，準(zhǔn)備開(kāi)發(fā)調(diào)試環(huán)境所必需的一些目錄和全局變量。
(2) 合并webpack配置
在build目錄下一共有三個(gè)webpack的配置文件：
webpack.base.conf.js——公用的基本webpack配置；
webpack.dev.conf.js——開(kāi)發(fā)環(huán)境專用的webpack配置項(xiàng)；
webpack.prod.conf.js——生產(chǎn)環(huán)境專用的webpack配置項(xiàng)。
這里使用了一個(gè)叫webpack-merge的包來(lái)進(jìn)行兩個(gè)webpack配置之間的合并，這個(gè)環(huán)節(jié)就是通過(guò)這個(gè)包將webpack.base.conf.js和webpack.dev.conf.js合并成最終的webpack配置。
(3) 配置熱加載
熱加載是一個(gè)非常棒的功能，這個(gè)功能啟用后的效果就是：當(dāng)開(kāi)發(fā)環(huán)境被啟動(dòng)并進(jìn)入調(diào)試模式后，一旦我們修改了任意地方的源代碼，瀏覽器中對(duì)應(yīng)的內(nèi)容就會(huì)被自動(dòng)刷新，而無(wú)須手工對(duì)瀏覽器進(jìn)行刷新的操作，這個(gè)配置將是我們做頁(yè)面布局或者功能調(diào)整時(shí)的一大臂助。
上一個(gè)環(huán)境中合并的webpack配置也是通過(guò)這個(gè)環(huán)節(jié)被動(dòng)態(tài)加載的，當(dāng)代碼文件發(fā)生變化，熱加載就會(huì)啟動(dòng)webpack進(jìn)行重新編譯，然后將最新的編譯文件重新加載到瀏覽器中。
(4) 配置代理服務(wù)器
這個(gè)環(huán)境是為我們的代碼增加一個(gè)模擬的服務(wù)端做準(zhǔn)備，有了它的存在，我們就可以在沒(méi)有后端程序支持的情況下，直接模擬遠(yuǎn)程服務(wù)器執(zhí)行的一些請(qǐng)求的效果。例如，向服務(wù)器發(fā)出一個(gè)HTTP GET/api/books/的請(qǐng)求，那么我們就可以利用代理服務(wù)器將這一請(qǐng)求截獲下來(lái)，然后返回一組這個(gè)API應(yīng)該執(zhí)行成功的返回結(jié)果，這樣我們的前端程序運(yùn)行起來(lái)的效果就與接入了服務(wù)端后的效果是一致的了。我們將這一技術(shù)稱為服務(wù)模擬，在后面的學(xué)習(xí)中會(huì)具體介紹這一技術(shù)。
(5) 配置靜態(tài)資源
將圖片、字體、樣式表和編譯后的JS腳本等，生成對(duì)應(yīng)的一些印記（Footprint）并存放到由開(kāi)發(fā)服務(wù)器托管的一個(gè)static虛目錄中，使得我們?cè)跒g覽器中可以正常訪問(wèn)到這些資源。每個(gè)生成的文件Footprint是一些哈希代碼，當(dāng)文件內(nèi)容發(fā)生變化時(shí)這些哈希代碼就會(huì)發(fā)生改變，使用Footprint是將靜態(tài)文件發(fā)布到CDN或者進(jìn)行離線緩沖時(shí)通知瀏覽器文件是否發(fā)生改變的重要依據(jù)。
(6) 加載開(kāi)發(fā)服務(wù)器
啟動(dòng)一個(gè)Express的Web服務(wù)器，將上述各個(gè)環(huán)境中配置好的模塊進(jìn)行加載，并使程序能通過(guò)瀏覽器進(jìn)行訪問(wèn)。
以上就是npm run dev的完整執(zhí)行思路。
● 編譯生產(chǎn)環(huán)境
當(dāng)項(xiàng)目準(zhǔn)備發(fā)布時(shí)，在命令行鍵入：
$ npm run build
執(zhí)行效果如下：
生產(chǎn)環(huán)境的構(gòu)建過(guò)程比較簡(jiǎn)單，首先是對(duì)必要的資源文件進(jìn)行打包加上FootPrint，然后是對(duì)腳本進(jìn)行編譯、壓縮和包大小的分割。
以上是“vue-cli工程模板與構(gòu)建工具的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
重慶分公司
重慶分公司
