使用方式对比

方式一：插件安装（推荐）

// main.ts
import { createApp } from 'vue'
import LowCodePlugin from 'your-lowcode-package'
import { useDictStoreWithOut } from '@/store/modules/dict'
import { useLowStoreWithOut } from '@/store/modules/low'

const app = createApp(App)

// 插件方式安装，自动配置依赖
app.use(LowCodePlugin, {
  dictStore: useDictStoreWithOut(),
  lowStore: useLowStoreWithOut(),
  apiClient: callApiFun // 可选
})

app.mount('#app')

<!-- 使用组件 -->
<template>
  <LowForm :option="formOption" />
  <LowTable :option="tableOption" />
</template>

方式二：手动配置 + 按需导入

// main.ts 或组件使用前
import { configFormInit } from 'your-lowcode-package'

configFormInit({
  dictStore: useDictStoreWithOut(),
  lowStore: useLowStoreWithOut()
})

<!-- 按需导入组件 -->
<template>
  <LowForm :option="formOption" />
</template>

<script setup>
import { LowForm } from 'your-lowcode-package'
</script>

方式三：组件级配置（高级用法）

<template>
  <LowForm 
    :option="formOption" 
    :config="customConfig" 
  />
</template>

<script setup>
import { LowForm } from 'your-lowcode-package'

// 为单个组件提供特定配置
const customConfig = {
  dictStore: customDictStore,
  lowStore: customLowStore
}
</script>