尝试自定义节点

client/src/components/Flow.vue

@@ -0,0 +1,19 @@
+<script setup>
+import {ref} from "vue";
+import {Button} from "ant-design-vue";
+
+const message = ref('Vue Flow')
+</script>
+
+<template>
+  <div class="flow"></div>
+  <Button>{{ message}}</Button>
+</template>
+
+<style scoped>
+.flow {
+  width: 10px;
+  height: 10px;
+  background-color: red;
+}
+</style>

client/src/main.js

@@ -1,6 +1,6 @@
 import {createApp} from 'vue'
-import {createMemoryHistory, createRouter, createWebHistory} from 'vue-router'
+import {createRouter, createWebHistory} from 'vue-router'
-import App from './App.vue'
+import App from '@/App.vue'
 import {Layout, Menu} from 'ant-design-vue'
 import 'ant-design-vue/dist/reset.css'
 
@@ -14,23 +14,23 @@ createApp(App)
       {
         name: 'home',
         path: '/home',
-        component: () => import('./views/Home.vue'),
+        component: () => import('@/views/Home.vue'),
       },
       {
         name: 'management',
         path: '/management',
-        component: () => import('./views/management/Index.vue'),
+        component: () => import('@/views/management/Index.vue'),
         redirect: '/management/overview',
         children: [
           {
             name: 'overview',
             path: 'overview',
-            component: () => import('./views/management/Overview.vue'),
+            component: () => import('@/views/management/Overview.vue'),
           },
           {
             name: 'setting',
             path: 'setting',
-            component: () => import('./views/management/Setting.vue'),
+            component: () => import('@/views/management/Setting.vue'),
           },
         ],
       },

client/src/views/Home.vue

@@ -1,6 +1,7 @@
 <script setup>
-import {onMounted} from 'vue'
+import {createApp, onMounted} from 'vue'
-import {amisRender} from '../utils.js'
+import {amisRender} from '@/utils.js'
+import Flow from "@/components/Flow.vue";
 
 const toastMessage = () => {
   alert('click in vue')
@@ -29,6 +30,12 @@ onMounted(() => {
                   ]
                 }
               }
+            },
+            {
+              type: 'custom',
+              onMount: (dom, value, onChange, props) => {
+                createApp(Flow).mount(dom)
+              }
             }
           ]
         }

client/src/views/management/Overview.vue

@@ -1,6 +1,6 @@
 <script setup>
 import {onMounted} from 'vue'
-import {amisRender} from '../../utils.js'
+import {amisRender} from '@/utils.js'
 
 onMounted(() => {
   amisRender(

client/src/views/management/Setting.vue

@@ -1,6 +1,6 @@
 <script setup>
 import {onMounted} from 'vue'
-import {amisRender} from '../../utils.js'
+import {amisRender} from '@/utils.js'
 
 onMounted(() => {
   amisRender(

client/vite.config.js

@@ -1,9 +1,16 @@
 import {defineConfig} from 'vite'
 import obfuscatorPlugin from "vite-plugin-javascript-obfuscator";
 import vue from '@vitejs/plugin-vue'
+import {fileURLToPath, URL} from 'node:url'
 
 // https://vite.dev/config/
 export default defineConfig({
+  resolve: {
+    alias: {
+      'vue': 'vue/dist/vue.esm-bundler.js',
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  },
   plugins: [
     vue(),
     obfuscatorPlugin({