相比於主流的angular和react前端框架，vue在近年來也變得非常火熱。他吸取了前兩者的優點，同時學習曲線也更加平緩。所以本魔王準備入坑了~~

首先從vue的腳手架搭建開始吧。

這裡不得不吐槽，window相對mac和linux確實在軟體開發方面，非常不方便，程式碼打包，環境搭建等，簡直爆炸~~..然而，嗯，本魔王就是在用win10，哎~

嘛，廢話不多說，今天的任務就是把腳手架搭好，雖然流程不麻煩，但是npm這個東東，真的可以一不小心就磨掉一下午的時間。這裡無論用命令列工具，還是Git Bash，或者WebStrom裡的Terminal工具，都是可以的。

（1）檢查node版本

在安裝vue的環境之前，安裝NodeJS環境是必須的。可以使用node -v

當然，沒有安裝的話，去Node.js的官網下載一下，各種下一步，傻瓜式安裝就好，非常方便。

tips:這裡說一下我自己踩過的一個坑，我最開始，安裝的是國外官網上最新的7.3.0的版本，然後再最後npm run dev的時候各種報錯。最後的解決方式是把node的版本回退到了6.2.0。所以這裡推介大家安裝NodeJs 4~6之間的版本。

（2）安裝vue-cli

接下來進入正題，先全域性安裝vue-cli。

使用指令npm install -g vue-cli

接下來就是等等等~~畢竟npm真的很慢。如果發現在一個地方長期卡著不動，可以ctrl+c取消，然後再重新執行。

還有一種解決方式是使用淘寶的cnpm映象。

傳送門 這裡最前邊有寫安裝cnpm映象的方法，安裝後把之前程式碼的npm改成cnpm就可以了。

最後做完以後，使用vue 指令檢查一下是否安裝成功，如果成功則結果如下：

（3）初始化專案

先cd到自己想要建立新專案的資料夾下，然後使用vue init指令 

vue init 模板型別 專案名稱

 vue的模板型別，有很多種，可以使用vue list 指令檢視

我這裡使用的是webpack模板，專案名叫sell，指令如下：

vue init webpack sell

然後可以一路回車下去，裡邊的選項可以多數是用來確認專案名稱，作者，描述資訊以及測試等內容，可以根據需求自己選擇。（這裡sell是我的專案名）

接下來進入sell資料夾，執行npm install。會發現專案中多了一個叫node_modules的資料夾，目錄結構如下：

（4）執行vue環境

接下來使用 npm run dev命令執行專案環境，效果如下：

這裡顯示了已經監聽了8080埠，接下來在瀏覽器訪問http://localhost:8080/

會看到如下頁面

證明專案已啟動，環境也是搭建成功啦~~