RuleGo-Editor 有两种使用方式：作为 npm 库集成到你的 Vue 项目，或作为独立应用二次开发/部署。两者来自同一份源码。

环境支持

由于 Vue 3 不再支持 IE11，RuleGo-Editor 也不再支持 IE 浏览器。

Edge ≥ 79	Firefox ≥ 78	Chrome ≥ 64	Safari ≥ 12

Node.js ≥ 18。

---

作为 npm 库集成（推荐）

1. 安装 editor

npm i @rulego/editor

RuleGo-Editor 是商业授权项目，源码随授权交付。若你拿到的是源码包或私有 registry，按对应方式安装（如 npm i @rulego/editor --registry=<你的私有源>，或 npm i ./rulego-editor-x.y.z.tgz）。库产物在 dist/（rulego-editor.es.js + style.css），类型声明在 src/index.d.ts 与 src/workspace-types.d.ts。

2. 安装 peerDependencies

editor 把以下包作为 peerDependencies，宿主必须自行安装（避免重复打包、保证宿主与 editor 共用同一份 Vue/Element Plus 实例）：

npm i vue@^3.5.0 element-plus@^2.10.0 @element-plus/icons-vue@^2.3.1 \
      @logicflow/core@^2.1.1 @logicflow/extension@^2.1.2

peerDependency	版本	说明
vue	^3.5.0	框架
element-plus	^2.10.0	UI 组件库
@element-plus/icons-vue	^2.3.1	Element Plus 图标
@logicflow/core	^2.1.1	画布引擎
@logicflow/extension	^2.1.2	LogicFlow 扩展（DndPanel/Snapshot/MiniMap 等）

3. 在 Vue 应用中使用

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

<!-- App.vue -->
<template>
  <RuleGoWorkspace :options="{ mode: 'app', url: 'http://127.0.0.1:9090' }" />
</template>

<script setup>
import { RuleGoWorkspace } from '@rulego/editor'
import '@rulego/editor/style.css'   // 必须引入样式
</script>

Element Plus 需在宿主 app.use(ElementPlus) 注册。集成形态与配置详见 配置。

---

作为独立应用（二次开发 / 部署）

获取源码后，在项目目录执行：

安装依赖：

npm install

本地开发：

npm run dev

构建

editor 提供多个构建脚本，按用途选择：

脚本	产物	用途
npm run build	SPA 应用（base: '/'）	独立部署到根路径
npm run build:editor	SPA 应用（base: '/editor/'）	部署到 rulego-server 的 /editor/ 子路径
npm run build:lib	ESM 库包（dist/rulego-editor.es.js + style.css）	打包成 @rulego/editor 库供宿主集成

npm run build          # 或 build:editor / build:lib

部署到 RuleGo-Server

build / build:editor 的产物默认输出到 dist/ 目录。将 dist/ 目录下的所有文件复制到 RuleGo-Server 的 editor/ 目录即可：

your-app/
├── server          # 服务端二进制
├── config.conf     # 配置文件
└── editor/         # 构建产物（原 dist/ 内容）
    ├── index.html
    ├── config/
    └── assets/

确保 config.conf 中 resource_mapping 配置正确：

resource_mapping = /editor/*filepath=./editor,/images/*filepath=./editor/images

启动 server 后访问 http://localhost:9090/ 即可使用编辑器。

集成注意事项

如果编辑器需要集成到 RuleGo-Server，确保用 npm run build:editor 构建（或在 vite.config.js (opens new window) 中把 base 配置为 /editor/）：

export default defineConfig({
  base: '/editor/',
  // ...
})

如果是独立部署或嵌入到其他系统，根据实际路径修改 base 配置。

editor 产物已通过 go:embed 打入 server 二进制时，http://server:9090/ 直接访问即可，无需手动部署 editor/ 目录。