vue vite之LogicFlow安裝核心依賴及項目初始化詳解

更新時間：2023年01月09日 10:52:55 作者：小鑫同學

這篇文章主要為大家介紹了vue vite之LogicFlow安裝核心依賴及項目初始化詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

進入正題

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

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

1. 初始化項目：

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

2. 安裝LogicFlow核心依賴：

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

3. 初始化目錄及容器：

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

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

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

4. 導入LF核心模塊和默認樣式文件：

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

5. 聲明LF和容器對象并在掛在時初始化：

聲明container容器對象；
聲明lf對象；
實例化lf對象并在選項中綁定容器對象，為了更明顯的看到渲染效果這里專門開啟的 grid 選項；

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