之前有做過(guò)一項(xiàng)基于vue+webpack的項(xiàng)目店茶，怕時(shí)間太長(zhǎng)趕緊記錄下來(lái)歧焦。關(guān)于vue和webpack就不過(guò)多介紹了缺脉，可以去官網(wǎng)查看惦辛，這里只對(duì)如何搭建vue的項(xiàng)目做介紹劳秋。
1）首先萬(wàn)年不變的，我們需要安裝開(kāi)發(fā)環(huán)境——node.js胖齐，安裝完成之后打開(kāi)cmd輸入一下代碼驗(yàn)證是否安裝成功：
?node --version
如果安裝成功則會(huì)相應(yīng)輸出node的版本號(hào)玻淑，為了提高效率和速度轉(zhuǎn)國(guó)內(nèi)淘寶鏡像：
?npm set registry https://registry.npm.taobao.org/
同樣的如果安裝成功則會(huì)輸出cnpm的版本號(hào)，此時(shí)開(kāi)發(fā)環(huán)境就安裝成功了呀伙。
2）利用vue來(lái)做項(xiàng)目我們需要下載vue.js补履，這里是vue和webpack的打包配合使用，我們直接安裝最新的版本：
cnpm install vue
在這里我使用了vue-cli腳手架剿另，因此還需要安裝vue-cli：
cnpm install -g vue-cli
使用命令?vue init webpack demo 搭建vue項(xiàng)目, “demo” 是你的項(xiàng)目名稱（注意想要在哪個(gè)文件夾下新建這個(gè)項(xiàng)目命令行直接切換到改文件夾下即可）箫锤。接下來(lái)按照引導(dǎo)一路回車即可（主要是對(duì)這個(gè)項(xiàng)目的一些描述，以及是否使用eslint來(lái)檢查代碼）
以上步驟完成后就可以生成一個(gè)如下的項(xiàng)目結(jié)構(gòu)了雨女，其中src文件下的就是后面我們代碼主要存放的目錄了
生成之后我們需要給項(xiàng)目安裝依賴環(huán)境谚攒，根據(jù)命令行的引導(dǎo)一步一步輸入
回到demo所在的目錄：cd demo ，然后執(zhí)行? cnpm install? ?安裝依賴環(huán)境氛堕，執(zhí)行? cnpm run dev?即可運(yùn)行項(xiàng)目馏臭，瀏覽器就可以看見(jiàn)運(yùn)行結(jié)果了
瀏覽器地址欄輸入：localhost:8080? 即可查看
以上我們就成功搭建了一個(gè)vue的項(xiàng)目了，我們可以在HelloWorld.vue上做一些更改寫(xiě)我們自己的代碼岔擂，也可以嘗試新建一個(gè)vue文件寫(xiě)一些邏輯代碼
