0.2.0 • Published 2 years ago
@iwhalelowcode/iwhale-lowcode-components v0.2.0
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中增加如下配置
{
configure: {
component: {
isContainer: true,
nestingRule: {
parentWhitelist: ["SelfContainer"],
childWhitelist: ["Text"]
}
}
}
}
isContainer: true
表示当前这个组件是个容器
parentWhitelist
表示该组件可以放置在哪些父组件里
childWhitelist
表示该组件内部可以放置哪些组件
设置容器初始子组件
advanced: {
initialChildren: [
{ componentName: 'Col' },
{ componentName: 'Col' },
]
}
这样设置组件在拖拽到页面上后就自动带有了两个Col
组件
如何将编写好的组件放在demo中运行
运行npm run lowcode:build
获取物料配置json,在packages中添加lodas和moment两个库:
"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/ 代理到本仓库启动后的路径即可
0.2.0
2 years ago