二、LogicFlow 环境准备

专栏目录

1. LogicFlow 介绍
2. LogicFlow 环境准备
3. LogicFlow 基础配置介绍及实现一个基础 Demo

LogicFlow 介绍

LogicFlow 是一款流程图编辑框架，提供了一系列流程图交互、编辑所必需的功能和灵活的节点自定义、插件等拓展机制。LogicFlow支持前端研发自定义开发各种逻辑编排场景，如流程图、ER图、BPMN流程等。在工作审批配置、机器人逻辑编排、无代码平台流程配置都有较好的应用。

一段废话

目前这份专栏主要是针对 Vue2 + webpack 开发，说到这里，有些朋友可能忍不住要吐槽了，Vue2 都过时这么久了，还要在这个基础上开发讲解，难道不应该直接上 Vue3 + Vite + Ts 吗，或者其他什么Nuxt.js 或者 Next.js 也行啊。

有这种想法完全能够理解，但这里要提几点之所以在 Vue2 开发讲解的理由：

1. 目前这个需求是在原有 老项目Vue2 基础上进行迭代开发；
2. Vue2 是很经典的一个版本，覆盖面更大，介入 Vue3 更简单；

这一篇主要是讲解开发 LogicFlow 需要准备的运行环境，那么接下来我们就一步一步的先创建环境吧。

准备项目运行环境

1. 安装 Node

   • 官网下载 Node.js，因为是采用的 Vue2，所以版本不能太高，需要下载一些低版本Node，官网下载的是最新的，这里提供一个 所有版本的地址 供大家下载使用，下面截图里最上面的是最新的版本。
     
   • 下载后双击，然后直接下一步到底安装，如果项目很多，node版本都高低不同，那么建议安装一个 nvm 对 node 进行版本管理。
     

2. 创建 Vue2 项目
   下面的是我测试项目的 package.json 配置。如果不想过多处理，可以直接拷贝下来后初始化一个项目，或者对里面使用的依赖进行配置，下载对应的依赖包。

   {
     "name": "vue2-logicflow-project",
     "version": "0.1.0",
     "private": true,
     "scripts": {
       "start": "vue-cli-service serve",
       "build": "vue-cli-service build",
       "lint": "vue-cli-service lint"
     },
     "dependencies": {
       "@antv/layout": "^0.3.25",
       "@logicflow/core": "^1.2.27",
       "@logicflow/extension": "^1.2.27",
       "core-js": "^3.8.3",
       "element-ui": "^2.15.14",
       "less": "^4.2.0",
       "less-loader": "8.0.0",
       "vue": "^2.6.11",
       "vue-router": "^3.2.0"
     },
     "devDependencies": {
       "@babel/core": "^7.12.16",
       "@babel/eslint-parser": "^7.12.16",
       "@vue/cli-plugin-babel": "~5.0.0",
       "@vue/cli-plugin-eslint": "~5.0.0",
       "@vue/cli-service": "~5.0.0",
       "eslint": "^7.32.0",
       "eslint-plugin-vue": "^8.0.3",
       "vue-template-compiler": "^2.6.14"
     },
     "eslintConfig": {
       "root": true,
       "env": {
         "node": true
       },
       "extends": [
         "plugin:vue/essential",
         "eslint:recommended"
       ],
       "parserOptions": {
         "parser": "@babel/eslint-parser"
       },
       "rules": {}
     },
     "browserslist": [
       "> 1%",
       "last 2 versions",
       "not dead"
     ]
   }
   

   注意：如果是采用上面的 package.json 配置，那么步骤 【3，4，5】就不用再次下载安装

3. 安装 LogicFlow 核心依赖

   # npm
   npm install @logicflow/core --save
   
   # yarn
   yarn add @logicflow/core
   

   注意：这里暂不考虑通过 script 标签 方式引入

4. 安装 LogicFlow 插件

   # npm
   npm install @logicflow/extension --save
   
   # yarn
   yarn add @logicflow/extension
   

5. 安装 Css 预解析（根据自己的需求，这里采用less）

   # 指定less-loader版本，否则可能会出现样式解析失败的情况
   # npm
   npm install less less-loader@8.0.0 --save
   
   # yarn
   yarn add less less-loader@8.0.0
   

6. 运行项目

   # 使用命令根据自己需求喜好自行在 package.json 进行配置
   # npm
   npm run start
   
   # yarn
   yarn start
   

总结

这一章到这里就结束了，下一章就是基于这个环境，创建一个基础的demo，让demo跑起来，还有需要提一下的是后面所有的功能都是基于这个环境进行开发运行。

如果看完对你有所帮助，希望能够点赞，收藏。