【2025最新版】零成本玩转IoT可视化开发：thingsboard-ui-vue3从安装到规则链实战全指南

2026-02-04 05:05:23作者：薛曦旖Francesca

为什么选择thingsboard-ui-vue3？

你是否还在为IoT平台UI开发烦恼？作为ThingsBoard官方前端的Vue3重构版本，thingsboard-ui-vue3基于Vue 3.5.13、TypeScript 5.8.2和Vite 6.2.6构建，整合了Ant Design Vue 4.2.6和AntV X6可视化引擎，完美适配ThingsBoard 4.1.0版本。相比传统前端方案，它提供：

开箱即用的IoT组件库：28+专用组件覆盖设备管理、数据可视化、规则引擎等核心场景
可视化规则链编辑器：基于AntV X6实现拖拽式规则节点配置，支持复杂业务逻辑编排
企业级权限控制：内置RBAC权限模型，适配多租户系统架构
无缝集成能力：已完成TDengine时序数据库适配，支持千万级设备数据存储

环境准备与安装

系统要求

环境依赖	最低版本	推荐版本
Node.js	18.x	20.17.0+
pnpm	7.x	10.7.1+
Git	2.30.0	2.45.0+
浏览器	Chrome 90+	Chrome 128.0+

快速安装步骤

# 1. 克隆仓库（国内加速地址）
git clone https://gitcode.com/oliver225/thingsboard-ui-vue3.git
cd thingsboard-ui-vue3

# 2. 安装依赖（推荐使用pnpm）
pnpm install

# 3. 配置后端接口（开发环境）
# 修改.env.development文件
# VITE_PROXY = [["/api","http://127.0.0.1:8080/api",false]]

# 4. 启动开发服务器
pnpm dev

⚠️ 注意：项目使用pnpm workspace管理依赖，npm/yarn用户需先执行npm install -g pnpm

构建部署选项

# 标准生产构建
pnpm build

# Tomcat容器部署
pnpm build:tomcat

# 构建并预览
pnpm build:preview

构建产物默认输出至dist目录，支持Nginx、Tomcat等主流Web服务器部署。Tomcat模式构建会自动适配Java Web应用目录结构。

核心功能实战

1. 项目架构概览

mindmap
  root((thingsboard-ui-vue3))
    核心框架
      Vue 3.5.13
      Vite 6.2.6
      TypeScript 5.8.2
    UI组件
      Ant Design Vue 4.2.6
      Vue-Vben-Admin
      28+业务组件
    可视化引擎
      AntV X6 2.18.1
      ECharts 5.6.0
      SVG.js
    数据处理
      Axios 1.8.4
      TDengine适配
      WebSocket客户端

2. 规则链编辑器实战

规则链（Rule Chain）是ThingsBoard的核心功能，用于处理设备数据流转和业务逻辑编排。thingsboard-ui-vue3提供了可视化编辑器，支持节点拖拽、连接配置和条件判断。

基础操作流程

flowchart TD
    A[创建规则链] --> B[添加处理节点]
    B --> C[配置节点属性]
    C --> D[连接节点关系]
    D --> E[设置触发条件]
    E --> F[保存并部署]

关键代码实现

<template>
  <div class="rule-chain-edit">
    <div class="edit-stencil" id="stencil"></div>
    <div class="edit-container" id="container"></div>
    <Space class="fixed bottom-8 right-8">
      <Button @click="handleSave">保存规则链</Button>
      <Button @click="handleResetDebug">重置调试模式</Button>
    </Space>
  </div>
</template>

<script setup lang="ts">
import { Graph } from '@antv/x6';
import { Stencil, Snapline, Selection, History } from '@antv/x6-plugin';
import RuleChainNode from './node.vue';

// 注册自定义节点
register({
  shape: 'rule-chain-node',
  width: 200,
  height: 50,
  ports: {
    groups: {
      out: { position: 'right', attrs: { circle: { magnet: true, r: 5 } } },
      in: { position: 'left', attrs: { circle: { magnet: true, r: 5 } } },
    }
  },
  component: RuleChainNode,
})

// 初始化画布
const graph = new Graph({
  container: document.getElementById('container'),
  background: { color: '#F2F7FA' },
  grid: { visible: true, type: 'doubleMesh' },
  connecting: {
    snap: true,
    allowMulti: false,
    validateEdge: validateEdge,
  }
})

// 添加插件
graph.use(new Snapline())
graph.use(new Selection())
graph.use(new History())

// 保存规则链
async function handleSave() {
  const cells = graph.toJSON().cells;
  // 处理节点和连接数据
  const nodes = cells.filter(cell => cell.shape === 'rule-chain-node');
  const connections = cells.filter(cell => cell.shape === 'rule-edge');
  
  await saveRuleChainMetaData({ nodes, connections });
}
</script>

核心节点类型

节点类型	用途	典型应用场景
过滤节点	数据筛选	温度异常检测
转换节点	格式转换	JSON到Protobuf
动作节点	业务操作	发送邮件通知
外部节点	系统集成	调用第三方API
流程节点	逻辑控制	分支/聚合流程

3. 设备管理模块开发

设备管理是IoT平台的基础功能，thingsboard-ui-vue3提供了完整的设备CRUD、状态监控和数据可视化组件。

设备列表组件示例

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useTable } from '/@/components/Table';
import { getDeviceList } from '/@/api/tb/device';

const { tableData, loading, fetchTableData } = useTable({
  api: getDeviceList,
  columns: [
    { title: '设备名称', dataIndex: 'name' },
    { title: '设备类型', dataIndex: 'type' },
    { title: '在线状态', dataIndex: 'status', 
      customRender: ({ record }) => (
        <Tag color={record.status === 'online' ? 'green' : 'red'}>
          {record.status}
        </Tag>
      )
    },
    { title: '最后活动时间', dataIndex: 'lastActivityTime' },
  ]
});

onMounted(() => {
  fetchTableData();
});
</script>

高级配置与优化

后端接口代理配置

在vite.config.ts中已预设代理配置，支持多环境切换：

// vite.config.ts
server: {
  proxy: {
    '/api': {
      target: 'http://127.0.0.1:8080',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, '/api'),
    },
  },
}

性能优化策略

组件懒加载：使用createAsyncComponent实现路由级懒加载

import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';

const DeviceDetail = createAsyncComponent(() => import('/@/views/tb/device/detail.vue'));

大型图表优化：采用虚拟滚动和数据分片加载
缓存策略：使用Pinia状态管理和localStorage两级缓存

常见问题解决方案

跨域问题处理

// src/utils/http/axios/index.ts
const { VITE_PROXY } = import.meta.env;
if (VITE_PROXY) {
  // 开发环境走代理
  config.baseURL = '/api';
} else {
  // 生产环境直接对接后端
  config.baseURL = VITE_GLOB_API_URL;
}