vue-broom
vue component config library
Last updated a year ago by sikemz .
ISC · Original npm · Tarball · package.json
$ cnpm install vue-broom 
SYNC missed versions from official npm registry.

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更简单

Current Tags

  • 1.0.6                                ...           latest (a year ago)

7 Versions

  • 1.0.6                                ...           a year ago
  • 1.0.5                                ...           2 years ago
  • 1.0.4                                ...           2 years ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 1
Last Month 9
Dependencies (3)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |