关于antv:xflow流程可视化项目搭建

本系列次要讲述一个自定义流程可视化性能的开发，应用 Ant Design Pro 作为脚手架，AntV/xflow 作为可视化开发框架，定制自定义节点，对节点及连线增加自定义属性，应用 formliy 生成自定义表单对节点属性进行编辑。

本篇次要介绍整体页面以及 xflow 各个控件的性能。

开发前筹备

咱们抉择 Ant Design Pro + umijs3.x 作为咱们开发的脚手架，umi4 曾经能够尝鲜了然而还不稳固，前面稳固了降级 umi4，首先构建脚手架，倡议应用 pnpm

mkdir designable-xflow && cd designable-xflow
yarn create @umijs/umi-app
yarn

根本脚手架构建实现，接下来装置 xflow，以及 formliy

yarn add @antv/xflow @formily/core @formily/react @formily/antd

这样咱们应用到的根本库都装置结束了，接下来咱们对主视图进行革新。
首先主目录新建 config/config.ts，将.umirc.ts 文件中的内容复制到 config.ts 中，而后删除.umirc.ts，增加对应路由
config/config.ts:

import {defineConfig} from 'umi';

export default defineConfig({
  nodeModulesTransform: {type: 'none',},
  layout: {},
  routes: [
    {
        path: '/',
        redirect: '/xflow',
      },
      {
        name: '流程可视化',
        path: '/xflow',
        icon: 'SmileOutlined',
        component: '@/pages/Xflow',
      },
  ],
  fastRefresh: {},});

将 antv 官网 xflow 列子复制一份到 pages 目录下（pages/Xflow），链接，启动服务

yarn run start

然而这时候看到的主页是乱的，短少了 css 引入，在 pages/Xflow/index.tsx 中增加

+ import '@antv/xflow/dist/index.css'
import './index.less'

src下新建global.css，增加

@import '~antd/dist/antd.css';）

这时候能够看见咱们的页面和官网列子一样了，官网列子还是比拟全面的，然而只限于展现，在正式应用时咱们须要对组件进行定制化，比方一个组件代表什么，组件下的属性有什么，那些属性能够编辑，组件和组件之间是否能够连贯等等，官网的列子满足不了这么多场景，所以须要咱们自定义组件进行开发，接下来几篇博文将会对这些状况进行一一解答与阐明，纵情期待。

本文地址：链接
本文 github 地址：链接