基于 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 来解决此问题。

proxyTable: {
  '/api': {
    target: 'http://api.x.com',
    changeOrigin: true,
    pathRewrite: {
      '^/api': '/api'
    }
  }
}
复制代码

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

数据的存储调取

使用 localstorage 来存储用于区分身份的 ID，根据不一样 ID 使用 axios 来进行服务端的数据请求。 若是牵涉跨域是须要添加 JSONP 模块的。连接：github.com/axios/axios…

待改进

• 未使用 Vue 懒加载，因为操做逻辑的复杂性，首页全部的 JS 文件将近800 KB ，若是之后迭代功能 JS 文件还可能更大，可能会有更大的 JS 文件，结果可能会致使首次加载等待时间较长，因此理想状态下是考虑加入懒加载，按需加载 JS 提早规划。
• 未使用 Vuex，目前组件间的数据通信全都是经过 prop 传参的形式实现的。虽然目前组件间还不存在大范围共享数据的问题，可是引入 Vuex 进行数据处理仍是颇有必要的。随着项目的复杂化推动目前组件间的传参会愈来愈显的笨重。

在最后

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

补充中。。。

若有问题，欢迎指正！原博地址：tmac.wang/2017/11/%E5…