之前單獨看webpack配置，真是看不懂，自己寫配置文件也不會，折騰了好久也沒弄出來，最后也放棄了。怎么那么笨。。。23333。后來無意間找到了mint-ui組件庫，然后照着文檔開始寫。。。現在練了幾個項目了，還是懵懵懂懂。這是第一個練習的小項目，寫出來記錄下，歡迎大家提意見，一起學習一起討論。
項目有三部分，一個列表頁、一個詳情頁、一個結果頁，因為是單頁應用，所有頁面跳轉都是用路由完成的。
一、安裝webpack
推薦：https://webpack.js.org/configuration/ webpack英文指南
http://blog.csdn.net/a1104258464/article/details/51914450 webpack令人困惑的地方
npm install webpack -g
二、構建項目
1、安裝vue-cli
npm install -g vue-cli
2、 新建一個文件夾放工程用，終端命令進入該文件 cd 目錄路徑后，執行命令
vue init webpack-simple zbsq(項目名) 創建一個結構簡單的單頁應用
vue init webpack zbsq(項目名) 創建一個結構復雜的單頁應用
會有一些初始化的設置，如下
3、安裝項目依賴，一定要從官方倉庫安裝，npm 服務器在國外所以這一步安裝速度會很慢，國內鏡像cnpm會缺少依賴
npm install
創建后目錄結構如下：
4、啟動項目
npm run dev
打開以下頁面就成功了
5、開始增加自己的文件，目錄結構如下，忽略紅線的文件，dist是打包后生成的，不需要新建，下面兩個是我自己開發時測試用的，components存放組件，common存放了公用的組件頭部和底部，router存放路由配置文件，store是vuex（狀態管理機制）文件，兄弟間通信---簡單場景用bus，復雜場景用vuex
6、可以先看下webpack的配置文件，可以看出單頁應用只有一個入口文件main.js
在看下package.json文件，安裝的依賴都在這里顯示
照着mint-ui的文檔，下面要引入mint-ui了以及安裝各種所需要的loader，開發時也不知道都需要什么，需要的時候擦安裝或者哪報錯了就安裝
最后是這樣的，有的沒用，還沒刪除，最好是刪除了吧
7、 App.vue頁面，把公用的頭部和底部抽出來，中間的部分用路由切換顯示頁面
8、main.js
9、路由配置文件，默認首先打開index頁面
