安裝

npm i amis

main.ts中添加

import 'amis/sdk/sdk.js';
import 'amis/lib/themes/default.css';

寫好子組件

<template>
    <div id="box"></div>
</template>

<script lang="ts" setup>
import {  onMounted } from "vue";
console.log("ces ");
const props= defineProps({
    amisjson: {
        type: Object,
        required: true
    }
})


onMounted(() => {
    // @ts-ignore
    var amis = amisRequire('amis/embed');
    console.log(amis);
    
    let amisScoped = amis.embed('#box', props.amisjson);
})

</script>

使用

<template>
    <amis :amisjson="amisjson"></amis>
</template>
<script setup lang="ts">
import amis from "../components/AmisReanderer.vue";
const amisjson={
        type: 'page',
        title: '表單頁面',
        body: {
            type: 'form',
            mode: 'horizontal',
            api: '/saveForm',
            body: [
                {
                    label: 'Name',
                    type: 'input-text',
                    name: 'name'
                },
                {
                    label: 'Email',
                    type: 'input-email',
                    name: 'email'
                }
            ]
        }
    }
</script>

  

效果展示

只做了基礎(chǔ)
可根據(jù)需求依照amis文檔做自己需要的調(diào)整
amis挺好一框架 github 7.7k的星星了
但是 官方維護(hù)不積極 然后導(dǎo)致的社區(qū)也不活躍
出問題查個(gè)資料都難