vue-cli構建一個簡單的單頁應用

　　以前單獨看webpack配置，真是看不懂，本身寫配置文件也不會，折騰了很久也沒弄出來，最後也放棄了。怎麼那麼笨。。。23333。後來無心間找到了mint-ui組件庫，而後照着文檔開始寫。。。如今練了幾個項目了，仍是懵懵懂懂。這是第一個練習的小項目，寫出來記錄下，歡迎你們提意見，一塊兒學習一塊兒討論。

　　項目有三部分，一個列表頁、一個詳情頁、一個結果頁，由於是單頁應用，全部頁面跳轉都是用路由完成的。

1、安裝webpack

推薦：https://webpack.js.org/configuration/      webpack英文指南 

http://blog.csdn.net/a1104258464/article/details/51914450   webpack使人困惑的地方

npm install webpack -g

2、構建項目

一、安裝vue-cli

npm install -g vue-cli

二、 新建一個文件夾放工程用，終端命令進入該文件 cd 目錄路徑後，執行命令

vue init webpack-simple zbsq(項目名)    建立一個結構簡單的單頁應用

vue init webpack zbsq(項目名)     建立一個結構複雜的單頁應用

　 會有一些初始化的設置，以下

　

 三、安裝項目依賴，必定要從官方倉庫安裝，npm 服務器在國外因此這一步安裝速度會很慢，國內鏡像cnpm會缺乏依賴

npm install

　建立後目錄結構以下：

四、啓動項目

npm run dev

　　打開如下頁面就成功了

五、開始增長本身的文件，目錄結構以下，忽略紅線的文件，dist是打包後生成的，不須要新建，下面兩個是我本身開發時測試用的，components存放組件，common存放了公用的組件頭部和底部，router存放路由配置文件，store是vuex（狀態管理機制）文件，兄弟間通訊---簡單場景用bus，複雜場景用vuex

 六、能夠先看下webpack的配置文件，能夠看出單頁應用只有一個入口文件main.js

 

在看下package.json文件，安裝的依賴都在這裏顯示

照着mint-ui的文檔，下面要引入mint-ui了以及安裝各類所須要的loader，開發時也不知道都須要什麼，須要的時候擦安裝或者哪報錯了就安裝

最後是這樣的，有的沒用，還沒刪除，最好是刪除了吧

七、 App.vue頁面，把公用的頭部和底部抽出來，中間的部分用路由切換顯示頁面

八、main.js

九、路由配置文件，默認首先打開index頁面