新手必看10个常见坑，每个都有症状根因和修复方案# 新手必看！玩转 TinyRobot 一定要避开这些坑

坑 ：忘记引入样式——组件能渲染但丑到离谱

症状： 页面上能看到 tr-bubbletr-sender 的结构。但排版混乱，没有背景色、圆角、间距，像是裸奔的 HTML。老实说，

原因： TinyRobot 的组件逻辑和样式是分离打包的。你只引入了 JS，没引入 CSS，组件虽然注册成功。但所有 --tr-* CSS 变量和样式规则都没加载。

修复： 在 main.ts 中加上样式导入，这一步不管是按需引入还是全局引入都不能省

import { createApp } from 'vue'
import App from './App.vue'
import '@opentiny/tiny-robot/dist/style.css' // 必须引入！话说回来，const app = createApp
app.mount

坑 ：组件名写错——用 Bubble 而不是 TrBubble

症状： 模板里写了 或 Vue 提示组件未注册。页面什么都不显示，

原因： TinyRobot 所有组件都以 Tr 前缀注册。 按需引入时导入名是 TrBubbleTrSender模板里对应的标签是 不是 。

修复：

从完整对应关系来看，TrBubble → TrSender → TrContainer → ThemeProvider → 。其实，

坑 ：全局引入和按需引入混用——组件重复注册

症状： 控制台出现 Vue 的组件重复注册警告。某些组件行为异常，或者打包体积明显偏大。

原因： 你在 main.ts 里用 app.use 全局注册了所有组件，接下来在页面里又 import { TrBubble } from '@opentiny/tiny-robot' 按需引入。两套注册撞车了，

// 方案 A：纯全局引入
import TinyRobot from '@opentiny/tiny-robot'
import '@opentiny/tiny-robot/dist/style.css'
app.use // 全局注册，页面里不用再 import
// 方案 B：纯按需引入
// main.ts 只引样式，不 app.use
import '@opentiny/tiny-robot/dist/style.css'
// 页面里按需 import
import { TrBubble。TrSender } from '@opentiny/tiny-robot'

速查表

坑 一句话记忆

如果遇到文档没覆盖的问题，直接去 GitHub Issues 提问，社区响应很快的。

OpenTiny NEXT 是一套公司智能前端开发方法，以生成式 UI 和 WebMCP 两大关键技术为基础，对现有传统的 TinyVue 组件库、TinyEngine 低代码引擎等产品进行智能化升级。建立出面向 Agent 应用的前端 NEXT-SDKs、AI Extension、TinyRobot智能助手、GenUI等新产品，加速公司应用的智能化改造，实现AI理解使用者意图自主完成任务。说起来，

--> 《/body》《/html》