瑞辉低代码平台库

自0.2之后，rh-lcdp库依赖于rh-base:~15.0.11

层级结构

rh-lcdp库的模块层级由上往下，如下所示：

• rh-lcd/page;
• rh-lcd/designer;
• rh-lcd/renderer;
• rh-lcd/component;
• rh-lcd/shared;
• rh-lcd/editor;
• rh-lcd/core;
• rh-lcd/data;
• rh-lcd/model;

安装指南

完全功能

完全功能包括但不限于设计器页面、预览页面和资源管理等诸多页面，且由于完整功能需要打包monaco-editor资源，所以打包体积会增大80MB左右；

1. 安装rh-lcdp库

npm install rh-lcdp

2. 在angular.json或project.json(如果使用了nx)中添加资源和样式文件

"assets":
  // ***
  {
    "glob": "**/*",
    "input": "./node_modules/monaco-editor",
    "output": "assets/monaco-editor"
  },
  {
    "glob": "**/*",
    "input": "./node_modules/rh-lcdp/assets/",
    "output": "/assets/"
  }
  // ***
]

• 对应的全局样式文件

"styles": [
   "node_modules/rh-lcdp/lcdp.min.css"
 ],

如果想要在自身的项目中使用lcdp的样式，则需要在style.less中导入：

// 引入库中的样式
@import '~rh-lcdp/lcdp.min.css';

3. 在项目中引入页面模块

import { RhLcdpPageModule } from 'rh-lcdp/page';

仅页面预览功能

1. 安装rh-lcdp

npm install rh-lcdp

2. 在angular.json或project.json(如果使用了nx)中添加部分资源和样式文件,(对比完全功能，不需要引入monaco-editor资源，打包后整体体积大大减少)

• 资源文件

"assets": [
  // ***
  {
    "glob": "**/*",
    "input": "./node_modules/rh-lcdp/assets/",
    "output": "/assets/"
  }
  // ***
]

• 样式文件

"styles": [
    "node_modules/rh-lcdp/lcdp.less"
 ],

如果想要在自身的项目中使用lcdp的样式，则需要在style.less中导入：

// 引入库中的样式
@import '../../../libs/rh-lcdp/lcdp.less';

3. 在项目中引入页面模块

import { RhLcdpPageModule } from 'rh-lcdp/page';

4. 在前端app.module.ts文件中初始化InteractionService和自定义selector