【源码】基于 React 和 Vue 的数睿开放平台 UI 插件开发项目

项目简介

本项目是基于 React 和 Vue 开发的数睿开放平台 UI 插件，能为用户提供应用设计、分析仪、大屏、填报设计等核心模块自定义前端组件的能力，并且支持用户定制 UI 样式和页面逻辑。

项目的主要特性和功能

1. 支持本地编辑开发，可进行可视化预览。
2. 集成 npm run plugin 打包命令，支持一键打包。
3. 支持 css、less、scss 语言。
4. 内置 AntD 企业级 UI 设计语言和 React UI 类库。
5. 使用 proxy 方式代理接口，支持开发请求代理。
6. 引入 EventBus 及组件中心、事件中心，实现组件间逻辑通信。

安装使用步骤

环境准备

scli 方式

1. 打开本地 cmd 命令运行窗口。
2. 执行 npm i sdata-cli -g 全局安装 sdata-cli 服务。
3. 安装完成后，运行 scli i，选择对应模块及框架。
4. 执行 npm i 或者 yarn install 安装相关依赖项。

分支及插件类型切换

1. 切换对应的分支及插件类型，如 vue 版本的应用插件为 vue - version - app。
2. 执行 npm i 或者 yarn install 安装相关依赖项。

启动开发服务器

• Vue 版本：运行 npm run serve。
• React 版本：运行 npm run start。

开发与调试

在 src 目录下进行插件源码开发，可通过本地调试和远程调试验证功能。远程调试步骤如下：

React 版本

1. 修改 proxy.js 的 target 字段为代理地址。
2. 修改 src/api/request.js 中 document.cookie 的 token 和 refreshToken 字段为代理地址请求头的相应字段。
3. 运行 npm run start。

Vue 版本

1. 修改 vue.config.js 的 target 字段为代理地址。
2. 修改 src/api/request.js 中 document.cookie 的 token 和 refreshToken 字段为代理地址请求头的相应字段。
3. 运行 npm run serve。

插件打包与上传

1. 执行 npm run plugin 进行插件打包。
2. 登录数睿平台，依次点击“开放平台”、“插件开发”、“我的插件”、“新增插件”。
3. 在新增插件弹窗中输入插件信息，选择本地打包好的前端插件包上传。

功能验证

• 上传二开插件包到验证环境，写入对应配置字段。
• 验证 events 需进入二开组件交互界面，添加打印输出逻辑。
• 验证 actions 可搭建简单场景，如按钮点击触发动作。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】