白駒過隙，時光荏苒 大概去年這個時候寫了angular 結合webpack的一套前端方案，今年此時祭出vue2結合webpack2的一套前端方案。 明年的這個時候我又是在做什麼... 讀在最前面： 1、本文講述Vue，Webpack 模塊化、SEO優化、全瀏覽器相容（ie8以上）、圖片輪播等案例方案 ...
白駒過隙，時光荏苒
大概去年這個時候寫了angular 結合webpack的一套前端方案，今年此時祭出vue2結合webpack2的一套前端方案。
明年的這個時候我又是在做什麼...
讀在最前面：
1、本文講述Vue，Webpack 模塊化、SEO優化、全瀏覽器相容（ie8以上）、圖片輪播等案例方案
2、技術點：vue、webpack、es6、vue-server-renderer、sass、autoprefixer、vue-meta、axios
3、閱讀本文，讀者應瞭解Vue、WebPack，有一定的前端基礎
4、此文建立在已有node環境，sass環境，webpack環境下，特此說明
5、以下對關鍵代碼進行描述解析，下載完整項目，請拉到最底部！
構建Vue，Fire！
1、目錄結構
（1）、頁面結構採用單一結構，分離js、css、vue、路由
（2）、數據倉庫結構分離actions、mutations、getters
├─build #webpa構建 │ ├─setup-dev-server.js #開發配置 │ ├─vue-loader.config.js #vue構建配置 │ ├─webpack.base.config.js #基礎配置 │ ├─webpack.client.config.js #客戶端配置 │ ├─webpack.server.config.js #服務端配置 ├─src #項目資源 │ ├─api #網路請求 │ ├─components #組件 │ ├─filter #攔截器 │ ├─router #路由 │ ├─sass #樣式 │ ├─store #數據倉庫 │ ├─util #公共方法 │ ├─views #頁面 │ ├─app.js #入口js │ ├─app.vue #入口頁面 │ ├─entry-client.js #客戶端入口 │ ├─entry-server.js #服務端入口 │ ├─index.html #母頁面 ├─static #靜態資源 ├─server.js #項目啟動入口
2、創建Vue入口文件，app.js
（1）、第三方樣式依賴：阿裡iconfont
（2）、第三方js依賴：vue，vue-router，vuex，vuex-router-sync
（3）、路由、數據倉庫依賴：/router/index.js，/store/index.js
import Vue from 'vue'
import App from './app.vue'
import store from './store';
import router from './router';
import { sync } from 'vuex-router-sync'
import vueLocalStorage from 'vue-localstorage'
Vue.use(vueLocalStorage)
sync(store, router)
const app = new Vue({
router,
store,
render: h => h(App)
})
export { app, router, store }
3、創建路由配置文件，/router/index.js
（1）、結合vue-meta實現動態meta
import Vue from 'vue'
import Router from 'vue-router' import Meta from 'vue-meta' import home from '../views/home' import hotel from '../views/hotel' import login from '../views/login' Vue.use(Router) Vue.use(Meta) let routes = [] routes = routes.concat(home).concat(hotel).concat(login) export default new Router({ fallback: false, mode: 'history', routes: routes })
3、創建數據倉庫配置文件，/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import config from './config'
import book from './book'
import comm from './comm'
import user from './user'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
config,
book,
comm,
user
}
})
要點梳理
es6 + wait/async + 擴展屬性
此模塊需要註意瀏覽器相容配置，參見.babelrc
seo優化思路
組件支持：vue-server-renderer
實現原理：請求發起->server.js->伺服器生成數據返回->瀏覽器端接收數據後比對本地生成數據是否一致（虛擬dom），如果是則進行掛載
網路請求
統一使用axio實現前後端請求，使用cookie註入state方式進行前後端 ssr cookie同步 及相關數據傳遞
動態meta
步驟：
1、在路由配置中註入meta
2、在每個頁面js中配置metaInfo（使用mixin進行公共管理）
3、在entry-server.js中獲取app..$meta()，註入context
4、index.html頁面顯示meta
圖片輪播
思路：結合jquery + css + 原生定時實現，初步嘗試使用vue $nexttick有時差效果不好
ie9路由跳轉異常
解決此問題在/router/index.js 配置路由時，配置 fallback: false
ie9請求異常
解決此問題需要使用代理配置客戶端請求api介面
by：海豚灣-豐
