相比于主流的angular和react前端框架，vue在近年來也變得非常火熱距潘。他吸取了前兩者的優(yōu)點孕暇，同時學(xué)習(xí)曲線也更加平緩仑撞。所以本人準(zhǔn)備入坑了~~
首先從vue的腳手架搭建開始吧。
這里不得不吐槽妖滔，window相對mac和linux確實在軟件開發(fā)方面隧哮，非常不方便，代碼打包座舍，環(huán)境搭建等沮翔，簡直爆炸~~..然而，嗯曲秉，本人就是在用win10采蚀，哎~
嘛，廢話不多說承二，今天的任務(wù)就是把腳手架搭好榆鼠，雖然流程不麻煩，但是npm這個東東亥鸠，真的可以一不小心就磨掉一下午的時間妆够。這里無論用命令行工具识啦，還是Git Bash，或者WebStrom里的Terminal工具神妹，都是可以的颓哮。
（1）檢查node版本
在安裝vue的環(huán)境之前，安裝NodeJS環(huán)境是必須的鸵荠∶崦可以使用node -v指令檢查，需要保證安裝了4.0版本以上的nodeJS環(huán)境腰鬼。
當(dāng)然嵌赠，沒有安裝的話，去Node.js的官網(wǎng)下載一下熄赡，各種下一步姜挺，傻瓜式安裝就好，非常方便彼硫。
tips:這里說一下我自己踩過的一個坑炊豪，我最開始，安裝的是國外官網(wǎng)上最新的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 指令檢查一下是否安裝成功，如果成功則結(jié)果如下：
（3）初始化項目
先cd到自己想要創(chuàng)建新項目的文件夾下运挫，然后使用vue init指令
vue init模板類型項目名稱
vue的模板類型状共，有很多種，可以使用vue list 指令查看
我這里使用的是webpack模板滑臊，項目名叫sell口芍，指令如下：
vue init webpack sell
然后可以一路回車下去，里邊的選項可以多數(shù)是用來確認(rèn)項目名稱雇卷，作者鬓椭，描述信息以及測試等內(nèi)容颠猴，可以根據(jù)需求自己選擇。（這里sell是我的項目名）
接下來進入sell文件夾小染，運行npm install翘瓮。會發(fā)現(xiàn)項目中多了一個叫node_modules的文件夾，目錄結(jié)構(gòu)如下：
（4）運行vue環(huán)境
接下來使用 npm run dev命令運行項目環(huán)境裤翩，效果如下：
這里顯示了已經(jīng)監(jiān)聽了8080端口资盅，接下來
會看到瀏覽器自動打開如下頁面
證明項目已啟動，環(huán)境也是搭建成功啦~
