前面的话 不论是官网教程,还是官方DEMO,都是从0开始的服务端渲染配置.对于现有项目的服务器端渲染SSR改造,特别是基于vue cli生成的项目,没有特别提及.本文就小火柴的前端小站这个前台项目进行SSR改造 效果 下面是经过SSR改造后的前端小站xiaohuochai.cc的网站效果,github源码地址 概述 [定义] 服务器渲染的Vue应用程序被认为是"同构"或"通用",因为应用程序的大部分代码都可以在服务器和客户端上运行 [优点] 与传统SPA相比,服务器…

前言 最近由于公司需要,需要写一个相对来说比较大型的后台管理系统.为了保证管理系统操作体验较为舒适并且项目后期益于维护,最后决定基于VUE全家桶来开发一个高度组件化的单页SPA应用. 技术选型 vue:进行数据绑定以及开发组件 vue-router: 处理页面路由 vuex: 处理各组件间的通讯 vue-resource:处理HTTP请求 element-ui:使用UI框架中部分UI组件进行快速开发 项目创建 首先我们需要保证自己电脑安装有Node运行环境 打开命令行工具,输入下面指令进行全局安…

1.原因 ssr 会在后端执行组件的 componentWillMount 以及在它这个生命周期之前的生命周期 也就是说 ssr 阶段是不会执行 componentDidMount 方法的 当你在 componentWillMount 之前当生命周期里面调用 window / localstorage 全局对象的时候, 它其实是在服务器上面执行等,因为 window / localstorage 是浏览器的属性对象. 所以在 服务器端 跑的时候,就会出现没有定义的错误. 2.解决方案 个人觉得可…

本文的目标是通过下文介绍的适配方案,使用vue或react开发移动端及H5的时候,不需要再关心移动设备的大小,只需要按照固定设计稿的px值布局,提升开发效率. 下文给出了本人分别使用create-react-app搭建的react(create-react-app)项目和使用vue-cli 2.x 搭建的vue项目中的 亲测可用 配置方案. px2rem或postcss-px2rem 在移动端中,为了设配不同的设备,通常使用rem来做适配. rem是通过根元素进行适配的,网页中的根元素指的是<h…

这次遇到的一个问题困扰了我很久很久,大致就是vue路由的addRoutes方法的使用,每次在调用了这个之后router对象中并没有将路由添加进去,接下来,我一步一步的分析原因及解决方法(个人见解,仅供参考) (1)先看看我的失败的代码 ​ store.getters.addRouters我存在vuex中,但是实际是存于session中的,所以刷新后是不会丢失数据的 ​ 在app.vue的mounted输出this.$router对象,发现options.routes数组并没有将动态路由添加成功,…

(一)关于computed修改data里变量的值 问题:computed里是不能直接修改data里变量的值,否则在git commit 时会报错 解决:在computed里使用get和set来进行获取和修改data变量,(参考下图) ​ (二)computed里监听数组的变化 问题:computed里返回一个数组,但是在进行交换数组里两个元素的位置不能触发computed的更新(视图不能更新) 解决:使用this.$set修改数组的值 this.$set(arr,index,val),arr是指…

一.流程图效果 最近一段时间在研究go.js,它是一款前端开发画流程图的一个插件,也是一个难点,要说为什么是难点,首先,它是依赖画布canvas知识开发.其次,要依赖于内部API开发需求,开发项目需求的时候就要花费大量的时间去熟悉go.js的API,然后才能进行开发.话不多说,我就先把我最近做的项目案例效果图展示一下: 看到效果图大家可能会想这个挺简单的,会想没什么难点,其实真正开发的时候才会知道的.才会领悟到. 二.为什么选go.js流程图插件去开发项目? 在项目开发一期的时候我用的不是go.…

1.mouseup事件丢失 查看了网上资料,造成mouseup事件丢失有两种原因: (1)触发了浏览器的drag事件 (2)由于鼠标离开了操作的区域,触发了mouseleave事件导致mouseup丢失 解决办法: 针对第一种情况:阻止系统默认操作防止drag被触发 在@mouseup或v-on:mouseup后面加上.prevent阻止默认操作,和.stop阻止事件冒泡(此方法是根据网上原生js改写,还没有实践) 同时记录下网上的的原生解决办法 ​ 第二种情况: 由于鼠标是移出了操作范围而丢失…

继前段时间西安电面之后顺利拿到了OFFER,今天(5月2号)是我入职第一天,在简短的内部培训了一上午后,前端leader让我先了解下什么是vue的服务器端渲染(SSR). SSR,英文全称叫 Server side rendering ,国人叫它服务器端渲染. 首先听到这个名词,我头脑就有点眩晕.咱们还是先去官网了解下SSR的定义: Vue.js 可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序.这种在服务器…

直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 React 的服务端渲染应用框架 Next.js 几小时后,一个基于 Vue.js 的服务端渲染应用框架应运而生,与 Next.js 异曲同工,这就是 Nuxt.js 一.快速模板 在已经安装了 vue-cli 的前提下,可以快速创建一个 nuxt 的项目模板 vue init nuxt-commu…