我花了些时间做了一些低代码平台调研，以下是调研得出的结果及想法，希望给整个前端团队带来帮助，一起把前端基建建立起来。
低代码平台简介
低代码越来越流行，以下是从几方面通俗易懂的介绍它。
优点：
- 非开发人员能操作使用（ 比如更懂业务的人，自己来做系统），快速形成需要页面
- 代码复用性高，解决研发效能
- 可以让更懂业务的人，自己来做系统，而不是找到供应商的研发团队来做
缺点：
- 不是万能的，业务太复杂不适合
- 在不同场景下对开发人员来说提效程度差别很大，没用好是增大成本
大概应用场景：
- 逻辑不复杂CMS页面
- 逻辑不复杂的可视化大屏
- 页面不复杂的h5页面
虽然可以应用很多方面，但是配置重于逻辑的能看到比较好的效果，最重要的是想清楚用户是谁，这样才能更好的开展具体实施。
我认为低代码平台是基于组件，可以着手先开发出组件，把组件变成物料，组件运行成熟，低代码平台可以逐渐介入，从组件化转变成低代码化。
自己去开发一个低代码引擎是高成本低收益，可以基于市场上多年积累下来的引擎，用来扩展符合公司的业务。
调研了市面上相对功能强大的2大低代码平台，都有各自有优缺点， 以下总结对我们影响比较突出的优缺点。
阿里低代码平台
基本情况
-
优点：
- 生态强、功能全面、自定义物料的接入支持度高
- 丰富的拓展能力
- 可得到源码进行二次改造
-
缺点：
- 目前暂时只支持react技术栈，vue技术栈需待社区开发
- 开源时间短，2022年2月份开源
-
谁在使用：阿里内部，比如宜搭
-
技术要求：React+TS
-
硬件要求：
- 最好Mac开发组件
- 网速快，目前网速太慢，很多组件打不开
- 外网开发（受限制）
官网对windows下的要求：
- 设计界面
如何扩展组件
教程：lowcode-engine.cn/docV2/funcv…
- 组件开发 （根据教程就可以）
npm init @alilc/element your-material-name
...
尝试发布在npm中，后面可以发布到私有库中
npm publish
输入密码之后还得输入一次认证密码，npm publish 才能成功
- 低代码平台启动，在此平台引入组件
git clone https://github.com/alibaba/lowcode-demo
npm install (最好使用 registry=https://registry.npmmirror.com，在公司网速下，安装更快，能成功)
npm start
把build/lowcode/assets-prod.json文件， merge 到项目的 assets.json 中，复制 packages和 components
腾讯低代码平台
基本情况
-
优点：
- 支持不同前端框架vue2、vue3、react
- 丰富的拓展能力
-
缺点：
- 采用 JS schema，不灵活改动代码
- 开源时间短，2022年2月份之后开源
-
谁在使用
- 腾讯视频：视频会员，体育会员，WETV 国际版，TV，doki 商城，小企鹅，小说，漫画
- 腾讯会议
-
技术要求：React/Vue2/Vue3+TS
-
设计界面
如何扩展组件
教程：tencent.github.io/tmagic-edit…
- 先运行vue3 \hhy\myTest\tmagic-editor\runtime\vue3> npm run dev http://localhost:8081/tmagic-editor/playground/runtime/vue3/
\hhy\myTest\tmagic-editor\playground.env.vue3
VITE_RUNTIME_PATH=http://localhost:8081/tmagic-editor/playground/runtime/vue3
本地启动 端口经常会变动，VITE_RUNTIME_PATH 需要注意配置更新，或者更新proxy代理
- 运行编辑器 在目录 \hhy\myTest\tmagic-editor\
文档要求环境：node.js >= 16 我的node 版本也能跑通 ：V15.0.1
- 先安装 pnpm
npm install -g pnpm
- 安装依赖
pnpm bootstrap
- 运行项目
pnpm playground
在浏览器中打开http://localhost:8098/tmagic-editor/playground/ 可得到一个编辑器示例项目
http://localhost:8098/tmagic-editor/playground/#/form 可查看form配置实例
C:\hhy\myTest\tmagic-editor\docs\src\guide\installation.md 很好的说明怎么使用
asyncLoadJs 这个函数的功能：通过script加载得到内容，都能解决跨域
setup() {
asyncLoadJs(`/runtime/vue3/assets/config.js`).then(() => {
propsConfigs.value = window.magicPresetConfigs;
});
asyncLoadJs(`/runtime/vue3/assets/value.js`).then(() => {
propsValues.value = window.magicPresetValues;
});
异步获取到js文件
以报表来尝试，vue3中引入echart
\hhy\myTest\tmagic-editor\runtime\vue3\src\playground\App.vue （在main.js也可以） 加入echart
import * as echarts from 'echarts'
provide('ec', echarts)
在组件中引入echart
import { onMounted, inject } from "vue";
let echarts = inject("ec");//引入
跑不停重启项目
启动报错，忽略eslint报错
git commit --no-verify -m '跳过检查提交'
可计划做的组件
表格 表单 树 报表等... 头脑风暴吧
