@vyr/cli 使用指南

🌐 Read this in other languages:

• English

简介

@vyr/cli 是一款基于图形化操作界面的场景编辑器，可通过直观方式快速完成场景的创建与编辑工作。

使用场景

• 自定义表单

依托 Vue 与 Element Plus 等扩展，高效支持动态表单等常见业务需求的快速实现。

• 自定义可视化大屏

结合 Three.js、ECharts 等扩展与预设模板，可便捷开发可视化大屏，满足多种数据展示与交互场景。

下一步计划

• 持续完善扩展功能，增强组件能力与稳定性。

• 提供更丰富的场景模板与集中化的模板管理中心。

• 通过模板化与扩展支持，加速系统原型的搭建与产出。

1. 安装

执行以下命令进行全局安装：

npm install @vyr/cli -g

2. 运行

1. 新建一个vue3项目（例如 example）并进入该目录：

mkdir example
cd example

2. 执行以下命令启动服务（首次启动需先执行编译命令）：

vyr -b  # 首次编译
vyr     # 启动服务

注意：第一次启动需先执行 vyr -b 进行编译。

3. 扩展

@vyr/cli 仅提供基础服务，如需支持如 Three.js、ECharts、Vue.js、Element-UI 等常用库，需安装相应的扩展。

扩展列表

• @vyr/echarts
• @vyr/echarts-browser
• @vyr/three
• @vyr/three-browser
• @vyr/three-remote
• @vyr/vue
• @vyr/element-plus
• @vyr/element-plus-browser

扩展分为三种类型：

• Universal：通用扩展
• Remote：远程扩展
• Browser：用于扩展 @vyr/cli 的浏览器端功能

集成示例（以 Three.js 为例）

1. 安装扩展包：

vyr install @vyr/three @vyr/three-browser @vyr/three-remote

2. 重新编译并启动服务：

vyr -b

4. 集成

@vyr/cli 默认会将场景相关数据保存在项目的 public 和 src 目录中。若要在其他项目中独立使用这些数据，需安装以下依赖（以 Three.js 为例）：

npm install @vyr/engine @vyr/three

在入口文件中初始化引擎并加载场景：

import { Asset, Engine } from "@vyr/engine";
import "./vyr.entry"; // 引入场景相关初始化代码

const engine = new Engine();

engine.run(document.body);

Asset.load("scene:/default.scene.json");

Asset.ready().then(() => {
  const scene = Asset.get("scene:/default.scene.json");
  engine.switch(scene);
});

如果有任何问题或需进一步了解，请参考相关文档。