[聚合文章] 基于 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…