1：安裝node
端開發(fā)框架和環(huán)境都是需要 Node.js ，先安裝node.js開發(fā)環(huán)境，vue的運(yùn)行是要依賴于node的npm的管理工具來實(shí)現(xiàn)，下載https://nodejs.org/en/，安裝完成之后，打開cmd開始輸入命令。（我用的是win10系統(tǒng)，所以需要管理員權(quán)限，右鍵點(diǎn)擊以管理員身份運(yùn)行cmd），不然會出現(xiàn)很多報錯。
2：查看node的版本號
下載好node之后，以管理員身份打開cmd管理工具，，輸入 node -v ，回車，查看node版本號，出現(xiàn)版本號則說明安裝成功。
輸入命令： node -v
3：安裝淘寶npm鏡像
由于npm是國外的，使用起來比較慢，我們這里使用淘寶的cnpm鏡像來安裝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 回車；驗(yàn)證是否安裝成功，在命令輸入vue，出來vue的信息，及說明安裝成功；
輸入命令：cnpm install --global vue-cli
5：建一個新項(xiàng)目
搭建完手腳架之后，我們要開始建一個新項(xiàng)目，這個時候我建議，盡量不要裝在C盤，因?yàn)関ue下載下來的文件比較大，如果要改盤的話，直接輸入D：回車就可以直接改盤
輸入命令：vue init webpack my-project-first
回車，my-project-first是我自己的文件夾的名字，是基于webpack的項(xiàng)目，輸入之后就一直回車，直到出現(xiàn)是否要安裝vue-route，
這個我們在項(xiàng)目要用到，所以就輸入y 回車
6：注意
下面會出現(xiàn)是否需要js語法檢測，這個我們暫時用不到，就可以直接輸入no，后面的都可以直接輸入no，都是我們暫時用不到的
創(chuàng)建完成之后的提示：
打開D盤查看一下，會發(fā)現(xiàn)多了一個剛剛創(chuàng)建的文件夾
7：進(jìn)入項(xiàng)目文件夾
文件夾已經(jīng)下載好了，現(xiàn)在就可以進(jìn)入文件夾，輸入： cd my-project-first 回車進(jìn)入新建的項(xiàng)目。
輸入命令：cd my-project-first
8：在項(xiàng)目里安裝依賴
因?yàn)楦鱾€模板之間都是相互依賴的，所以現(xiàn)在我們要安裝依賴，在項(xiàng)目里輸入以下命令。
輸入命令：cnpm install
9：運(yùn)行
一切環(huán)境依賴安裝準(zhǔn)備就緒，我們來測試一下自己新建的vue項(xiàng)目的運(yùn)行情況，輸入命令：cnpm run dev直接回車。會彈出一個瀏覽器訪問地址默認(rèn)為localhost:8080。（我將地址修改為8081進(jìn)行訪問）
輸入命令：cnpm run dev
10：在瀏覽器輸入localhost:8081
8080是默認(rèn)的端口，要訪問的話，直接在瀏覽器輸入localhost:8080就可以打開默認(rèn)的模板了；（我的電腦上8080端口有需要，被另外一個項(xiàng)目占用，故而使用8081的端口）
在瀏覽器輸入localhost:8081，顯示如下，到此為止，vue開發(fā)環(huán)境搭建完畢。
到這一步為止，可以在瀏覽器里面訪問項(xiàng)目了
我現(xiàn)在要做的是把項(xiàng)目托管在github，電腦沒有開服務(wù)的時候也可以訪問
暫時沒有買服務(wù)器
ctrl+c退出運(yùn)行項(xiàng)目
1：使用npm run build進(jìn)行打包
打包完成顯示
這個時候可以看到項(xiàng)目里面多了一個dist文件夾
2：打開dist/下的index.html
但是所有的js，css，img等路徑有問題是指向根目錄的，
修改config/index.js里的assetsPublicPath的字段，初始項(xiàng)目是/，現(xiàn)在改為./
打開dist底下的index.html文件，修改文件路徑
通過瀏覽器打開，可以訪問
3：新建一個倉庫，將項(xiàng)目上傳到github的倉庫
這里的步驟就不多說了，不會可以查看
本地demo上傳至github五步曲
http://www.itdecent.cn/p/40f48a007c50
完成之后
注意：這里vue為了節(jié)約上傳文件的大小，會將dist文件給禁止上傳了；所以要找到找到vue根目錄下的.gitignore，打開文件刪除掉 /dist/ 。
這樣上傳，才會有dist文件可供訪問：
4：在github上面的項(xiàng)目生成一個網(wǎng)址可以訪問
如果不會，可以從參考這篇文章
在github上面的項(xiàng)目生成一個網(wǎng)址可以訪問
http://www.itdecent.cn/p/a3113a6cb575
此項(xiàng)目生成的網(wǎng)網(wǎng)址
點(diǎn)擊進(jìn)入網(wǎng)址，在網(wǎng)址后面手動輸入，dist/index.html
這個時候，我們創(chuàng)建的項(xiàng)目就托管在github上面了
訪問鏈接：https://wangxiaoting666.github.io/my-project-first/dist/index.html#/
也可以去阿里云上，自己買個域名，解析一下，完美。
原文作者：祈澈姑娘 技術(shù)博客：http://www.itdecent.cn/u/05f416aefbe1
90后前端妹子，愛編程，愛運(yùn)營，文藝與代碼齊飛，魅力與智慧共存的程序媛一枚。
堅(jiān)持總結(jié)工作中遇到的技術(shù)問題，堅(jiān)持記錄工作中所所思所見，對于博客上面有不會的問題，歡迎加入編程微刊qq群：260352626
