logicflow-vue

Logic-flow 的vue应用实例
logic Flow 详细内容参照【文档】

功能

实例中包含的功能实现：

• 画布
• 快捷操作
• 节点面板
• 节点自定义
• 节点菜单
• 图形下载

画布：src/components/LF.vue
节点自定义： src/components/registerNode
节点面板：src/components/NodePanel.vue

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

热更新

针对npm link 无法热更新问题

方法：

使用 yalc + nodemon 结合，监听改动，热更新到页面；

过程：

1.全局安装 yalc ，执行：npm i yalc -g；

2.全局安装 nodemon，执行： npm i -g nodemon；

3.进入到 logicflow-vue目录下，执行 yalc push（模拟本地包的发布）；

4.进入到 aio-sys 项目中，执行 yalc add logicflow-vue，链接成功之后，本地会有 yalc.lock 和 .yalc 目录，这时已经可以连接到本地包了；执行 npm i 安装link 进来的package.json中的包

5.logicflow-vue 目录下执行 npm run watch

结果：

经过上面流程，logicflow-vue 的改动就会自动重新打包 并 yalc push，项目中也可以正常热更新

注意： 每次在项目中 npm i 操作之后，需要重新 yalc link