vue-layout-diy

基于vue和flex的自定义布局，点击查看demo。

S前缀为Sunflower简写，我们团队的命名空间。

项目步骤

1. 使用[email protected]初始化项目；

  vue init webpack vue-layout-diy

2. 根据个人/团队代码规范，配置eslint；

3. 安装vuex；

4. 完成基于flex布局的组件SGrid SGridItem；

5. 引入Element，完成SEmpty默认显示块；

异步组件配合代码分离时:

若使用插件的形式，s-empty在dev模式下渲染正常，在buid模式下无法渲染。ISSUE#1
在main.js中通过Vue.component直接注册则正常。

为了方便在GithubPage展示效果，将build后dist中的结果拷贝至demo目录，并修改资源路径。
由于demo并非部署在Web服务器根目录下，所以分离的异步js文件找不到。ISSUE#2

需要修改config/index.js中的build.assetsPublicPath为./，.gitignore中取消忽略dist目录，将dist目录作为demo页。

6. Vuex中定义默认数据结构，再次封装SGrid SGridItem为SLayout，实现初始化布局；

7. 实现拆分块功能；

   1. 方向随机1:1拆分;
   2. 设置拆分方向和比例；
      1. 注意dialog-split中.sync修饰符的用法；
      2. dialog-split传递prop: show时，注意单向数据流的问题：

         在DialogSplit中，若定义一个本地的data属性并将prop: show用做其初始值，那么这个data永远是false，Dialog永远不会被打开，所以需要用这个prop的值来定义一个计算属性visible，此时visible将会跟prop: show的值保持同步。在el-dialog的prop: visible中，我们不能使用修饰符.async，因为这个修饰符会给el-dialog添加update:visible事件监听，关闭el-dialog会触发此事件，也就是会强制修改刚才添加的计算属性visible，这是绝对不允许的。在el-dialog的close事件中，我们触发了dialog-split的update:show事件，更新了data: show的值，那么DialogSplit的计算属性visible也会相应更新。

8. 添加示例业务组件，完成选择内容功能。