文章目錄
1、第一種方式
先上提綱：
- 必須要安裝nodejs
- 安裝vue的腳手架工具
- 創建項目
- 運行項目
1.1 安裝nodejs
1.2. 安裝vue的腳手架工具
安裝vue的腳手架工具 ：官方命令行工具，全局安裝
npm install --global vue-cli / cnpm install --global vue-cli
此命令只需要執行一次，上面的兩個命令我們一般用後者，這樣使用國內的地址下載較快。
小技巧：cnpm 淘寶鏡像
這是淘寶的鏡像，下載速度快，npm使用的是國外鏡像
地址：http://npm.taobao.org/
安裝cnpm： npm install -g cnpm --registry=https://registry.npm.taobao.org
網站如下：
執行截圖如下：
如圖所示，vue-cli安裝成功，默認安裝目錄在：C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli
1.3. 創建項目
先上提綱：
- vue init webpack vue-demo01
- cd vue-demo01
- cnpm install / npm install 如果創建項目的時候沒有報錯，這一步可以省略。如果報錯了 cd到項目裏面運行 cnpm install / npm install
- 運行項目：npm run dev
必須cd到對應的一個項目裏面，我們是在D:\work\learn目錄
cd D:\work\learn
然後執行如下命令創建vue-demo01項目：
vue init webpack vue-demo01
在執行的過程中，會詢問一些問題，我們只需要在eslint步驟填寫n，其他步驟都直接回車即可，如下圖：。
執行過程需要下載依賴，需要等待…，執行完畢的截圖如下：
如果安裝過程報錯的話可以執行如下操作：
cd vue-demo01 //先到這個目錄
cnpm install //或者 npm install
我們這裏沒有報錯，因此此步驟省略。
1.4. 運行項目
先cd到vue-demo01目錄下，然後執行npm run dev 運行程序，代碼如下：
cd vue-demo01
npm run dev
運行成功了，訪問：http://localhost:8080，出現如下界面，說明環境搭建成功。
2、第二種方式（推薦：簡單實用）
先上提綱：
- vue init webpack-simple vue-demo02
- cd vue-demo02
- cnpm install / npm install
- 運行項目：npm run dev
大家可以發現，和第一種的區別是：webpack和webpack-simple，其實從字面上看，也可以推斷，這是一種簡單的方式(默認不創建eslint語法檢查)。
2.1 webpack-simple方式安裝
nodejs 仍然需要事先安裝好！
到D:\work\learn目錄下執行：
vue init webpack-simple vue-demo02
根據提示，我們執行如下操作，首先進入目錄： cd vue-demo02，執行安裝命令：
cnpm install
cnpm install 執行成功：
運行和測試和第一種方式一致：
npm run dev
訪問：http://localhost:8080/ 出現如下界面。
2.2 試試修改主頁
小技巧：Visual Studio Code
使用Visual Studio Code開發工具，非常好用
用開發工具打開工程，目錄目錄如下：
上面接口，介紹了常用文件的作用，我們想修改主界面內容，只需要修改App.vue即可；
我們把msg數據的內容修改了，看看界面顯示：
界面自動刷新了你修改的數據。這種開發和調試比起jquery開發簡單的多了，快開啓的vue開發吧。