vue.js使用vue-cli搭建一個SPA項目

WHY

之因此寫這篇如何運用腳手架自動化構建出一個項目的大架構，主要是面向想入門vue的小夥伴。以前，我第一次接觸vue，一直摸不着頭腦，想在網上搜個接地氣的教程都找不到。SO，我以如何搭建結構爲開始，向想入門vue的童鞋們把我僅有的力量貢獻出來，隨後我會持續更新vue如何與ui框架結合使用；在低版本ie如何運用vwjs將其打包爲桌面應用以及我在實際開發的過程當中踩過的各類坑。歡迎你們觀看與互相交流哦。

HOW

話很少說，切入主題

1.首先，你的電腦須要nodejs環境，若是沒有，點擊下面連接去下載吧。

點我進入node官網
https://nodejs.org/en/
安裝完畢以後在命令窗口執行 node -v

若是執行完畢後會出現node的版本號就ok了 v6.10.1

2.安裝腳手架vue-cli

在命令窗口執行 npm install -g vue-cli

安裝完畢以後在命令窗口執行 vue -V -----大寫V哦
若是執行完畢後會出現cli的版本號就ok了

3.在你的項目目錄下初始化一個webpack配置的項目

在命令窗口執行 vue init webpack name -------name是你的項目名稱
執行命令後會有 ?Project name <name> --------輸入項目名稱，回車

`Project description` -----------輸入你的項目描述，回車

Author -----------顧名思義，輸入做者名，回車

Vue build ----------- 必須回車啊
Install vue-router?<y/n> ----------是否須要vue-router,作項目有路由啊，輸入y，回車
Use ESLint to lint your code ?<y/n> --------是否須要ESlint檢驗你的代碼格式，我的建議，若是不太瞭解ESlint，或者你的開發團隊不須要這個東東，最好n，不然他的檢驗標準會讓你很無語，固然，你能夠經過配置去除你不須要的代碼格式校驗，隨你嘍，要就y，不要就n，回車
Setup unit tests with Karma + Mocha? (y/n) ----------是否安裝單元測試，看你的需求嘍，通常狀況沒有就n，回車
Setup e2e tests with Nightwatch(y/n)? -----------是否安裝e2e測試，同上，回車

4.在你新建好的項目目錄下install安裝全部須要的模板

在命令窗口執行npm install-------它會根據package.json文件裏依賴的全部模塊進行安裝，回車以後你就靜靜的wait,其實聽說用yarn會快一點，我在工做中leader要求用yarn，不過倆者用法差很少，有興趣的話能夠去看看哦

5.運行你的項目

在命令窗口執行npm run dev ----如今你的項目就運行起來了

PIC

*注意，必定要在你初始化好的項目下進行操做，不然會有不少WARN，固然，你的構建也會失敗，以前我粗心踩過這個坑。

網頁中有上面的樣子，你就成功啦

github小項目

在工做間隙一直在寫這個小項目，感興趣的小夥伴能夠去clone下來交流指正，記得star哦
git地址 https://github.com/PaiDaXingSWK/elema.git

項目已經完成效果

END

稍後我會帶着想入門vue的童鞋進行深一步的演練，真心但願你們入門vue不會像我以前同樣痛苦，固然，後續我也會在空餘時間完成一個小項目在個人github與你們互相交流,歡迎你們關注，收藏，指正，一塊兒學習交流