vue3.0 amis 低代码框架

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

动态渲染组件 LowcodeEngine

路由处理

import request from '@/utils/request'
import Layout from '@/components/layout/Index.vue'

const modules = import.meta.glob('../views/**/**.vue')
const layoutModules = import.meta.glob("../components/layout/**.vue")

// 根据菜单构建动态路由
export const filterRouter = (routers:any, level:any) => {
    level = level || 0
    const accessedRouters = routers.filter( (router:any) => {
        if (router.isShow) {
            router.component = layoutModules[`../components/layout/LowcodeEngine.vue`]

            if (router.children && router.children.length) {
                router.children = filterRouter(router.children, level + 1)
            }
            return true
        }
        return false
    })
    return accessedRouters
}