推薦幾個(gè)好用的工具

• var-conv 適用于VSCode IDE的代碼變量名稱(chēng)快速轉(zhuǎn)換工具
• generator-vite-plugin 快速生成Vite插件模板項(xiàng)目
• generator-babel-plugin 快速生成Babel插件模板項(xiàng)目

進(jìn)入正題

LogicFlow 是一款流程圖編輯框架，提供了一系列流程圖交互、編輯所必需的功能和靈活的節(jié)點(diǎn)自定義、插件等拓展機(jī)制。LogicFlow支持前端研發(fā)自定義開(kāi)發(fā)各種邏輯編排場(chǎng)景，如流程圖、ER圖、BPMN流程等。在工作審批配置、機(jī)器人邏輯編排、無(wú)代碼平臺(tái)流程配置都有較好的應(yīng)用。

這一節(jié)將講解快速上手 LogicFlow 流程圖編輯框架的準(zhǔn)備工作，項(xiàng)目整體基于Vue3+Vite3+Ts4開(kāi)發(fā)，為幫助還為熟練使用 Vue3 和 Typescript 語(yǔ)法的小伙伴提供便利，如果你已經(jīng)很熟練在Vue3中的開(kāi)發(fā)習(xí)慣，建議直接訪(fǎng)問(wèn) LogicFlow 將獲取完整的入門(mén)指南。

1. 初始化項(xiàng)目：

• （1）如果你在本地初始化項(xiàng)目，你可以直接使用 npm create vite 創(chuàng)建，并選擇 Vue 框架及 TypeScript 變體;
• （2）如果你使用的是1024code在線(xiàn)編寫(xiě)代碼，可以直接克隆 【項(xiàng)目模板】Vue3+Vite3+Ts4得到一個(gè)項(xiàng)目模板；

2. 安裝LogicFlow核心依賴(lài)：

在項(xiàng)目根目錄執(zhí)行 npm i @logicflow/core 安裝lf的核心模塊；如果你使用1024code在線(xiàn)編寫(xiě)代碼，在右側(cè)的Shell標(biāo)簽頁(yè)就是你執(zhí)行安裝命令的地方了；

3. 初始化目錄及容器：

• （1）移除項(xiàng)目中不需要用到的目錄（components/HelloWorld.vue）以及在App.vue中的引用；
• （2）為L(zhǎng)F渲染提供渲染的容器（區(qū)域），并為容器設(shè)置一個(gè)固定的寬高屬性：

<div ref="container" class="container"></div>

.container {
  width: 500px;
  height: 400px;
}

4. 導(dǎo)入LF核心模塊和默認(rèn)樣式文件：

import LogicFlow from "@logicflow/core";
import "@logicflow/core/dist/style/index.css";

5. 聲明LF和容器對(duì)象并在掛在時(shí)初始化：

• 聲明container容器對(duì)象；
• 聲明lf對(duì)象；
• 實(shí)例化lf對(duì)象并在選項(xiàng)中綁定容器對(duì)象，為了更明顯的看到渲染效果這里專(zhuān)門(mén)開(kāi)啟的 grid 選項(xiàng)；

// 聲明容器的對(duì)應(yīng)ref對(duì)象和LF對(duì)象
const container = ref();
const lf = ref<LogicFlow>();
onMounted(() => {
  lf.value = new LogicFlow({
    // 通過(guò)選項(xiàng)指定了渲染的容器和需要顯示網(wǎng)格
    container: container.value,
    grid: true,
  })
  lf.value.render();
})

6. 運(yùn)行項(xiàng)目

本地搭建的項(xiàng)目就執(zhí)行 npm run dev 啟動(dòng)了，如果你要是使用的是1024code在線(xiàn)編寫(xiě)代碼，那么在界面頂部的運(yùn)行按鈕點(diǎn)擊后將開(kāi)始啟動(dòng)項(xiàng)目，如果沒(méi)有任何的報(bào)錯(cuò)信息，那么恭喜你項(xiàng)目成功運(yùn)行好了。

以上就是LogicFlow安裝核心依賴(lài)及項(xiàng)目初始化詳解的詳細(xì)內(nèi)容，更多關(guān)于LogicFlow安裝核心依賴(lài)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！