WeComponents 是一个基于通用组件语言规范 (CLS) 实现的 Vue.js 声明式组件库，写完 JSON 就做好了页面，让开发更简单。
设计思想上，以实现通用组件语言规范 CLS 为核心，即“将所有组件抽象为统一模型”，详见通用组件语言规范。
数据驱动
- UI 也是数据
- 以数据结构描述组件
- 以组件描述页面
开发者友好
- 低门槛，学习了一种组件语言，就学会了整个组件库的使用
- 易理解，易记忆，易使用
语义化
- 符合一般人对功能的认知
- 合适的场景，合适的支持
目前主要包含表单、列表、图表三类组件的实现，更多请查看说明文档。
以 Vue.js 为例：
// 1. 引入组件库importWeComponentsfrom'@weadmin/wecomponents';// 2. 声明页面组件letpageFields=[{component: 'input',label: '标题'}];// 3. 数据绑定exportdefault{data(){return{// 初始化组件库page: newWeComponents(this,pageFields)}}};以一个常见的查询列表需求为例。完整代码见demo工程。
需求背景：提供一个搜索框，点击查询按钮后，展示结果列表，需要支持翻页。
效果展示：
组件声明：
[{"component": "container","items": [{"component": "form","attributes": {"layout": "row"},"items": [{"name": "search","label": "搜索","component": "input","attributes": {"placeholder": "输入游戏名称进行搜索"}},{"label": "查询","component": "submit","attributes": {"type": "primary"},"events": {"submitEventName": "searchTable"}}]},{"id": "list","component": "table","attributes": {"placeholder": "暂无数据","pagination": "default"},"items": [{"name": "icon","label": "游戏图标","attributes": {"width": 60,"textAlign": "center"},"valueFilterName": "iconFilter"},{"name": "name","label": "游戏名称"},{"name": "size","label": "大小","attributes": {"textAlign": "right"},"valueFilterName": "sizeFilter"},{"name": "intro","label": "简介"},{"label": "操作","name": "option","valueFilterName": "optionFilter"}],"value": [{"icon": "http://mmocgame.qpic.cn/wechatgame/HurH4elIxzLGX0FjtUic0kcQtloVbicTO6LVjWicWYwrIvUBSsve2KWz40jS2MFM5Zu/0","name": "王者荣耀","size": 3675556864,"intro": "爽快超神，腾讯5v5英雄公平对战手游"},{"icon": "https://mmocgame.qpic.cn/wechatgame/duc2TvpEgSTLicunKH0MgcMLa8jicfvBvEXiaNAIReHzQJxhsibvgbVpIKtibgV8UcMEO/0","name": "和平精英","size": 3898905600,"intro": "大吉大利，腾讯光子自研军事竞赛体验"}]}]}]如果你有好的意见或建议，欢迎给我们提 Issues 或 Pull Requests。 详见：CONTRIBUTING.md
腾讯开源激励计划 鼓励开发者的参与和贡献，期待你的加入。
所有代码采用 MIT License 开源，可根据自身团队和项目特点 fork 进行定制。