1：安裝node
端開發(fā)框架和環(huán)境都是需要 Node.js 傻挂，先安裝node.js開發(fā)環(huán)境鸯隅，vue的運行是要依賴于node的npm的管理工具來實現(xiàn)，下載https://nodejs.org/en/清女，安裝完成之后玩徊，打開cmd開始輸入命令。（我用的是win10系統(tǒng)喻喳，所以需要管理員權(quán)限另玖，右鍵點擊以管理員身份運行cmd），不然會出現(xiàn)很多報錯表伦。
2：查看node的版本號
下載好node之后谦去，以管理員身份打開cmd管理工具，蹦哼，輸入 node -v 鳄哭，回車，查看node版本號纲熏，出現(xiàn)版本號則說明安裝成功妆丘。
輸入命令： node -v
3：安裝淘寶npm鏡像
由于npm是國外的，使用起來比較慢局劲，我們這里使用淘寶的cnpm鏡像來安裝vue.
淘寶的cnpm命令管理工具可以代替默認的npm管理工具勺拣。
輸入命令：npm install -g cnpm --registry=https://registry.npm.taobao.org
4：安裝全局vue-cli腳手架
淘寶鏡像安裝成功之后，我們就可以全局vue-cli腳手架鱼填，輸入命令：cnpm install --global vue-cli 回車药有；驗證是否安裝成功，在命令輸入vue苹丸，出來vue的信息愤惰，及說明安裝成功；
輸入命令：cnpm install --global vue-cli
5：建一個新項目
搭建完手腳架之后赘理，我們要開始建一個新項目宦言，這個時候我建議，盡量不要裝在C盤商模，因為vue下載下來的文件比較大奠旺，如果要改盤的話，直接輸入D：回車就可以直接改盤
輸入命令：vue init webpack my-project-first
回車施流，my-project-first是我自己的文件夾的名字凉倚，是基于webpack的項目，輸入之后就一直回車嫂沉，直到出現(xiàn)是否要安裝vue-route稽寒，
這個我們在項目要用到，所以就輸入y 回車
6：注意
下面會出現(xiàn)是否需要js語法檢測趟章，這個我們暫時用不到杏糙，就可以直接輸入no慎王，后面的都可以直接輸入no，都是我們暫時用不到的
創(chuàng)建完成之后的提示：
打開D盤查看一下宏侍，會發(fā)現(xiàn)多了一個剛剛創(chuàng)建的文件夾
7：進入項目文件夾
文件夾已經(jīng)下載好了赖淤，現(xiàn)在就可以進入文件夾，輸入： cd my-project-first 回車進入新建的項目谅河。
輸入命令：cd my-project-first
8：在項目里安裝依賴
因為各個模板之間都是相互依賴的咱旱，所以現(xiàn)在我們要安裝依賴，在項目里輸入以下命令绷耍。
輸入命令：cnpm install
9：運行
一切環(huán)境依賴安裝準備就緒吐限，我們來測試一下自己新建的vue項目的運行情況，輸入命令：cnpm run dev直接回車褂始。會彈出一個瀏覽器訪問地址默認為localhost:8080诸典。（我將地址修改為8081進行訪問）
輸入命令：cnpm run dev
10：在瀏覽器輸入localhost:8081
8080是默認的端口，要訪問的話崎苗，直接在瀏覽器輸入localhost:8080就可以打開默認的模板了狐粱；（我的電腦上8080端口有需要，被另外一個項目占用胆数，故而使用8081的端口）
在瀏覽器輸入localhost:8081肌蜻，顯示如下，到此為止必尼，vue開發(fā)環(huán)境搭建完畢蒋搜。
到這一步為止，可以在瀏覽器里面訪問項目了
我現(xiàn)在要做的是把項目托管在github胰伍，電腦沒有開服務(wù)的時候也可以訪問
暫時沒有買服務(wù)器
ctrl+c退出運行項目
1：使用npm run build進行打包
打包完成顯示
這個時候可以看到項目里面多了一個dist文件夾
2：打開dist/下的index.html
但是所有的js，css酸休，img等路徑有問題是指向根目錄的骂租，
修改config/index.js里的assetsPublicPath的字段，初始項目是/斑司，現(xiàn)在改為./
打開dist底下的index.html文件渗饮，修改文件路徑
通過瀏覽器打開，可以訪問
3：新建一個倉庫宿刮，將項目上傳到github的倉庫
這里的步驟就不多說了互站，不會可以查看
本地demo上傳至github五步曲
http://www.reibang.com/p/40f48a007c50
完成之后
注意：這里vue為了節(jié)約上傳文件的大小，會將dist文件給禁止上傳了僵缺；所以要找到找到vue根目錄下的.gitignore胡桃，打開文件刪除掉 /dist/ 。
這樣上傳磕潮，才會有dist文件可供訪問：
4：在github上面的項目生成一個網(wǎng)址可以訪問
如果不會翠胰，可以從參考這篇文章
在github上面的項目生成一個網(wǎng)址可以訪問
http://www.reibang.com/p/a3113a6cb575
此項目生成的網(wǎng)網(wǎng)址
點擊進入網(wǎng)址容贝，在網(wǎng)址后面手動輸入，dist/index.html
這個時候之景，我們創(chuàng)建的項目就托管在github上面了
訪問鏈接：https://wangxiaoting666.github.io/my-project-first/dist/index.html#/
也可以去阿里云上斤富，自己買個域名，解析一下锻狗，完美满力。
原文作者：祈澈姑娘 技術(shù)博客：http://www.reibang.com/u/05f416aefbe1
90后前端妹子，愛編程轻纪，愛運營油额，文藝與代碼齊飛，魅力與智慧共存的程序媛一枚桐磁。
堅持總結(jié)工作中遇到的技術(shù)問題悔耘，堅持記錄工作中所所思所見，對于博客上面有不會的問題我擂，歡迎加入編程微刊qq群：260352626
