最近正在做一個Vue重構(gòu)有贊商城的項目，所以這段時間會不定期跟進一些關(guān)于這個項目的技術(shù)博客。那么，今天就來聊一聊怎么使用NPM安裝Vue.js吧！
步驟一：安裝node.js
如下圖所示，在終端上輸入以下命令確認你電腦上已經(jīng)安裝node.js并且npm的版本大于3.0，如果npm版本小于3.0，可以輸入$ cnpm install npm -g進行升級。
確認安裝node.js
步驟二：安裝淘寶鏡像
由于 npm 安裝速度慢，所以本文使用淘寶鏡像及其命令 cnpm進行安裝，輸入
$ npm install -g cnpm --registry=https://registry.npm.taobao.org安裝淘寶鏡像。步驟三：安裝Vue
輸入
$ cnpm install vue ，回車等待終端給出響應(yīng)。步驟四：安裝全局vue-cli腳手架
輸入
$ cnpm install --global vue-cli,安裝全局vue-cli腳手架，用于快速搭建大型單頁應(yīng)用。步驟五：檢查Vue是否安裝成功
輸入
$ vue -V檢查是否安裝成功，如果返回版本號則說明安裝成功。
出現(xiàn)了版本號說明安裝成功
步驟六：查看官網(wǎng)提供的模板(這個步驟可以省略)
查看vue官方提供的模板
WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），并將其打包為合適的格式以供瀏覽器使用。
步驟七：創(chuàng)建一個基于 webpack 模板的新項目
終端切換到你的目標(biāo)目錄下創(chuàng)建一個項目，這里以在桌面創(chuàng)建一個叫做vue-project的項目為例:輸入vue init webpack vue-project，終端會給你返回如下內(nèi)容：
# 這里需要進行一些配置，默認回車即可
This will install Vue 2.x version of the template.
For Vue 1.x use: vue init webpack#1.0 vue-project
? Project name vue-project
? Project description A Vue.js project
? Author 5Iris5 <1847370****@163.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "my-project".
To get started:
cd vue-project
npm install
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
這里沒有放原圖是因為，我在這個環(huán)節(jié)出錯了，原因后面會詳細記錄。正常情況下，運行到這個步驟后，你的界面應(yīng)該依次出現(xiàn)如上所示的三條命令。
步驟八：根據(jù)提示依次輸入以下三條命令
// 進入項目
$ cd vue-project
// 安裝依賴
$ cnpm install
// 測試環(huán)境是否搭建成功
$ cnpm run dev
步驟九：運行
成功執(zhí)行以上命令后訪問 http://localhost:8080/，輸出結(jié)果如下所示：
運行成功辣！
安裝過程中遇到的問題
我在輸入
vue init webpack vue-project這行命令并進行完一系列配置后，終端給我返回了如下內(nèi)容：
仔細終端給出的提示信息，并不是npm版本的問題。但是接下來終端僅提示我輸入如下兩條命令：
npm install的命令。為什么呢？目前為止還不清楚原因，所以我決定不管我的終端提示，依次輸入正常的三條命令，結(jié)果終端提示我如下信息：
報錯辣
下載 chromedriver
下載好后，后續(xù)的一系列運行就沒有問題了！關(guān)于為什么會報錯，事后我在網(wǎng)上查閱了一些資料，大概意思是，該問題是vue-cli腳手架上的一個bug，沒有安裝chromedriver會導(dǎo)致文件目錄結(jié)構(gòu)不完整。
補充：
推薦使用cnpm安裝chromedriver，因為使用npm安裝chromedriver有時會出錯，出錯的大致原因如下：
1、某些版本下，chromedriver的zip文件url的響應(yīng)是302跳轉(zhuǎn)，而在install.js里使用的是Node.js內(nèi)置http對象的get方法，所有無法處理302跳轉(zhuǎn)的情況
2、googleapis.com被墻了，所有即使采用科學(xué)上網(wǎng)的方法也仍然無法獲取文件。
參考資料：npm 安裝 chromedriver 失敗的解決辦法
