vue vite之LogicFlow安装核心依赖及项目初始化详解

目录
  • 推荐几个好用的工具
  • 进入正题
  • 1. 初始化项目：
  • 2. 安装LogicFlow核心依赖：
  • 3. 初始化目录及容器：
  • 4. 导入LF核心模块和默认样式文件：
  • 5. 声明LF和容器对象并在挂在时初始化：
  • 6. 运行项目

推荐几个好用的工具

进入正题

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

这一节将讲解快速上手 LogicFlow 流程图编辑框架的准备工作，项目整体基于Vue3+Vite3+Ts4开发，为帮助还为熟练使用 Vue3 和 Typescript 语法的小伙伴提供便利，如果你已经很熟练在Vue3中的开发习惯，建议直接访问 LogicFlow 将获取完整的入门指南。

1. 初始化项目：

  • （1）如果你在本地初始化项目，你可以直接使用 npm create vite 创建，并选择 Vue 框架及 TypeScript 变体;
  • （2）如果你使用的是1024code在线编写代码，可以直接克隆 【项目模板】Vue3+Vite3+Ts4得到一个项目模板；

2. 安装LogicFlow核心依赖：

在项目根目录执行 npm i @logicflow/core 安装lf的核心模块；如果你使用1024code在线编写代码，在右侧的Shell标签页就是你执行安装命令的地方了；

3. 初始化目录及容器：

  • （1）移除项目中不需要用到的目录（components/HelloWorld.vue）以及在App.vue中的引用；
  • （2）为LF渲染提供渲染的容器（区域），并为容器设置一个固定的宽高属性：
<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({
    // 通过选项指定了渲染的容器和需要显示网格
    container: container.value,
    grid: true,
  })
  lf.value.render();
})

6. 运行项目

本地搭建的项目就执行 npm run dev 启动了，如果你要是使用的是1024code在线编写代码，那么在界面顶部的运行按钮点击后将开始启动项目，如果没有任何的报错信息，那么恭喜你项目成功运行好了。

以上就是LogicFlow安装核心依赖及项目初始化详解的详细内容，更多关于LogicFlow安装核心依赖的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • vue3+vite兼容低版本的白屏问题详解(安卓7/ios11)

    目录 如何兼容ios11 如何兼容安卓7 如何使用@vitejs/plugin-legacy 补充知识:vue打包项目以后白屏和图片加载不出来问题解决方法 总结 vue3打包后在低版本浏览器或webview中出现白屏,原因就是因为语法兼容问题.根据vite官方文档描述,build.target默认支持 Chrome >=87.Firefox >=78.Safari >=14.Edge >=88 传送,所以需要我们手动兼容低版本. 本篇以vite2.安卓7/ios11为例. 如何兼容

  • vue3+vite项目中按需引入vant报错:Failed to resolve import的解决方案

    目录 问题描述 原因分析 解决方案 总结 问题描述 近日尝试使用vite+vue3+vant开发项目过程中,参考vant官网开发指南->快速上手->引入组件 按照上述配置好后,运行vite环境报错:Failed to resolve import 原因分析 根据报错信息,发现是vant的样式引入路径不对. 程序解析为:项目路径/node_modules/vant/lib/vant/es/组件/style 实际应该是:项目路径/node_modules/vant/lib/ vant/es/组件/

  • Vue3从0搭建Vite打包组件库使用详解

    目录 打包配置 声明文件 打包配置 本篇文章将介绍如何使用 vite 打包我们的组件库,同时告诉大家如何使用插件让打包后的文件自动生成声明文件(*.d.ts) vite 专门提供了库模式的打包方式,配置其实非常简单,首先全局安装 vite 以及@vitejs/plugin-vue pnpm add vite @vitejs/plugin-vue -D -w 在 components 文件下新建vite.config.ts配置文件 import { defineConfig } from "vit

  • Vue3中Vite和Vue-cli的特点与区别详解

    目录 1. 创建3.0项目 Vite 与 Vue-cli 是什么? Vue-cli 的特点: Vite 的特点: Vite 和 Vue-cli的区别: 总结: 1. 创建3.0项目 vue-cli : 安装并执行 npm init vue@latest 选择项目功能时: 除了第一项的项目名字外,其他可以暂时No cd title npm install npm run dev :运行 npm run build: 打包 (生成一个dist文件夹) vite: 使用vite 体验更快速 npm i

  • vue2老项目vite升级改造过程记录

    目录 前言 背景 改造过程 保留webpack的选项 vite引入和配置 vite-plugins引入 require报错问题 配置 完整配置 结束 总结 前言 Vite是一种新型前端构建工具,能够显著提升前端开发体验.它主要由两部分组成: 一个开发服务器,它基于 原生 ES 模块 提供了 丰富的内建功能,如速度快到惊人的 模块热更新(HMR). 一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源. Vite 意在提供开箱即用的配置,同时

  • 使用Vite+Vue3+Vant全家桶快速构建项目步骤详解

    使用Vite+Vue3+Vant全家桶快速构建项目步骤详解

    目录 引言 一.vue3全家桶模板介绍 1.版本依赖 2.全家桶内置集成 二.安装 tive-cli 命令行工具 三.生成项目 四.项目体验 引言 随着Vue3 和 Vite 版本的不断更新完善,开发体验有了质的飞跃.因此,越来越多的大厂也逐步拥抱 Vue3. 利用Vite 脚手架工具可以很轻松生成以 Vue3 为模板的项目,但是作为Vue全家桶的 vue-router.vuex.axios等成员,需要自己一个一个去配置.于是便自行开发了本文讲到的 tive-cli 脚手架模板工具,只需短短几个

  • vue中i18n的安装与几种使用方式详解

    vue中i18n的安装与几种使用方式详解

    目录 vue中i18n安装 项目中的使用 使用方式 组件里使用 使用方式js 总结 介绍 Vue I18n 是 Vue.js 的国际化插件.它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中. vue中i18n安装 1.在项目中安装i18n npm install vue-i18n 2.如果在一个模块系统中使用它,你必须通过 Vue.use() 明确地安装 vue-i18n: import Vue from 'vue' import VueI18n from 'vue-i18n'

  • Vue安装浏览器开发工具的步骤详解

    开发vue时,浏览器有一个好的开发调试工具能让开发事半功倍,磨刀不误砍柴工. 步骤 1.下载工具 地址:  https://github.com/vuejs/vue-devtools 2.安装依赖 cmd进入vue-devtools文件夹,安装相关依赖,依次执行npm install,再执行npm run build. 3.修改配置 打开shells>chrome>src>manifest.json,修改"persistent":false为true. 4.浏览器安装

  • webpack安装配置与常见使用过程详解（结合vue）

    webpack介绍和安装 webpack:前端模块化打包工具 安装webpack需要安装Node.js,Node.js自带软件包管理工具npm 查看自己的node版本: node -v 全局安装webpack cnpm install webpack -g 查看webpack版本 webpack --version 局部安装webpack cnpm install webpack --save-dev 为什么全局安装之后还需要局部安装? 在终端直接执行webpack,使用的是全局webpack

  • Python安装依赖(包)模块方法详解

    Python模块,简单说就是一个.py文件,其中可以包含我们需要的任意Python代码.迄今为止,我们所编写的所有程序都包含在单独的.py文件中,因此,它们既是程序,同时也是模块.关键的区别在于,程序的设计目标是运行,而模块的设计目标是由其他程序导入并使用. 不是所有程序都有相关联的.py文件-比如说,sys模块就内置于Python中,还有些模块是使用其他语言(最常见的是C语言)实现的.不过,Python的大多数库文件都是使用Python实现的,因此,比如说,我们使用了语句import coll

  • vue demi支持sfc方式的vue2vue3通用库开发详解

    vue demi支持sfc方式的vue2vue3通用库开发详解

    目录 背景 技术要点 vue-demi sfc compiler 实现方式 vue2.6 + vue3 + vite + vue-demi package.json vite.config.ts main.ts postinstall vue2.7 + vue3 + vite + vue-demi + yarn workspaces 目前没找到vue3为主包的开发方式 注意点 1.@vue/composition-api重复引用问题 2.由于要兼容vue2,vue3的 setup sfc语法糖不

  • vue.js的状态管理vuex中store的使用详解

    一.状态管理(vuex)简介 vuex是专为vue.js应用程序开发的状态管理模式.它采用集中存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.vuex也集成刀vue的官方调试工具devtools extension,提供了诸如零配置的time-travel调试.状态快照导入导出等高级调试功能. 二.状态管理核心 状态管理有5个核心,分别是state.getter.mutation.action以及module.分别简单的介绍一下它们: 1.state state为

  • node创建Vue项目步骤详解

    vue的安装 Vue.js不支持IE8及以下版本.因为Vue.js使用了ECMAScript5特性,IE8显然不能模拟. Vue.js支持所有兼容ECMAScript5的浏览器. 在用Vue.js构建大型应用时,推荐使用npm安装,npm能很好的和webpack等打包工具配合使用. 首先Vue的安装依赖于node.js,要保证你的计算机上已经安装过node.js. 如何查看node是否安装或者node版本呢? 进入cmd,输入命令 node -v,回车查看.node最好使用新一些的版本,否则后续

  • package.json依赖环境相关属性详解

    目录 引言 一.package.json 1. package.json简介 2. package-lock.json 二.package.json常用属性 1. script 2. bin 3. workspaces 三.package.json环境相关属性 1 type 2 main & module & browser 3 exports 四.package.json依赖相关属性 1 peerDependencies 2 peerDependenciesMeta 五.package.

  • CentOS 6.6 源码编译安装MySQL 5.7.18教程详解

    一.添加用户和组 1.添加mysql用户组 # groupadd mysql 2.添加mysql用户 # useradd -g mysql -s /bin/nologin mysql -M 二.查看系统中是否安装mysql,如果安装需要卸载 # rpm -qa | grep mysql mysql-libs-5.1.73-3.el6_5.x86_64 # rpm -e mysql-libs-5.1.73-3.el6_5.x86_64 --nodeps 三.安装所需依赖包 # yum -y ins

随机推荐