AI 生成的 Vue 代码，终于能直接用了!

本次解读将聚焦 GenUI SDK v1.4.0 的 Vue 出码能力，带你见证从"只能看"到"直接上线"的跨越。

你是不是也遇到过这种场景

当你看到一个精美的界面，有没有过这样一个念头：要是能直接把它变成源码，让自己也能复用就好了？

GenUI SDK 的出码器做的正是这件事------只不过这个"精美界面"不是别人的网站，而是在 GenUI 的对话界面里，由 AI 实时为你渲染出来的、可点击可填写的那一个。

你在 Playground 里输入："生成一个订单管理页面，包含搜索表单、数据表格、分页"。几十秒后，页面出来了，而且是真的能交互的那种------你可以点击按钮、填写表单、切换分页。

你调整了一下表单布局，优化了表格的列宽，加了一个状态筛选器。效果不错，你确认满意。

点一下导出，这份界面的源码就完整地落到你手里，格式整齐、语法检查过，直接就能放进项目里接着用。

GenUI SDK v1.4.0 就是来做这件事的。

先看效果

整个过程就三步：

用自然语言描述你要的界面
AI 流式生成 SchemaJson（结构化组件描述）
调用 generateCode() API，导出完整的 Vue SFC

导出的文件长这样：

vue 复制代码

<template>
  <tiny-form :model="state" label-width="100px">
    <tiny-form-item label="订单号">
      <tiny-input v-model="state.orderId" placeholder="请输入订单号"/>
    </tiny-form-item>
    <tiny-form-item label="客户名称">
      <tiny-input v-model="state.customerName" placeholder="请输入客户名称"/>
    </tiny-form-item>
    <tiny-form-item>
      <tiny-button type="primary" @click="submit" :loading="state.loading">
        提交订单
      </tiny-button>
    </tiny-form-item>
  </tiny-form>
</template>

<script setup>
import { reactive } from 'vue'
import { TinyForm, TinyFormItem, TinyInput, TinyButton } from '@opentiny/vue'

const state = reactive({
  orderId: '',
  customerName: '',
  loading: false
})

async function submit() {
  state.loading = true
  try {
    console.log('提交订单:', state)
  } finally {
    state.loading = false
  }
}
</script>

<style scoped>
/* 自动生成的样式 */
</style>

直接复制到你的 Vue 3 项目里，就能跑。

为什么这件事很重要？

你可能会说："AI 生成 UI 的工具很多啊，Cursor、Bolt 都能做。"

没错，这些工具确实能生成可用的代码。但 GenUI SDK 的差异化在于：它是专门为 Vue 生态设计的流式生成方案，从 Schema 到 SFC 有完整的编译校验链路，生成的代码符合 Vue 3 最佳实践。

1.从原型到产品，一步到位

传统流程：设计稿 →开发手动还原 → 调试 → 上线
现在：AI 生成 → 一键导出 Vue SFC → 直接集成到工程 → 上线

省掉的不是几分钟的抄代码时间，而是整个"还原"环节的心智负担。

2.生成的代码，符合 Vue 3 最佳实践

不是随便拼凑的 template + script + style，而是：

使用 <script setup> 语法糖
响应式状态用 reactive() / ref() 正确声明
组件导入根据 componentsMap 自动生成
样式用 <style scoped> 隔离
通过 @vue/compiler-sfc 编译校验，确保代码能跑

这不是"能看的代码"，是"能用的代码"。

3.支持复杂场景

不是只能生成简单的按钮和输入框，而是：

嵌套组件树（表单里套表格，表格里套操作列）
循环渲染（v-for 列表）
条件渲染（v-if / v-else）
事件绑定（@click、@change）
双向绑定（v-model）
插槽（#default、#header）

你用一个 AI 生成的复杂表单，导出后就是完整的 Vue 组件，状态、事件、样式全都保留。

和其他工具比一比

能力	GenUI SDK v1.4	Bolt.new
生成方式	流式 SchemaJson	全栈项目生成
导出格式	Vue SFC（可直接用）	完整项目（过重）
状态管理	reactive / ref 自动转换	全栈状态（过于复杂）
组件库支持	OpenTiny / Element Plus	任意（但需手动配置）
编译校验	有（确保能跑）	无
适用场景	Vue 项目快速出码	全栈应用原型

核心差异：GenUI SDK 专注 Vue 生态，生成的代码直接可用，不需要二次翻译。

5 分钟上手

1.安装

bash 复制代码

npm install @opentiny/genui-sdk-vue

2.基础用法

ts 复制代码

import { generateCode } from '@opentiny/genui-sdk-vue/code-generator'

const schema = {
  componentName: 'Page',
  state: {
    count: 0,
    message: 'Hello'
  },
  methods: {
    increment: {
      value: 'function() { this.state.count++ }'
    }
  },
  children: [
    {
      componentName: 'TinyButton',
      props: {
        text: 'Click me',
        onClick: {
          type: 'JSExpression',
          value: 'this.increment'
        }
      }
    }
  ]
}

const { panelName, panelValue, errors } = await generateCode({
  pageInfo: {
    name: 'Counter',
    schema
  },
  componentsMap: [
    {
      componentName: 'TinyButton',
      package: '@opentiny/vue',
      exportName: 'TinyButton'
    }
  ],
  formatWithPrettier: true
})

if (errors.length) {
  console.error('编译错误:', errors)
} else {
  console.log(`生成文件: ${panelName}`)
  console.log(panelValue)
}

3.在线体验

不想装包？直接去 Playground 试试：

GenUI SDK Playground

在 Playground 里输入自然语言描述，点击"导出 Vue 源码"，就能看到完整的 SFC 代码。

一些技术细节

如果你好奇它是怎么做到的，简单说一下原理：

1.SchemaJson 是什么

SchemaJson 是 GenUI SDK 定义的一套结构化组件描述协议。它不是 HTML，也不是 JSX，而是一种中间表示（IR），用来描述组件树、状态、方法、样式等信息。

比如一个按钮：

json 复制代码

{
  "componentName": "TinyButton",
  "props": {
    "text": "提交",
    "type": "primary",
    "onClick": {
      "type": "JSExpression",
      "value": "this.submit"
    }
  }
}

AI 流式生成这个 Schema，然后 generateCode() 把它转换成 Vue SFC。

2.转换过程

关键点：

组件映射 ：Schema 里的 componentName 转成 kebab-case 标签名
状态转换 ：state 转 reactive()，refs 转 ref()，accessor 转 computed()
事件绑定 ：onClick 转 @click，onChange 转 @change
编译校验 ：用 @vue/compiler-sfc 验证生成的代码，确保没有语法错误

3.物料系统集成

如果你用 OpenTiny Vue 或 Element Plus，可以直接用官方提供的物料元数据：

ts 复制代码

import { materialsMeta } from '@opentiny/genui-sdk-materials-vue-opentiny-vue/meta'

const componentsMap = materialsMeta.materials.flatMap((material) =>
  (material.data?.materials?.components ?? []).map((item) => ({
    componentName: item.component,
    package: item.npm.package,
    exportName: item.npm.exportName,
  }))
)

这样 generateCode() 就能自动生成正确的 import 语句。

谁适合用

Vue 项目开发者：快速生成表单、列表、详情页等常见界面
中后台系统开发：用 AI 加速 CRUD 页面开发
原型验证：快速验证产品想法，导出代码后直接集成
组件库开发者：用 AI 生成组件示例，导出后作为文档

总结

AI 生成 UI 这个方向，大家都在探索。但大多数工具停留在"生成预览"阶段，离真正的工程交付还差一步。

GenUI SDK v1.4.0 的 Vue 出码能力，就是要把这最后一公里走完。不是生成"看起来像"的代码，而是生成"能直接跑"的代码。 从 Schema 解析、代码生成到编译校验，整个流程设计较为完善。generateCode API 接口简洁，生成的 SFC 结构完整。

如果你在做 Vue 项目，不妨试试，这是一个值得认真评估的方案。

关于 OpenTiny

OpenTiny 是面向企业级场景的前端 AI 应用开发平台。平台依托生成式 UI与WebMCP两大核心底层技术，打造适配 Agent 智能应用生态的 NEXT-SDKs、AI 扩展工具、TinyRobot 对话 AI 组件库、GenUI SDK生成式 UI 、WebAgent 智能代理等系列产品，能够依托 AI 解析用户需求意图，自动驱动任务执行，助力企业现有业务系统快速完成智能化升级。

同时 OpenTiny 沉淀成熟通用前端基建能力：提供跨端、跨框架、跨版本的 TinyVue 组件库，配套基于 Angular+TypeScript 技术栈的 TinyNG 组件库；内置可高度自定义拓展的低代码引擎 TinyEngine，搭配 TinyPro 中后台业务模板、TinyCLI 命令行工具等配套工具链，全方位赋能开发者高效搭建各类 Web 端企业应用。

欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～

OpenTiny 官网：opentiny.design

GenUI SDK 代码仓库：github.com/opentiny/ge... （欢迎star ⭐）

如果你也想要共建，可以进入代码仓库，找到 good first issue标签，一起参与开源贡献~如果你有任何问题，欢迎在评论区留言交流！