@wplc/lowcode-renderer-vue

lowcode-renderer-vue

这是一个可以在 vue 环境渲染低代码产物的库，思路跟 amis 的使用一致，在 vue 环境中，针对某个模块使用 react 去渲染组件:

  window.ReactDOM.render(
    reactRendererElement,
    document.getElementById(`wplc_${props.id}`),
  )

目前 public/react-renderer.js 和 public/utils.js 需要自己编译（umd），直接使用官方：https://github.com/alibaba/lowcode-engine 编译即可。

FIXME

将 public/react-renderer.js 和 public/utils.js 打到库里，供使用者直接使用。

使用方法

参见 examples/vue3

添加依赖库

yarn add @wplc/lowcode-renderer-vue

index.html 添加 alilowcode 的 css 和 js 依赖

引入 css

<!-- 低代码引擎的页面框架样式 -->
<link
  rel="stylesheet"
  href="https://alifd.alicdn.com/npm/@alilc/lowcode-engine@latest/dist/css/engine-core.css"
/>
<!-- Fusion Next 控件样式 -->
<link
  rel="stylesheet"
  href="https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.css"
/>
<!-- 低代码引擎的页面主题样式，可以替换为 theme-lowcode-dark -->
<link
  rel="stylesheet"
  href="https://alifd.alicdn.com/npm/@alifd/theme-lowcode-light/0.2.0/next.min.css"
/>
<!-- 低代码引擎官方扩展的样式 -->
<link
  rel="stylesheet"
  href="https://alifd.alicdn.com/npm/@alilc/lowcode-engine-ext@latest/dist/css/engine-ext.css"
/>

引入 js

<!-- React，React-DOM -->
<script src="https://g.alicdn.com/code/lib/react/16.14.0/umd/react.production.min.js"></script>
<script src="https://g.alicdn.com/code/lib/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
<!-- React 向下兼容，预防物料层的依赖 -->
<script src="https://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js"></script>
<script src="https://g.alicdn.com/platform/c/react15-polyfill/0.0.1/dist/index.js"></script>
<!-- lodash，低代码编辑器的依赖 -->
<script src="https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js"></script>
<!-- 日期处理包，Fusion Next 的依赖 -->
<script src="https://g.alicdn.com/code/lib/moment.js/2.29.1/moment-with-locales.min.js"></script>
<!-- Fusion Next 的主包，低代码编辑器的依赖 -->
<script src="https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.js"></script>
<!-- 低代码引擎的主包 -->
<script
  crossorigin="anonymous"
  src="https://alifd.alicdn.com/npm/@alilc/lowcode-engine@latest/dist/js/engine-core.js"
></script>
<!-- 低代码引擎官方扩展的主包 -->
<script
  crossorigin="anonymous"
  src="https://alifd.alicdn.com/npm/@alilc/lowcode-engine-ext@latest/dist/js/engine-ext.js"
></script>

使用

<template>
  <div>
    <LowcodeRenderer
      :id="componentId"
      :schema="projectSchema"
      :packages="packages"
    />
  </div>
</template>

<script setup>
import packages from './assets/packages.json'
import projectSchema from './assets/projectSchema.json'
import { LowcodeRenderer } from '@wplc/lowcode-renderer-vue'

const componentId = 'demo1'
</script>