快捷導(dǎo)航

vue vite之LogicFlow安裝核心依賴及項(xiàng)目初始化詳解

更新時(shí)間：2023年01月09日 10:52:55 作者：小鑫同學(xué)

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

進(jìn)入正題

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

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

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

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

2. 安裝LogicFlow核心依賴：

在項(xiàng)目根目錄執(zhí)行 npm i @logicflow/core 安裝lf的核心模塊；如果你使用1024code在線編寫代碼，在右側(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ì)象，為了更明顯的看到渲染效果這里專門開啟的 grid 選項(xiàng)；

// 聲明容器的對(duì)應(yīng)ref對(duì)象和LF對(duì)象
const container = ref();
const lf = ref<LogicFlow>();
onMounted(() => {
  lf.value = new LogicFlow({
    // 通過選項(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在線編寫代碼，那么在界面頂部的運(yùn)行按鈕點(diǎn)擊后將開始啟動(dòng)項(xiàng)目，如果沒有任何的報(bào)錯(cuò)信息，那么恭喜你項(xiàng)目成功運(yùn)行好了。

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

您可能感興趣的文章: