# restcloud-frontend-lowcode-component

前端低代码组件库

## 低代码组件开发说明

#### 地址

1. 官网: https://lowcode-engine.cn/

2. 文档地址: https://lowcode-engine.cn/site/docs/guide/quickStart/intro

3. API地址: https://lowcode-engine.cn/site/docs/api/

4. 协议地址: https://lowcode-engine.cn/site/docs/specs/lowcode-spec

5. fusionUI: https://fusion.design/


#### npm搭建步骤

```sh
npm init @alilc/element 项目名称
请选择引擎生态元素类型: 组件/物料
生态元素包名: 项目名称
简要介绍生态元素: 项目名称
作者名: xxx
请选择包模式: react-组件库
```

#### 目录结构

```
项目名称
├── build (项目打包文件夹, 运行npm run lowcode:build命令后自动生成)
│   ├── lowcode
│   │   ├──render (打包后的组件库压缩文件夹)
│   │   ├── assets-dev.json (打包后的低代码引擎的配置: 本地)
│   │   ├── assets-prod.json (打包后的低代码引擎的配置: 线上, 如果有npm库可运行npm publish将包发到npm)
│   │   ├── meta.js (组件库压缩文件)
│   │   ├── view.css (组件库压缩文件)
│   │   └── view.js (组件库压缩文件)
├── lowcode (此文件夹下的文件主要是组件属性设置, 如果没有可运行npm run lowcode:dev命令后自动生成,或手动创建, 此目录下的所有组件只能使用@alifd/next或react原生标签)
├── src (项目代码文件夹)
│   ├── index.js (组件出口文件)
│   └── index.scss (组件样式的源码文件)
├── README.md (组件说明及API)
└── package.json (项目运行命令和依赖版本)

//其他没有说明的文件夹或文件可以忽略, 但尽量不要删除
```

#### 打包后说明(本地)

```js
如果使用本地打包的组件, 可根据以下步骤添加到低代码引擎中
1.执行npm run lowcode:build;
2.进入build/lowcode;
3.复制meta.js、view.css、view.js这三个文件, 到当前目录的render文件夹下;
4.复制整个render文件夹到低代码引擎源码的public文件夹下;
5.调整低代码引擎源码的public/assets.json的packages和components; //对应的代码在build/lowcode/assets-dev.json中, 代码如下图
6.运行低代码引擎后打开左侧组件库就能看到新增的组件
```

#### 打包后说明(线上)

```sh 如果要把组件库发布到线上, 可根据以下步骤添加到npm库并调整低代码引擎源码的配置 1.执行以下命令 npm run lowcode:build npm publish //如果npm没有登录, 请执行npm login进行登录, 并创建对应的npm组件库, 如果有可以不用创建

2.完成以上命令后, 调整低代码引擎源码的public/assets.json的packages和components; //对应的代码在build/lowcode/assets-prod.json中, 代码如下图 ```