@kdesigner/amis-vue

KDesigner AMIS Vue 适配层 - 基于 veaury 混合渲染，让你在 Vue 3 应用中无缝使用 AMIS（React）页面。

✨ 特性

• 🔀 Vue / React 混合渲染 - 基于 veaury，在 Vue 3 中直接渲染 AMIS React 组件
• 📄 页面渲染器 - XuiPage / AmisSchemaPage 开箱即用的 AMIS schema 渲染组件
• ✏️ 编辑器组件 - XuiPageEditor / AmisPageEditor 可视化编辑器封装
• 🌉 运行时适配 - registerAdapter 桥接 AMIS 与宿主框架（alert / confirm / notify / dataMapping）
• 📦 聚合入口 - 透传 @kdesigner/core、@kdesigner/components、@kdesigner/amis-extensions 的全部导出
• 🛡️ TypeScript - 100% TS 编写，提供完备的类型推导

📦 安装

pnpm add @kdesigner/amis-vue

Peer 依赖需自行安装：

pnpm add [email protected] [email protected] [email protected] react@^18 react-dom@^18 vue@^3 vue-router@^4

🚀 快速开始

// main.ts
import { createApp } from 'vue'
import { XuiPage, registerAdapter } from '@kdesigner/amis-vue'
import { alert, confirm, toast, dataMapping } from 'amis'

const app = createApp(App)

// 1. 注册 adapter（桥接 AMIS 与宿主）
registerAdapter({ dataMapping, alert, confirm, notify: toast })

// 2. 注册全局组件
app.component('XuiPage', XuiPage)

app.mount('#app')

<template>
  <XuiPage :schema="schema" />
</template>

<script setup lang="ts">
const schema = {
  type: 'page',
  title: 'Hello',
  body: 'AMIS in Vue!'
}
</script>

📚 主要导出

🛠 开发与构建

# 安装依赖
pnpm install

# 监视模式开发
pnpm dev

# 构建产物
pnpm build

# 运行测试
pnpm test

📝 许可证

MIT