Butterfly 项目安装和配置指南

最新推荐文章于 2024-09-13 22:18:54 发布

虞湛吉Kacey

最新推荐文章于 2024-09-13 22:18:54 发布

阅读量212

点赞数 1

本文链接：https://blog.csdn.net/gitblog_07858/article/details/142222718

版权

Butterfly 项目安装和配置指南

butterfly 🦋Butterfly，A JavaScript/React/Vue2 Diagramming library which concentrate on flow layout field. (基于JavaScript/React/Vue2的流程图组件) 项目地址: https://gitcode.com/gh_mirrors/butt/butterfly

1. 项目基础介绍和主要编程语言

Butterfly 是一个基于 JavaScript 的流程图组件库，专注于流程布局领域。它支持 React 和 Vue2 框架，提供了丰富的功能和灵活的定制选项，适用于需要流程图和节点式编排的应用场景。

2. 项目使用的关键技术和框架

JavaScript: 项目的主要编程语言。
React: 支持 React 框架，提供 React 组件。
Vue2: 支持 Vue2 框架，提供 Vue2 组件。
jQuery: 内部依赖，用于部分功能的实现。
Lodash: 内部依赖，用于处理数据和逻辑。

3. 项目安装和配置的准备工作和详细安装步骤

准备工作

Node.js: 确保你的系统已经安装了 Node.js 和 npm（Node.js 的包管理工具）。你可以通过 Node.js 官网下载并安装。
Git: 确保你的系统已经安装了 Git。你可以通过 Git 官网下载并安装。

安装步骤

1. 克隆项目仓库

首先，你需要从 GitHub 上克隆 Butterfly 项目到本地。

git clone https://github.com/alibaba/butterfly.git

2. 进入项目目录

克隆完成后，进入项目的根目录。

cd butterfly

3. 安装依赖

使用 npm 安装项目所需的依赖包。

npm install

4. 运行示例项目

项目中包含一个示例项目，你可以通过以下命令启动它。

cd example
npm install
npm start

5. 引入 Butterfly 组件

在你的项目中引入 Butterfly 组件，并根据需要进行配置。

// 完全版，内部包含jquery和lodash
import { Canvas, Group, Node, Edge } from 'butterfly-dag';
import 'butterfly-dag/dist/index.css';

// 如果你引用的项目使用了jquery和lodash，为了缩小项目的体积，我们建议：
import { Canvas, Group, Node, Edge } from 'butterfly-dag/pack/index.js';
import 'butterfly-dag/pack/index.css';

// 生成画布
let canvas = new Canvas({
  root: dom, // canvas的根节点(必传)
  zoomable: true, // 可缩放(可传)
  moveable: true, // 可平移(可传)
  draggable: true, // 节点可拖动(可传)
});

canvas.draw({
  groups: [], // 分组信息
  nodes: [], // 节点信息
  edges: [], // 连线信息
});