相比于主流的angular和react前端框架，vue在近年來也變得非?；馃?。他吸取了前兩者的優(yōu)點，同時學習曲線也更加平緩。所以本人準備入坑了~~

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

這里不得不吐槽，window相對mac和linux確實在軟件開發(fā)方面，非常不方便，代碼打包，環(huán)境搭建等，簡直爆炸~~..然而，嗯，本人就是在用win10，哎~

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

（1）檢查node版本

在安裝vue的環(huán)境之前，安裝NodeJS環(huán)境是必須的?？梢允褂?b>node -v指令檢查，需要保證安裝了4.0版本以上的nodeJS環(huán)境。

當然，沒有安裝的話，去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真的很慢。如果發(fā)現(xiàn)在一個地方長期卡著不動，可以ctrl+c取消，然后再重新執(zhí)行。

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

傳送門這里最前邊有寫安裝cnpm鏡像的方法，安裝后把之前代碼的npm改成cnpm就可以了。

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

（3）初始化項目

先cd到自己想要創(chuàng)建新項目的文件夾下，然后使用vue init指令

vue init模板類型項目名稱

vue的模板類型，有很多種，可以使用vue list 指令查看

我這里使用的是webpack模板，項目名叫sell，指令如下：

vue init webpack sell

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

接下來進入sell文件夾，運行npm install。會發(fā)現(xiàn)項目中多了一個叫node_modules的文件夾，目錄結構如下：

（4）運行vue環(huán)境

接下來使用 npm run dev命令運行項目環(huán)境，效果如下：

這里顯示了已經監(jiān)聽了8080端口，接下來

會看到瀏覽器自動打開如下頁面

證明項目已啟動，環(huán)境也是搭建成功啦~