<p class="jhl-title"><span class="Apple-converted-space">白驹过隙,时光荏苒
大概去年这个时候写了的一套前端方案,今年此时祭出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、以下对关键代码进行描述解析,下载完整项目,请拉到最底部!
<p class="jhl-title">构建Vue,Fire!
<p class="jhl-item">1、目录结构
(1)、页面结构采用单一结构,分离js、css、vue、路由
(2)、数据仓库结构分离actions、mutations、getters
(1)、第三方样式依赖:阿里iconfont
(2)、第三方js依赖:vue,vue-router,vuex,vuex-router-sync
(3)、路由、数据仓库依赖:/router/index.js,/store/index.js
sync(store,router)
const app = new Vue({
router,store,render: h => h(App)
})
export { app,router,store }
(1)、结合vue-meta实现动态meta
Vue.use(Meta)
let routes = []
routes = routes.concat(home).concat(hotel).concat(login)
export default new Router({
fallback: false,mode: 'history',routes: routes
})
export default new Vuex.Store({
modules: {
config,book,comm,user
}
})
此模块需要注意浏览器兼容配置,参见.babelrc
组件支持:vue-server-renderer
实现原理:请求发起->server.js->服务器生成数据返回->浏览器端接收数据后比对本地生成数据是否一致(虚拟dom),如果是则进行挂载
统一使用axio实现前后端请求,使用cookie注入state方式进行前后端 ssr cookie同步 及相关数据传递
步骤:
1、在路由配置中注入meta
2、在每个页面js中配置metaInfo(使用mixin进行公共管理)
3、在entry-server.js中获取app..$meta(),注入context
4、index.html页面显示meta
思路:结合jquery + css + 原生定时实现
解决此问题在/router/index.js 配置路由时,配置 fallback: false
解决此问题需要使用代理配置客户端请求api接口
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。