vue-broom

Intro

Vue.js提供了组件化开发方式，对于页面开发变成一个个组件的组合。Vue不会对组件进行任何约束，这使得大家可以从上到下边想边写。这对于一个大的开发团队来说：1.代码复用性差 2. 开发前，没有设计，导致文件数量多，代码冗余 3. 开发效率低。

目前出现了很多iVew，ElementUI的组件库，但对于代码组织的vue库很少。我现在还没找到，如果你发现有，请issue我。

Demo

demo01

Documentation

broom 的基本思想是重新认识组件以及组件的组合方式。 组件： 页面上能够展示的一块区域。

• 不依赖布局顺序，和父子，兄弟解耦
• 明确声明的接口和属性,对数据具备良好的容错性
• 对同级组件的通信配置

以标准的html组件radio为例

1. 一个radio可以放在页面的任何位置，放在不同的父子之间和兄弟之间。
2. 明确的value属性，
3. 选择一个radio，与之同名的radio取消选择

配置数据交互

{
    "name": "pgc编目",
    "author": "lmz",
    "components":[
        {
            "component": "portal-tab",
            "model": "tab",
            "props": "showTab"
        },
        {
            "component": "portal-search",
            "out": "search_param"
        },
        {
            "component": "portal-loading",
            "in":["showLoading"]
        },
        {
            "component": "portal-videolist",
            "in": ["search_param"],
            "out": "showLoading"
        }
    ]

}

配置布局

{
    "name": "ugc编目",
    "author": "lmz",
    "components":[
        {
            "component": "portal-tab",
            "slot":["basic","advance"],
            "basic":{
                "components":[
                    {
                        "component": "portal-input",
                        "model": "file_name",
                        "rules": "required|maxCharLength:30",
                        "title": "标题",
                        "required": true,
                        "clazz": {
                            "input": "w330"
                        }
                    }
                ]
            },
            "advance":{
                "components":[
                    {
                        "component": "portal-radio",
                        "model": "rotate",
                        "title": "视频方向",
                        "contents": [
                            {"text":"自动识别","value":"1"},
                            {"text":"左转90度","value":"2"},
                            {"text":"右转90度","value":"3"},
                            {"text":"垂直翻转","value":"4"}
                        ]
                    }
                ]
            }
        }
    ]
}

Questions

为什么使用json，而不使用template

有两种考虑：

1. 同为什么使用json，而不使用xml作为数据标准
2. vue中操作json来render vnode更简单