# ali-lowcode-components

基于阿里开源低代码平台构建的组件库

## 调试
启动调试

安装paython2.x

```
nvm use 14;
npm install;
npm run lowcode:dev;
```

构建

```
npm run lowcode:build;
```

发布

```
npm publish
```

阿里低代码引擎：https://github.com/alibaba/lowcode-engine

阿里低代码demo：https://github.com/alibaba/lowcode-demo

语雀文档：https://www.yuque.com/lce/doc


## 照葫芦画瓢

### 经验

组件编写完毕后，运行 `npm run lowcode:dev`（或者`lowcode:build`） 会自动在lowcode文件夹下生成和组件同名的一个文件夹，内部有meta.ts，描述了组件的一些配置信息

如果自动生成的meta.ts不满足我们的要求，我们就需要手动进行配置

#### 编写容器

在对应组件的meta.ts中增加如下配置

```ts
  {
    configure: {
      component: {
        isContainer: true,
        nestingRule: {
          parentWhitelist: ["SelfContainer"],
          childWhitelist: ["Text"]
        }
      }
    }
  }
 
```

`isContainer: true` 表示当前这个组件是个容器

`parentWhitelist` 表示该组件可以放置在哪些父组件里

`childWhitelist` 表示该组件内部可以放置哪些组件

#### 设置容器初始子组件

```ts
advanced: {
  initialChildren: [
    { componentName: 'Col' },
    { componentName: 'Col' },
  ]
}
```

这样设置组件在拖拽到页面上后就自动带有了两个`Col`组件


#### 如何将编写好的组件放在demo中运行

运行`npm run lowcode:build`获取物料配置json，在packages中添加lodas和moment两个库：

```json
"packages": [
  {
    "package": "moment",
    "version": "2.24.0",
    "urls": [
      "https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js"
    ],
    "library": "moment"
  },
  {
    "package": "lodash",
    "library": "_",
    "urls": [
      "https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js"
    ]
  },
  {
    "package": "iwhale-lowcode-components",
    "version": "0.1.0",
    "library": "IwhaleLowcodeComponents",
    "urls": [
      "https://unpkg.com/iwhale-lowcode-components@0.1.0/build/lowcode/view.js",
      "https://unpkg.com/iwhale-lowcode-components@0.1.0/build/lowcode/view.css"
    ],
    "editUrls": [
      "https://unpkg.com/iwhale-lowcode-components@0.1.0/build/lowcode/view.js",
      "https://unpkg.com/iwhale-lowcode-components@0.1.0/build/lowcode/view.css"
    ]
  }
],

```

然后将整个物料json复制替换demo项目中node-extended-actions场景下的assets.json中。

接着将路径 https://unpkg.com/iwhale-lowcode-components@0.1.0/ 代理到本仓库启动后的路径即可