?Vue.js 引用百度百科的話：是一個構(gòu)建數(shù)據(jù)驅(qū)動的 web 界面的漸進式框架。Vue.js 的目標(biāo)是通過盡可能簡單的 API 實現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。它不僅易于上手，還便于與第三方庫或既有項目整合。

一．項目所需環(huán)境：  
   Node.js環(huán)境
   Npm環(huán)境（建議使用cnpm國內(nèi)淘寶鏡像）
   Vue-cil 腳手架構(gòu)造環(huán)境

二．如何安裝node.js

1.百度搜索node官網(wǎng)

2、選擇合適的安裝包，然后傻瓜式安裝。



3、解壓下載好的node.js安裝包，并新建node_global"及"node_cache"兩個文件夾
未建立文件夾之前：

新建后：



4、配置環(huán)境變量PATH
打開系統(tǒng)變量，選擇path，再點擊編輯：


把剛剛解壓的nodejs路徑粘貼進去：


右擊【我的電腦】--》【屬性】--》【高級系統(tǒng)設(shè)置】--》【環(huán)境變量】--》【系統(tǒng)變量】--》【Path】-->增加兩個路徑（新建那兩個文件夾的路徑）
 
5、打開cmd，輸入node -v測試是否有node環(huán)境



溫馨提示：如果提示說找不到命令
第1種可能是設(shè)置錯了
第2種就是需要重啟電腦
 
6、配置環(huán)境變量NODE_PATH


7、設(shè)置prefix和cache輸入以下兩行命令行：
npm config set prefix "D:\Program Files\node-v6.11.5-win-x64\node_global"
npm config set cache "D:\Program Files\node-v6.11.5-win-x64\node_cache"


三． 測試環(huán)境

1、打開cmd，輸入node -v測試是否有node環(huán)境。



2、在cmd，輸入npm-v測試是否有npm包



四、 使用淘寶鏡像文件cnpm代替npm

原因：如果使用npm是使用國外安裝包，可能由于一些原因會造成卡頓（傳輸時間過長）或者無法使用（屏蔽問題）；所以，建議使用國內(nèi)的淘寶鏡像cnpm；
1. 輸入
npm install -g cnpm --registry=http://registry.npm.taobao.org
2. 命令安裝cnpm資源；
  Ps：過程可能會有點長，請耐心等待；

五、安裝vue-cli腳手架安裝包
輸入cnpm install -g vue-cli命令行 
溫馨提示：建議使用cnpm國內(nèi)資源安裝，這樣等待時間會短一些，也不會導(dǎo)致卡頓；

六、建立新的vue.js項目：
1、打開命令行工具 輸入cd desktop

2、輸入命令行vue init webpack firstVuejs
溫馨提示：這次整個項目是基于webpack搭建的vue.js項目；最后的firstVuejs為本項目名稱。

3、桌面自動生成項目
4、使用命令行工具輸入cd desktop/firstvuejs進入項目層

溫馨提示：如果像上圖一樣找不到路徑可以cd .. 退回上一路徑，再嘗試一下。

5、啟動項目：
輸入npm run dev 啟動項目


七、注意踩雷！！

比如index.html在項目里為index.vue;style.css也需要改成style.css(作用相同)。