想寫(xiě)一些關(guān)于vue的文章已經(jīng)很久了较木，因?yàn)檫@個(gè)框架已經(jīng)火了很久，在公司里用的框架都比較老舊青柄，但怎么也得跟上前端發(fā)展變化的潮流伐债，這不预侯，開(kāi)始使用vue開(kāi)發(fā)項(xiàng)目了，一遍開(kāi)發(fā)一邊踩坑中泳赋，今天要記錄的是五分鐘搭建vue開(kāi)發(fā)環(huán)境，運(yùn)行GitHub上的開(kāi)源項(xiàng)目喇喉。步驟很簡(jiǎn)單祖今，只是在搭建環(huán)境的過(guò)程中會(huì)遇到各種各樣奇怪的報(bào)錯(cuò)，十分讓人頭疼拣技。
1：安裝node
端開(kāi)發(fā)框架和環(huán)境都是需要 Node.js 千诬，先安裝node.js開(kāi)發(fā)環(huán)境，vue的運(yùn)行是要依賴(lài)于node的npm的管理工具來(lái)實(shí)現(xiàn)膏斤，下載https://nodejs.org/en/徐绑，安裝完成之后，打開(kāi)cmd開(kāi)始輸入命令莫辨。（我用的是win10系統(tǒng)傲茄，所以需要管理員權(quán)限，右鍵點(diǎn)擊以管理員身份運(yùn)行cmd）沮榜，不然會(huì)出現(xiàn)很多報(bào)錯(cuò)盘榨。
2：查看node的版本號(hào)
下載好node之后，以管理員身份打開(kāi)cmd管理工具蟆融，草巡，輸入 node -v ，回車(chē)型酥，查看node版本號(hào)山憨，出現(xiàn)版本號(hào)則說(shuō)明安裝成功。
輸入命令： node -v
3：安裝淘寶npm鏡像
由于npm是國(guó)外的弥喉，使用起來(lái)比較慢郁竟，我們這里使用淘寶的cnpm鏡像來(lái)安裝vue.
淘寶的cnpm命令管理工具可以代替默認(rèn)的npm管理工具。
輸入命令：npm install -g cnpm --registry=https://registry.npm.taobao.org
4：安裝全局vue-cli腳手架
淘寶鏡像安裝成功之后由境，我們就可以全局vue-cli腳手架枪孩，輸入命令：cnpm install --global vue-cli 回車(chē)；驗(yàn)證是否安裝成功藻肄，在命令輸入vue蔑舞，出來(lái)vue的信息，及說(shuō)明安裝成功嘹屯；
輸入命令：cnpm install --global vue-cli
5：建一個(gè)新項(xiàng)目
搭建完手腳架之后攻询，我們要開(kāi)始建一個(gè)新項(xiàng)目，這個(gè)時(shí)候我建議州弟，盡量不要裝在C盤(pán)钧栖，因?yàn)関ue下載下來(lái)的文件比較大低零，如果要改盤(pán)的話，直接輸入D：回車(chē)就可以直接改盤(pán)
輸入命令：vue init webpack my-project-first
回車(chē)拯杠，my-project-first是我自己的文件夾的名字掏婶，是基于webpack的項(xiàng)目，輸入之后就一直回車(chē)潭陪，直到出現(xiàn)是否要安裝vue-route雄妥，
這個(gè)我們?cè)陧?xiàng)目要用到，所以就輸入y 回車(chē)
6：注意
下面會(huì)出現(xiàn)是否需要js語(yǔ)法檢測(cè)依溯，這個(gè)我們暫時(shí)用不到老厌，就可以直接輸入no，后面的都可以直接輸入no黎炉，都是我們暫時(shí)用不到的
創(chuàng)建完成之后的提示：
打開(kāi)D盤(pán)查看一下枝秤，會(huì)發(fā)現(xiàn)多了一個(gè)剛剛創(chuàng)建的文件夾
7：進(jìn)入項(xiàng)目文件夾
文件夾已經(jīng)下載好了，現(xiàn)在就可以進(jìn)入文件夾慷嗜，輸入： cd my-project-first 回車(chē)進(jìn)入新建的項(xiàng)目淀弹。
輸入命令：cd my-project-first
8：在項(xiàng)目里安裝依賴(lài)
因?yàn)楦鱾€(gè)模板之間都是相互依賴(lài)的，所以現(xiàn)在我們要安裝依賴(lài)庆械，在項(xiàng)目里輸入以下命令垦页。
輸入命令：cnpm install
9：運(yùn)行
一切環(huán)境依賴(lài)安裝準(zhǔn)備就緒，我們來(lái)測(cè)試一下自己新建的vue項(xiàng)目的運(yùn)行情況干奢，輸入命令：cnpm run dev直接回車(chē)痊焊。會(huì)彈出一個(gè)瀏覽器訪問(wèn)地址默認(rèn)為localhost:8080。（我將地址修改為8081進(jìn)行訪問(wèn)）
輸入命令：cnpm run dev
10：在瀏覽器輸入localhost:8081
8080是默認(rèn)的端口忿峻，要訪問(wèn)的話薄啥，直接在瀏覽器輸入localhost:8080就可以打開(kāi)默認(rèn)的模板了；（我的電腦上8080端口有需要逛尚，被另外一個(gè)項(xiàng)目占用垄惧，故而使用8081的端口）
在瀏覽器輸入localhost:8081，顯示如下绰寞，到此為止到逊，vue開(kāi)發(fā)環(huán)境搭建完畢。
但是在最后一步的時(shí)候滤钱，有些人會(huì)遇到這樣的報(bào)錯(cuò)：
不要著急觉壶，我也遇到過(guò)這樣的情況，總結(jié)了一個(gè)非常完美的解決方案件缸。
解決方案：
1：在項(xiàng)目里執(zhí)行這樣的命令
npm i prettier@~1.12.0
:2：重新開(kāi)啟運(yùn)行即可成功：
npm run dev
最后如何修改默認(rèn)的端口铜靶？
既然提到自己修改了默認(rèn)的端口，那就說(shuō)明一下他炊。根目錄下有一個(gè)config文件夾争剿，看名字就知道與配置有關(guān)已艰，打開(kāi)config目錄下的index.js，這里不僅可以改變端口蚕苇，還可以根據(jù)需要改變其他配置信息哩掺。
