@wplc/lowcode-renderer-vue

0.0.2 • Public • Published

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>

Package Sidebar

Install

npm i @wplc/lowcode-renderer-vue

Weekly Downloads

0

Version

0.0.2

License

MIT

Unpacked Size

41 kB

Total Files

4

Last publish

Collaborators

  • wpsz-dev2
  • bigdata_dev9
  • qulf-npm
  • treblesun
  • yunyia
  • bim_npm