插件化、TypeScript 优先的
Vue 3 可视化画布设计器

import { createApp } from 'vue'
import App from './App.vue'
import VueKonva from 'vue-konva'
import 'vkedit/dist/vkedit.css'

const app = createApp(App)
app.use(VueKonva)
app.mount('#app')

<template>
  <Vkedit :host="host" />
</template>

<script setup lang="ts">
import { createEditorHost, Vkedit } from 'vkedit'
import {
  RectPlugin, TextPlugin, TablePlugin, QrcodePlugin,
  BarcodePlugin, ChartPlugin, LinePlugin,
} from 'vkedit'

const host = createEditorHost()

// 按需安装图形插件
host
  .installPlugin('rect-plugin', RectPlugin)
  .installPlugin('text-plugin', TextPlugin)
  .installPlugin('table-plugin', TablePlugin)
  .installPlugin('qr-plugin', QrcodePlugin)
  .installPlugin('barcode-plugin', BarcodePlugin)
  .installPlugin('chart-plugin', ChartPlugin)
  .installPlugin('line-plugin', LinePlugin)

// A4 纸张，DPM = 8
host.setStatus({ dpm: 8, width: 210 * 8, height: 297 * 8, zoom: 0.4 })
</script>