网站建设 个人模板下载,网络学习平台,虚拟主机可以做视频视频网站吗,半成品公司 网站从react到xflow 注意#xff1a;xflow 1.0版本已经停止维护#xff0c;2.0版本目前没有任何文档#xff0c;也不太推荐使用 0、学习目标
可以使用react框架构建出前端web页面#xff0c;并且使用xflow插入流程图
1、为什么要使用react#xff1f;
优点#xff1a;使用…从react到xflow 注意xflow 1.0版本已经停止维护2.0版本目前没有任何文档也不太推荐使用 0、学习目标
可以使用react框架构建出前端web页面并且使用xflow插入流程图
1、为什么要使用react
优点使用reactvue框架开发前端页面比手搓htmlcssjs开发速度更快且可用的第三方组件很多效率高
缺点有一定的上手成本
2、开发工具和环境准备
nodejswebstorm
3、前置知识准备
语言html、css、js、tsES6、JSX、TSX 环境nodejsyarn 打包webpack
4、快速启动一个react
启动一个helloworld项目https://blog.csdn.net/qq_40432886/article/details/117294503
5、使用组件加速开发
使用react后复杂的页面被分为了多个小模块和可复用的组件但是简单的buttonform还是需要我们自己来写所以使用别人已经写好的组件可以加速开发效率。
例如使用ant design中的buttonicon等组件需要什么就复制到自己的代码中即可
6、使用模板开发
虽然使用组件可以加速开发但是其实很多网页都是相似的区别很小例如企业管理中台后台等系统的界面
所以ant design pro直接提供了网页模板一键启动一个后台管理系统稍微改动一下即可定制化
7、网页如何添加流程图、ER图
有时候网页有特殊的需求例如添加一个可视化流程图DAG图等我们同样可以使用别人开发好的组件继承到我们的网页中
使用Xflow就可以很方便的在网页中集成流程图等
8、快速使用Xflow
介绍XFlow 是 AntV 旗下, 基于 X6 图编辑引擎、面向 React 技术栈用户的图编辑应用级解决方案, 旨在让复杂的图编辑应用开发简单高效。 xflow官网 https://xflow.antv.vision/docs/tutorial/intro/getting-started/ ant designhttps://ant-design.antgroup.com/components/overview-cn/ ant design prohttps://pro.ant.design/zh-CN/docs/getting-started/ 可以参考这篇文章快速跑一个demo https://segmentfault.com/a/1190000042081353 使用前的前置知识
语言html、css、tsES6 环境nodejsyarn 打包webpack 框架react 脚手架umiant design ant design pro 图可视化/图编辑Xflow/X6 需求基于react使用ant design构建前端页面并且使用Xflow组件插入流程图DAG图等
