快速开始

Light Components 的每个物料都以标准 Web Component 发布，同时携带一份描述能力契约的 manifest.json。这让组件能够跨框架运行，也让编辑器与文档站读取同一份元数据。

环境要求

• Node.js 18 或更高版本
• Vue 3
• Vite 5 或兼容版本

安装构建插件

在物料项目中安装平台 SDK：

npm install -D @platform/vite-plugin-component

当前工作区也可以通过本地依赖接入：

{
  "devDependencies": {
    "@platform/vite-plugin-component": "file:../light-platform-sdk"
  }
}

配置组件契约

在 vite.config.ts 中声明组件名称、说明和公开能力。这里的数据既供低代码编辑器使用，也会成为在线文档的 API 数据源。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import platformPlugin from '@platform/vite-plugin-component'

export default defineConfig({
  plugins: [
    vue({ customElement: true }),
    platformPlugin({
      componentName: 'status-card',
      title: '状态卡片',
      description: '展示业务指标与当前状态',
      propsConfig: [
        {
          name: 'title',
          type: 'string',
          title: '卡片标题',
          defaultValue: '',
        },
        {
          name: 'status',
          type: 'string',
          title: '状态',
          defaultValue: 'normal',
          options: [
            { label: '正常', value: 'normal' },
            { label: '告警', value: 'warning' },
          ],
        },
      ],
      eventsConfig: [
        { eventName: 'status-card:click', title: '点击卡片' },
      ],
    }),
  ],
})

构建物料

npm run build

构建完成后会得到：

dist/
├─ index.js       # 注册自定义元素的组件脚本
└─ manifest.json  # 组件能力契约

在页面中使用

<script type="module" src="/materials/status-card/index.js"></script>

<status-card title="设备在线率" status="normal"></status-card>

组件名称

组件标识符必须与 manifest.json 中的 componentName 完全一致，否则编辑器和运行时无法正确加载物料。

下一步

• 前往组件总览查看已经接入的物料。
• 阅读新增组件文档，把新的构建产物纳入文档站。