import { defineTemplateConfig } from 'template-sdk/config'
import { templateSdkPlugin } from 'template-sdk/vite'
const config = defineTemplateConfig({
meta: {
name: '示例模板',
code: 'demo-template'
},
dataSchema: {
fields: [
{ key: 'title', type: 'string', value: '默认标题' },
{ key: poster, type: 'image', value: '/assets/poster.png' }
]
}
})
export default config
核心特性
声明式配置
通过 TypeScript 类型安全的配置定义,清晰的字段结构和编辑器智能提示支持。
自动构建
Vite 插件自动处理配置校验、类型生成和构建产物,无需手动维护。
运行时取值
简洁的 API 设计,通过 useTemplateValue 组合式函数轻松获取模板字段值。
数据分离
配置结构与运行时内容完全分离,平台侧可独立修改运行时数据。
灵活扩展
支持多种字段类型,string、number、boolean、image、video、array 覆盖常见场景。
平台无关
不绑定任何 UI 框架,模板项目可自由选择 Vue、React 或其他技术栈。
快速开始
1
安装依赖
pnpm add git+https://gitee.com/CoolRainLy/template-sdk.git#main
2
配置 configJson
定义模板的字段结构和默认值
3
启用 Vite 插件
在 vite.config 中集成 templateSdkPlugin
4
在组件中取值
使用 useTemplateValue 获取响应式字段值
支持的字段类型
string
普通文本字段
number
数字字段
boolean
布尔值字段
image
图片字段
video
视频字段
array
数组字段