vue3.0 amis 低代码框架

原创

已于 2024-01-18 16:14:10 修改 · 1.2w 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#低代码

于 2023-06-08 14:25:27 首次发布

文章介绍了如何在Vue3项目中使用Amis，一个由百度开源的低代码框架，通过JSON配置快速生成页面。文章详细展示了安装步骤、封装组件AmisComponent以及动态渲染组件LowcodeEngine的实现过程，同时提到了axios的使用和接口请求的配置方法。

amis

amis 是百度开源的一个低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。

组件地址：https://aisuda.bce.baidu.com/amis

编辑器地址：https://aisuda.github.io/amis-editor

Vue3 中使用

安装依赖

npm i amis

npm i copy-to-clipboard

封装组件 AmisComponent

<template> 
    <div id="amisid" ref="boxRef"></div>
</template>
<script setup lang="ts">
    import {defineProps,watch,ref} from "vue"
    import {ElMessage} from 'element-plus'
    import 'amis/sdk/sdk.js'
    import 'amis/lib/themes/default.css'
    import axios from 'axios'
    import copy from 'copy-to-clipboard'

    const props = defineProps({
        formid: {
            type: String,
            default: () => {
                return ''
            }
        },
        formjson: {
            type: Object,
            default: () => {
                return {}
            }
        }
    })

    // @ts-ignore
    const amis = amisRequire('amis/embed');
    const boxRef = ref(null)

    watch(()=> props.formjson, (data)=>{
            onRendering(data)
        },
        {immediate: true,deep: true}
    )

    function onRendering(data:any){
        let theme = 'cxd'
        let amisScoped = amis.embed( 
            '#amisid',
            data,
            {
                updateLocation: (to, replace) => {},
            },
            {
                // 下面三个接口必须实现
                fetcher: ({
                    url, // 接口地址
                    method, // 请求方法 get、post、put、delete
                    data, // 请求数据
                    responseType,

最低0.47元/天解锁文章