template-sdk

面向模板项目的前端 SDK,为模板项目提供标准化的配置管理、字段定义和运行时取值能力。

template/config.ts
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

数组字段