快速上手

本页带你从零做出第一个大屏，并了解如何导入 / 导出工程、如何用 SDK 嵌入。

编辑器界面导览

更详细的界面说明

首页（项目管理）与编辑器各区域的完整介绍，见界面导览 · 首页与界面导览 · 编辑器。

区域	作用
组件库（左侧）	拖拽内置组件到画布；含图表、表格、容器、地图控件、布局骨架等
画布（中央）	所见即所得地摆放 / 选中 / 调整组件
图层树	组件层级与顺序（靠前 = 底层）、显隐、锁定、进入容器 / 地图 / 三维 / 组态内部
属性面板（右侧）	调组件参数（样式 / 数据 / 交互 / 悬浮弹层 / 多状态）
数据面板	新建 / 编辑连接与连接数据，给组件绑定字段
尺寸模式条（顶部）	响应式页面切换大屏 / 平板 / 手机档编辑（见画布系统）
窗口管理	创建 / 编辑工程级窗口（弹窗 / 抽屉，见窗口系统）
代码面板	为组件 / 页面写二次开发脚本（见二次开发脚本）
预览 / 发布（顶部）	预览运行态；发布生成线上快照（见发布与部署）

做第一个大屏

1. 从左侧组件库拖一个「柱状图」到画布。
2. 在右侧属性面板里调整标题、颜色、图例等参数（未接数据时会显示内置示例数据）。
3. 打开数据面板新建一个连接（例如粘贴一段 JSON 表格），把「类目」「数值」字段绑定到柱状图。
4. 点顶部预览，即可看到运行态效果。

组件参数怎么调

每个组件有哪些参数、分别是什么效果，都能在组件手册里查到，并且可以在文档里直接拖动参数看效果变化。

预览与发布

• 预览：编辑器内实时查看运行态。
• 发布 / 导出：把工程导出为一份工程文件（*.vpproj.json），交给运行时播放，或用 SDK 嵌入。

导入 / 导出工程文件

• 导出：菜单「导出工程」→ 得到 *.vpproj.json。它是纯数据（无代码），可版本管理、可脚本生成。
• 导入：首页「导入工程」→ 选择 *.vpproj.json → 还原大屏。

工程文件的结构见工程文件结构。

用 SDK 嵌入到你的系统

把做好的大屏放进自己的网页或业务系统，只需几行：

import { createVpViewer } from '@vp/sdk'

// 第二个参数是工程文件内容 body；返回运行上下文 ctx，可用它操作大屏
const ctx = createVpViewer('#app', body)

SDK 还支持对外传数据、控制播放、监听交互事件等，详见 SDK 与扩展开发；也可以在 SDK Playground 中直接修改 JavaScript 并观察运行效果。

下一步

• 想理解工程文件长什么样 → 工程文件结构
• 想理解平台如何运转 → 架构原理
• 想查某个组件怎么用 → 组件手册
• 想从可运行代码学习 SDK → SDK Playground