vue-cli提供的腳手架只是一個最基礎的，也可以說是Vue團隊認為的工程結構的一種最佳實踐。對于初學者或者以前曾從事AngularJS/React開發(fā)的用戶來說，可能對開發(fā)環(huán)境有自已習慣性用法和熟悉的工具，但我建議用Vue來開發(fā)的話還是先按照官方推薦的來做，待我們掌握了Vue官方推薦的環(huán)境配置后再按照實際情況進行相應的調整，這樣會少走一些彎路，節(jié)省不少時間。

我們下面要討論的工程結構都是圍繞webpack-simple與webpack展開的，browserify也只是在這兩個模板的基礎上移植的一個版本，所以就不過多地贅述。

webpack和webpack-simple這兩個模板從文件結構上看幾乎是一致的，只是一個是簡化版，另一個是完全版。其實不然，webpack-simple是基于Webpack@2.1.0-beta.25進行配置的版本，而webpack模板則是基于Webpack ^1.3.2配置的。這兩個版本暫時是互相不兼容的，而且使用的依賴包的版本也不一樣，所以不要將webpack模板創(chuàng)建的項目文件結構復制到webpack-simple中進行直接的取代升級，而是需要將node_modules內安裝的所有的依賴包刪除，然后重新安裝才有可能遷移成功，這一點是需要注意的。

1.webpack-simple模板

以下為webpack-simple模板構建的項目的工程目錄結構：

├── README.md
├── index.html
├── package.json
├── src
│  ├── App.vue
│  ├── assets
│  │  └── logo.png
│  └── main.js
└── webpack.config.js

webpack-simple只配置了Babel和Vue的編譯器，其他的一無所有。這個模板值得一提的就是src目錄，所有的Vue代碼源程序都放置在這個目錄中，五個模板構建出來的這個src目錄都是一樣的，只是在webpack模板中多了components目錄用于存放公用組件。

2.webpack模板

webpack模板的工程目錄結構如下：

├── 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模板的結構是非常合理的，而且配置的工具也相當豐富，當投入真正的項目開發(fā)時會覺得模板的實用性很強。

所以我們很有必要花些時間將這個模板的結構以及它所提供的工具配置了解清楚，掌握Vue官方團隊對項目開發(fā)的環(huán)境配置與使用思路，以便于我們能結合自己的實際情況進行適當?shù)呐渲门c調整。

在上文中我們已經(jīng)提過src目錄的用法與約定，此處就不再贅述。在項目的根目錄下多了4個目錄，它們的作用分別如下：

●　build——存放用于編譯用的webpack配置與相關的輔助工具代碼；

●　config——存放三大環(huán)境配置文件，用于設定環(huán)境變量和必要的路徑信息；

●　test——存放E2E測試與單元測試文件以及相關的配置文件；

●　static——存放項目所需要的其他靜態(tài)資源文件；

●　dist——存放運行npm run build指令后的生產(chǎn)環(huán)境輸出文件，可直接部署到服務器對應的靜態(tài)資源文件夾內，該文件夾只有在運行build之后才會生成。

可見，這些目錄的存在是依賴于模板內配置的開發(fā)工具的，webpack模板配置以下的工具。

3.構建工具

由于開發(fā)、測試與生產(chǎn)三大運行環(huán)境都需要進行構建，而且針對不同的環(huán)境要求，它的配置會有一定的區(qū)別，后面的學習中我們會對具體的配置進行一些定制與修改，我們應該清楚地了解webpack模板是如何進行構建的。

● 編譯開發(fā)環(huán)境

在開發(fā)環(huán)境下通過以下指令加載運行Vue項目：

$ npm run dev

這個指令的配置是在package.json的script屬性中設置的，實質上它是由npm來引導執(zhí)行入口程序dev-server.js完成以下的加載過程：

(1) 加載環(huán)境變量

該環(huán)節(jié)從config目錄加載index.js和dev.env.js兩個模塊，準備開發(fā)調試環(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) 配置熱加載

熱加載是一個非常棒的功能，這個功能啟用后的效果就是：當開發(fā)環(huán)境被啟動并進入調試模式后，一旦我們修改了任意地方的源代碼，瀏覽器中對應的內容就會被自動刷新，而無須手工對瀏覽器進行刷新的操作，這個配置將是我們做頁面布局或者功能調整時的一大臂助。

上一個環(huán)境中合并的webpack配置也是通過這個環(huán)節(jié)被動態(tài)加載的，當代碼文件發(fā)生變化，熱加載就會啟動webpack進行重新編譯，然后將最新的編譯文件重新加載到瀏覽器中。

(4) 配置代理服務器

這個環(huán)境是為我們的代碼增加一個模擬的服務端做準備，有了它的存在，我們就可以在沒有后端程序支持的情況下，直接模擬遠程服務器執(zhí)行的一些請求的效果。例如，向服務器發(fā)出一個HTTP GET/api/books/的請求，那么我們就可以利用代理服務器將這一請求截獲下來，然后返回一組這個API應該執(zhí)行成功的返回結果，這樣我們的前端程序運行起來的效果就與接入了服務端后的效果是一致的了。我們將這一技術稱為服務模擬，在后面的學習中會具體介紹這一技術。

(5) 配置靜態(tài)資源

將圖片、字體、樣式表和編譯后的JS腳本等，生成對應的一些印記（Footprint）并存放到由開發(fā)服務器托管的一個static虛目錄中，使得我們在瀏覽器中可以正常訪問到這些資源。每個生成的文件Footprint是一些哈希代碼，當文件內容發(fā)生變化時這些哈希代碼就會發(fā)生改變，使用Footprint是將靜態(tài)文件發(fā)布到CDN或者進行離線緩沖時通知瀏覽器文件是否發(fā)生改變的重要依據(jù)。

(6) 加載開發(fā)服務器

啟動一個Express的Web服務器，將上述各個環(huán)境中配置好的模塊進行加載，并使程序能通過瀏覽器進行訪問。

以上就是npm run dev的完整執(zhí)行思路。

● 編譯生產(chǎn)環(huán)境

當項目準備發(fā)布時，在命令行鍵入：

$ npm run build

執(zhí)行效果如下：

生產(chǎn)環(huán)境的構建過程比較簡單，首先是對必要的資源文件進行打包加上FootPrint，然后是對腳本進行編譯、壓縮和包大小的分割。

總結

以上所述是小編給大家介紹的vue-cli的工程模板與構建工具，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論