一炕桨、開發(fā)環(huán)境搭建
1、前端框架一般依賴node.js利虫，我們首先要安裝node.js.請參考：http://www.cnblogs.com/wuac/p/6381819.html
2挨厚、由于許多npm 的源都在國外的地址，安裝起來特別慢糠惫，所以我們這里利用淘寶的鏡像服務器疫剃。安裝命令為：npm install -g cnpm --registry=https://registry.npm.taobao.org 之后回車等待命令
3、接著安裝全局的vue-cli腳手架硼讽，用于幫助你快速搭建所需的Vue的開發(fā)模板框架
$ cnpm install -g vue-cli回車巢价，等待安裝,安裝完成后，可以輸入vue -v 然后回車固阁，如果出現(xiàn)vue客戶端版本號壤躲，則說明成功的安裝了vue
4、用npm安裝webpack
cnpm install webpack -g
此時webpack已經(jīng)安裝到了全局環(huán)境下备燃，可以通過命令webpack -h試試.
5碉克、在一個目錄下新建一個vuepro文件夾，cd到該目錄下赚爵，然后輸入命令： vue init webpack vue-test //(項目名稱:vue-test)
啟動調(diào)試棉胀，順序輸入下列命令：
cd vue-test
npm install(如果已經(jīng)安裝了npm此條命令不必輸入)
npm run dev
看到以上內(nèi)容則說明啟動成功
開發(fā)環(huán)境搭建：
二法瑟、部署編譯
1冀膝、項目路徑下vue-test輸入命令npm run build執(zhí)行打包
命令執(zhí)行完畢后，你可以看到你的項目下生成了一個dist文件夾
2霎挟、網(wǎng)上下載nginx,下載地址http://nginx.org/en/download.html,下載時候一定要注意自己的環(huán)境是windows還是linux環(huán)境窝剖，以免下錯版本，解壓下載好的nginx文件
3酥夭、配置部署赐纱，編輯nginx/conf 下的nginx.conf,修改如下圖
4、啟動nginx熬北。命令窗口cd 進入nginx安裝目錄疙描，注意，一定要進來nginx下的conf文件的上級目錄讶隐，否則系統(tǒng)找不到nginx起胰，將會報錯，不能正確啟動nginx
進入該路徑巫延，在命令行輸入
start nginx效五，然后通過瀏覽器訪問http://127.0.0.1:8080/訪問地消。5、nginx停止命令：
nginx -s quitnginx重啟命令：
nginx -s reload
