Dplus-Cli 组件开发工具

基于 Vue 的 Dplus 平台组件开发环境，集成快速创建组件、打包

安装

node环境建议采用 14.x

# 使用 npm 安装 CLI
$ npm install -g @dplusteam/cli @dplusteam/vue-builder

内置指令

• @dplusteam/cli
  • create 创建项目 (通过d+平台下载开发工具包后无需再创建工程)
  • dev 项目本地调试
  • generate 新增组件
  • pack 组件打包
  • help 帮助

指令options说明

• create： -e, --empty （创建不需要模版的工程）
• dev: -c, --component (直接进入某组件的调试页面)
• pack: -nc, --no-console (打包后是否保留日志)

打包多个组件

dplus pack comp1 comp2 comp3

约定目录结构

├── package-lock.json
├── package.json
└── src
    └── components                                 // 组件目录
        ├── text                                   // 第一个组件
        │   ├── config                             // 组件配置文件目录
        │   │   ├── main.data.json                 // 数据文件
        │   │   └── main.json                      // 配置文件
        │   ├── index.vue                          // 组件入口
        │   └── styles                             // 样式文件
        │   └── assets                             // 资源
        └── text1                                  // 第二个组件
            ├── config
            │   ├── main.data.json
            │   └── main.json
            ├── index.vue
            └── styles

组件属性配置和数据

组件全局配置 main.json

{
  "base": {
    "name": "文本框组件",    //组件名称
    "module_name": "text", //组件标识
    "version": "1.0.0",    //版本
  },
  "width": 200,           //默认宽度
  "height": 70,           //默认高度
  "interaction": [{       // 交互属性配置
    "command": "click",   // 事件命令标识
    "text": "点击事件"     // 事件名称
  }],
  "interactionType":1, //交互类型 默认为0（可省略该字段） 复杂为1，具体见图片所示

  /**
   * option为右侧面板样式配置项
   * 控件基于element-ui（https://element.eleme.io/#/zh-CN）
   * 脚手架内部已经实现控件的渲染，使用者只需要配置控件的描述语言
   */
  "option": [{
    type: "number",          //控件类型：number数值输入框
    name: "fontSize",       //控件id,需保证在当前数组的唯一性
    displayName: "文本大小", //控件名称，在页面上显示
    value: 16,             //控件默认值
  },...]
}

• 简单交互界面 参考D+平台文本框组件的交互形式

• 复杂交互界面 参考D+平台选项卡组件的交互形式

组件数据配置 main.data.json

{
  "data": [
    {
      "text": "Dplus-Cli"
    }
  ],
  /**
   * fields 非必填项
   * 用于组件接入D+平台后的开启数据映射时使用
   * 自定义映射字段和备注
   * 举例：将text字段映射成value字段，备注为“值”
   */
  "fields": [
     {
      "key": "value",
      "remark": "值"
    }
  ]
}

右侧面板配置控件描述格式

总体格式

| 字段 | 描述 | 是否必选 | | --- | --- | --- | | type | 组件类型 | 是 | | name | 字段名 | 是 | | displayName | 显示名 | 是 | | value | 数值 | 是 | | attrs | 额外属性，element-ui官网下该组件的 Attributes 都可以使用；Select 选择器还额外具备options字段 | 否 | | children | collapse和switch-collapse类型具备此字段 | 否 |

type字段总览

| 配置控件类型 | type字段名 | value值类型 | | --- | --- | --- | | boolean开关 | boolean | boolean | | input输入框 | input | string | | select选择器 | select | 自定义 | | number数值输入框 | number | number | | color颜色选择器 | color | rgb/rgba/十六进制 | | range区间滑动条 | range | number | | collapse折叠面板 | collapse | - | | switch-collapse开关折叠面板 | switchCollapse | boolean |

boolean开关

示例

{
  "type": "boolean",
  "name": "isShow",
  "displayName": "是否显示",
  "value": true
}

input输入框

示例

{
  "type": "input",
  "name": "title",
  "displayName": "标题",
  "value": "这是个标题"
}

select 选择器

attrs属性特有字段options：

attrs:{
  options:[{
    value: '选项1',
    label: '黄金糕'
  }, {
    value: '选项2',
    label: '双皮奶'
  }, {
    value: '选项3',
    label: '蚵仔煎'
  }}]
}

示例

{
  "type": "select",
  "name": "position",
  "displayName": "位置",
  "value": "top",
  "attrs":{
    "options":[{
      "value": "top",
      "label": "上"
    }, {
      "value": "bottom",
      "label": "下"
    }]
  }
}

number数值输入框

示例

{
    "type": "number",
    "name": "fontSize",
    "displayName": "字体大小",
    "value": 16
}

color 颜色选择器

示例

{
    "type": "color",
    "name": "fontColor",
    "displayName": "文字颜色",
    "value": "#FFFFFF"
}

range 区间滑动条

示例

{
    "type": "range",
    "name": "opacity",
    "displayName": "不透明度",
    "value": 1
}

collapse 折叠面板

示例

{
  "type": "collapse",
  "displayName": "柱体设置",
  "children":[
    {
      "type": "range",
      "name": "opacity",
      "displayName": "不透明度",
      "value": 1
    },
    {
      "type": "color",
      "name": "fontColor",
      "displayName": "文字颜色",
      "value": "#FFFFFF"
    }

  ]
}

switch-collapse 开关折叠面板

示例

{
  "type": "switchCollapse",
  "name": "showbar",
  "displayName": "柱体设置",
  "value": true,
  "children":[
    {
      "type": "range",
      "name": "opacity",
      "displayName": "不透明度",
      "value": 1
    },
    {
      "type": "color",
      "name": "fontColor",
      "displayName": "文字颜色",
      "value": "#FFFFFF"
    }

  ]
}