tangram 组件品转平台

A Vue.js project

组件市场

平台提供给工程师和产品经理使用，直观的发现现有的组件，支持一键安装。

容器组件

1. 支持灵活的布局方式
2. 给组件提供数据支持

视图组件

1. iView组件和业务组件

视图组件的描述文件

拼装平台的接口描述，组件名称，如何使用和事件描述等。

// 组件描述文件 0.3.0
import {Select, Option, OptionGroup} from 'iview/src/components/select';

export default {
  components: {
    OptionGroup,
    vSelect: Select,
    vOption: Option,
  },
  // input 定义传入的数据、模版
  template: `
  <vSelect v-model="select.model1" @on-change="broadcast" style="width:200px">
      <vOption v-for="item in select.cityList" :value="item.value" :key="item.value">{{ item.label }}</vOption>
  </vSelect>
  `,
  // output 事件描述
  events: [
    // target: 插槽名称, name: 事件名称, data: 组件数据
    { target: 'select', name: 'on-change', data: {} },
    { target: 'select', name: 'on-select', data: {} },
    // ...
  ],
};

拼装平台

本质上是页面的框架，包含组件的插槽和消息总线，权限验证，最终拼装成单个页面组件，偏于集成到不同的项目中。