白驹过隙，时光荏苒
大概去年这个时候写了angular 结合webpack的一套前端方案，今年此时祭出vue2结合webpack的一套前端方案。
明年的这个时候我又是在做什么...
读在最前面：
1、本文讲述Vue，Webpack 模块化、SEO优化（Vue SSR 服务端同构直出）、全浏览器兼容（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 + 原生定时实现
ie9路由跳转异常
解决此问题在/router/index.js 配置路由时，配置 fallback: false
ie9跨域请求异常
解决此问题需要使用代理配置客户端请求api接口
by：海豚湾-丰