Vue2.0搭建Vue腳手架（vue-cli）

在網上找了很多的搭建腳手架教程，但都不求甚解。終於找到2個比較好的教程，讀者可對比閱讀1和2，在這裡分享給大家，希望對初學者有所幫助。ps：高手請繞道。

      1.使用npm全局安裝vue-cli（前提是你已經安裝了nodejs，否則你連npm都用不了），在cmd中輸入一下命令

      npm install --global vue-cli

      安裝完成後

同時在C:\Users\Andminster\AppData\Roaming\npm目錄下為會生成幾個文件

安裝完成後，創建自己的工作空間，在cmd切換至剛剛創建好的工作空間，如果已經有工作空間，直接切換到工作空間即可。使用命令創建項目

vue init webpack vuetest

Test是項目名稱，這個名字自己隨便取。

命令輸入後，會進入安裝階段，需要用戶輸入一些信息

Project name (vuetest)                    項目名稱，可以自己指定，也可直接回車，按照括弧中預設名字（註意這裡的名字不能有大寫字母，如果有會報錯Sorry, name can no longer contain capital letters），阮一峰老師博客為什麼文件名要小寫 ，可以參考一下。

Project description (A Vue.js project)  項目描述，也可直接點擊回車，使用預設名字

Author (........)       作者，不用說了，你想輸什麼就輸什麼吧

接下來會讓用戶選擇

Runtime + Compiler: recommended for most users    運行加編譯，既然已經說了推薦，就選它了

Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere   僅運行時，已經有推薦了就選擇第一個了

Install vue-router? (Y/n)    是否安裝vue-router，這是官方的路由，大多數情況下都使用，不過我的第一個項目中的路由是自己寫的，沒有使用到官方路由，因為有特殊需求，也因為比較早，官方尚未成熟，vue-router官網 。這裡就輸入“y”後回車即可。

Use ESLint to lint your code? (Y/n)      是否使用ESLint管理代碼，ESLint是個代碼風格管理工具，是用來統一代碼風格的，並不會影響整體的運行，這也是為了多人協作，新手就不用了，一般項目中都會使用。ESLint官網 

接下來也是選擇題Pick an ESLint preset (Use arrow keys)            選擇一個ESLint預設，編寫vue項目時的代碼風格，因為我選擇了使用ESLint

Standard (https://github.com/feross/standard)    標準，有些看不明白，什麼標準呢，去給提示的standardgithub地址看一下， 原來時js的標準風格

AirBNB (https://github.com/airbnb/javascript)    JavaScript最合理的方法，這個github地址說的是JavaScript最合理的方法

none (configure it yourself)    這個不用說，自己定義風格

具體選擇哪個因人而異吧  ，我選擇標準風格

Setup unit tests with Karma + Mocha? (Y/n)  是否安裝單元測試，我選擇安裝

Setup e2e tests with Nightwatch(Y/n)?     是否安裝e2e測試 ，我選擇安裝

完成

已經說明vue-cli創建了vuetest，接下來要做的命令已經給出，那就按照提示來，先看一下，項目的目錄

簡單說一下這個目錄，

bulid   裡面是一些操作文件，使用npm run *    時其實執行的就是這裡的文件

config 配置文件，執行文件需要的配置信息

src   資源文件，所有的組件以及所用的圖片都是在這個放著的簡單看一下這個文件夾下都放了那些東西

              assets  資源文件夾，放圖片之類的資源，components  組件文件夾，寫的所有組件都放在這個文件夾下，現在有一個寫好的組件已經放到裡面了，router  路由文件夾，這個決定了也面的跳轉規則，App.vue應用組件，所有自己寫的組件，都是在這個組件之上運行了，main.js    webpack入口文件，webpack四大特性entry入口、output輸出，loader載入器，plugins插件，可以再項目中build\webpack.base.conf.js第12行看到這個入口文件是哪個。

切換到項目目錄

cd vuetest

安裝一來模塊

npm install

這裡只用了install是安裝所有的模塊，如果是安裝具體的那個模塊install 後面輸入模塊的名字即可，只輸入install就按照項目的根目錄下的package.json文件中依賴的模塊安裝，這個文件裡面是不允許有任何註釋的，每個使用npm管理的項目都有這個文件，是npm操作的入口文件。因為是初始項目，還沒有任何模塊，需要安裝所有的模塊，這就是為什麼我們剛下載下來別人的項目時都需要先運行 npm install 命令，因為模塊較多，文件比較大，所以沒有上傳模塊，這個不需要上傳那些文件的配置是在根目錄下.gitignore配置的，這是git操作的配置文件，涉及到的git操作都要操作這個文件，可以沒有，也可以什麼都不寫。這個安裝時間比較長，再加上npm是國外的伺服器，就更慢了，也可以再開始之前就講npm切換到taobao鏡像上，就相對會快一些，這裡可以看一下阮一峰老師的npm 模塊安裝機制簡介 

安裝完成後，目錄中會多出來一個node_modules文件夾，這裡放的就是所有依賴的模塊，如何將npm切換至cnpm 

這裡文件比較多，也比較大，現在就明白為什麼大家都不上傳這個文件了

項目構建完成，現在我們輸入npm run dev運行項目吧，看看有什麼效果

自動打開預設瀏覽器顯示頁面

下麵來大概屢一下程式的執行流程

執行npm run dev命令，程式會先找到根目錄下的package.json文件，找到文件中的scripts項，找到對應的dev命令，執行dev對應的命令，這裡我們也可以不用npm run dev 直接輸入dev後面的命令效果是一樣的，這樣做的目的是因為有時命令會很長有很難記住，這種方式會非常的方便，具體只用可以參考阮一峰老師的npm script使用指南 

執行dev命令，按照dev命令中的路徑找到對應的build下dev-server.js文件，之後按照腳本的程式執行，首先引入版本檢測文件check-versions，使用的機制可學習一下阮一峰老師的require() 源碼解讀 ，接下來引入配置文件，process.env.NODE_ENV獲取環境變數，也就是判斷當前運行的是測試環視開發環境，可是使用console.log(process.env.NODE_ENV)將獲取到的值列印到cmd中，可以看到是值是config\dev.env.js第五行定義的值“development”，很顯然是開發模式，接下來就是引入一些模塊，在第13行中，根據環境變數來判斷我們要引入哪個執行文件，顯然是當前目錄下的webpack.dev.conf文件，先不看這個文件，下來是埠號，這個比較關心一些，畢竟埠號不能一直是8080埠吧，要經常修改這個埠號的。埠號又是判斷的，並且也用到了換將變數了，這一次我門將process.env、process.env.PORT、config.dev.port都列印出來，看看裡面都什麼，（這裡要說明一下，當我們直接將列印代碼寫到獲取埠號下麵是，剛運行時有，自動打開頁面時被刷新了，還沒來得及看呢，不過仔細一點，就會發現它自己也列印了一句話“Listening at http://localhost:8080”，我在文件中71行找到了列印這句話的代碼，好的，那我就把列印寫到這了），看看輸出什麼呢，內容相當的多，我就不貼代碼了，主要看一下，判斷的兩個埠號是多少

process.env.PORT >>> undefined

config.dev.port >>> 8080

很顯然，當前所用的埠號是配置文件中的埠號了，但是看一下配置文件中，並沒有dev或dev.port文件啊，可一下將config中的所有文件都看一遍，看哪裡有8080的代碼，文件不多，代碼不成，很快就能找見的。很快就在index.js文件下找到了，原來這塊的dev只的並不是文件，而是index.js中的dev對象，並且port取得是的dev對象中port的值，埠號就在這裡修改，這裡牽扯的內容較多，就不多說了（這裡說個小技巧，當找不見某個變數時，優先從index、main之類頻繁使用字樣的文件中查找，因為這是一種習慣吧）。好了，這個文件的內容較多，不全部說了，看一下註釋大概知道是什麼意思，後續另寫篇博客對這些文件和代碼統一說明。

下麵簡單看一下webpack.dev.conf文件，主要看到var baseConfig = require('./webpack.base.conf')，除了webpack.base.conf本身以外，其餘三個webpack配置文件都引入了這個文件，從字面就可以看出，這是webpack的基礎配置，這些文件就不過多說明瞭。

接下來就看一下webpack.base.conf文件，這是核心文件，必須執行的文件，這裡可以看到entry和output，這就是入口和輸出路徑，在入口處看到了./src/main.js，這就找到了界面的入口處了。

在main.js中可以看到創建了一個vue實例，並載入了模板組件App.vue，在再App.vue組件中看到模板加入來了一個圖片和一個自定義的router-view標簽，這個標簽是在vue-router模塊中定義的，因為在main.js創建vue實例時已經添加了router，這裡可以直接使用，router-view標簽里的內容可以通過src\router\index.js中查看，在第三行看到import Hello from 'components/Hello'，引入了components下的Hello文件，並且在routes使用到了這個組件，這就是router-view標簽載入（渲染）的內容，在Hello.vue文件中看到了瀏覽器顯示的出logo一外的算有元素，界面上顯示的所有內容都找到了，在通過output輸出到界面上整個過程就執行完了。

在說一下打包，因為不可能將這個項目就這樣部署上去，需要將頁面打包，打包命令為

npm run build

打包完成後，會在根目錄下生成一個dist文件夾，這就是最後的成品頁面，在打包好的最底下為們會看到一個黃色的警告

它提示提示：建立文件是放在一個HTTP伺服器。打開index.html文件：/ /不工作。當直接使用瀏覽器打開文件時，瀏覽器控制台會報錯

很多資源都載入失敗，仔細看一下路徑，絕對路徑，F盤下哪有static文件夾，那就要將打包的路徑改為相對路徑，這個根據build命令一路跟蹤，到config\index.js文件中的build對象，將assetsPublicPath中的“/”，改為“./”即可，就在前面加個點就可以了，併在build\build.js將這兩句的提示信息刪掉或註釋掉，再打包直接用瀏覽器直接運行就好了。

index.html就是單頁應用的頁面，static文件夾下的兩個文件夾是什麼，都知道，就不多說。這裡的文件名和文件路徑都是可以通過配置文件修改的，具體可以按照命令的執行看一下。

另外註意下，在進行頁面調試時，請用Chrome瀏覽器，因為要使用到vue-tool擴展程式，這個擴展程式，自己去谷歌商店下載，這個絕對要科學上網的。打開之後可以看到

右上角有個vue小logo，表示我們已經安裝vue-tool擴展工具，並且啟用了，F12打開調試工具，會多一個Vue選項，沒有看到的話點擊最後面的“>>”按鈕，就可以看到所有的功能了，要是還是沒有，就重啟一下瀏覽器。在這裡看到組件的層級結構。