拿了個以前的專案做練手，用了vue-cli，vue-router，vuex。主要還是想學習一下webpack和單檔案元件的思想。不過程式碼寫得其實挺匆忙，感覺還有很多地方還能改進，元件化思想還是不能很好的掌握。
github地址：https://github.com/fshwc/vuedemo-mpacc

vue-lic和webpack

很久以前我就看了webpack，但是因為還挺新的，大多資源都是英文，所以除我跟著網上做做demo沒實際嘗試過。但是vue我也學到了一定階段，該進入進階階段了。vue-cli其實幫我們構建好一切了，一句vue init webpack-simple vuedemo

//單入口 webpack.config.js
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  }
};

//多入口
module.exports = {
  entry: {
    bundle1: './main1.js',
    bundle2: './main2.js'
 

  },
  output: {
    filename: '[name].js'
  }
};

但是這專案能這麼想，我把首頁做唯一的入口檔案，那麼跳轉的時候我再非同步載入相應的模組，所以這次我只用了一個入口檔案main.js。
當我沒了解清楚的時候，會想把整個專案都打包成一個js啊，那這個js不就很大，載入很慢嗎，但是有一東東叫懶載入，結合 Vue 的 非同步元件 和 Webpack 的 code splitting feature, 輕鬆實現路由元件的懶載入 http://router.vuejs.org/zh-cn/advanced/lazy-loading.html

單檔案元件

頁面上的每個 獨立的 可視/可互動區域視為一個元件;
每個元件對應一個工程目錄，元件所需的各種資源都在這個目錄下就近維護;
每個元件相對獨立，頁面只不過是元件的容器，元件自由組合形成功能完整的介面;
當不需要某個元件，或者想要替換元件時，可以整個目錄刪除/替換。

現在我自認還沒理解好元件化開發，只是把相同功能的元件放在同一個目錄下而已。vuex建議的專案結構。。。http://vuex.vuejs.org/zh-cn/structure.html。不知道這個是不是分太細。。。不過我相信一個專案足夠大的時候，這樣佈局或許會更好~

專案介紹

用vue重構了校內網，頁面跳轉用了vue-router，我還暫時用了下vuex，但是其實這個是多餘的。。。。本來想運用vuex代替連線資料庫查詢後返回資料，但是沒找到合適的運用方式。所以不是每個專案都需要vuex，尤大大也提醒在專案需要的時候再用。等過完年，我看看webpack怎麼結合Express，用vue-resource發起請求，連線資料庫並返回資料，繼續完善~~