基于 Vue2.0 + Element 的单页面可视化开发实践

需求

项目迭代,要重构出一个可供用户操作的,可自由选择模板,可定制内容的页面。相当于这个单页面上最终展示的所有内容,都是由用户自己去定制完成的。
细想之后觉得使用 Vue 来做比较合适,因为页面上大部分操作都可理解为是对总体数据的再排序编辑。下边是记录的开发过程中一些相对关键的问题。

Vue 原始数据的深复制

由于 JS 对象的引用类型特点,在一些不需要双向绑定数据的时候,需要通过深拷贝原始的数据对象来暂存数据,即用 JSON.parse(JSON.stringify(…)) 的方式复制一份数据来进行操作。一般情况下组件间的数据干扰等情况都是由于此问题导致的。

默认数据与已编辑数据的分离

最开始做的时候未考虑到这个问题,使用了简单粗暴的方法调取默认数据,即在进入页面的时候复制一份数据充当默认数据。之后发现这个会导致用户操作数据后默认数据也跟着改变的问题。
良好的解决方法就是相互分离,全部都是独立请求。

Element 的 Dialog 对话框监听

Dialog 方面,由于目前 Element 2.0版本是在页面加载时直接将需要用到的所有 Dialog 生成好然后 hide 掉,切换状态时只是执行了 show/hide 操作,考虑到复用性问题,并非销毁及重新生成,所以在数据的监听更新上会可能存在只有首次才能触发到的问题,处理办法之一就是监听影响对话框显示隐藏的属性,如官方示例中的 dialogVisible ,进而执行对话框显示时的数据更新等操作。

本地开发的数据请求跨域问题

一方面可通过 webpack-dev-server 添加配置 disableHostCheck: true 来修改它的默认查找 hostname 的行为。也可以配置config > index.js 下 proxyTable 来解决此问题。

1
2
3
4
5
6
7
8
9
proxyTable: {
'/api': {
target: 'http://api.x.com',
changeOrigin: true,
pathRewrite: {
'^/api': '/api'
}
}
}

另:Vue-CLI 的功能是其使用了 http-proxy-middleware 插件
github:https://github.com/chimurai/http-proxy-middleware

数据的存储调取

使用 localstorage 来存储用于区分身份的 ID,根据不同 ID 使用 axios 来进行服务端的数据请求。
如果牵涉跨域是需要添加 JSONP 模块的。链接:https://github.com/axios/axios/blob/master/COOKBOOK.md#jsonp

待改进

  • 未使用 Vue 懒加载,由于操作逻辑的复杂性,首页所有的 JS 文件将近800 KB ,如果以后迭代功能 JS 文件还可能更大,可能会有更大的 JS 文件,结果可能会导致首次加载等待时间较长,所以理想状态下是考虑加入懒加载,按需加载 JS 提前规划。
  • 未使用 Vuex,目前组件间的数据通讯全都是通过 prop 传参的形式实现的。虽然目前组件间还不存在大范围共享数据的问题,但是引入 Vuex 进行数据处理还是很有必要的。随着项目的复杂化推进目前组件间的传参会越来越显的笨重。

在最后

以上要点是整个首页项目提取出来的一些关键性问题,随着第一个Vue 项目的告一段落,不得不感叹数据驱动型真是简单、便捷、高效。相比之前 jQuery 的查找、绑定 DOM 而后再渲染确实完全没法比。尝试新事物总是让人兴奋不止。

补充中。。。

如有问题,欢迎指正!