当前位置: 首页 > news >正文

最新 vie-vite框架下 jtopo安装使用

官方地址
官方源码
安装下载
1.官方好像都没有给git地址,尝试npm安装报错
在这里插入图片描述
2.找到1.0.5之前的版本npm i jtopo2,安装成功后使用报错,应该是版本冲突了
在这里插入图片描述

1.本地引入,

点击官方源码下载,需要jtopo_npm文件
在这里插入图片描述

2.引入到本地根目录

在这里插入图片描述

3.vue文件使用

<template><!-- 用于渲染显示的div --><div id="divId" style="height:600px;width:680px;border:1px solid gray"></div>
</template><script setup lang="ts">
import { onMounted } from 'vue'
import { topoManager } from "./TopoManager";
/** 初始化 */
onMounted(() => {topoManager.init(document.getElementById("divId"));
})
</script>

4.TopoManager文件是官方文件

import {Stage, Layer, Node, Link} from ‘…/…/jtopo_npm/core’;
能正常build打包,不确定生产环境地址是否有问题,若有使用后续更新
下面有安装到node_modules的方法,不用修改地址
在这里插入图片描述
运行成功
在这里插入图片描述


以前使用jtopo-in-node,但版本很旧了,文档都找不到了
import ‘jtopo-in-node’;
是这种使用方式 new JTopo.Scene(stage);


按官网提示 cnpm install ./jtopo_npm/core

一直安装失败,不知道是不是版本的问题
看到官方package.json
在这里插入图片描述
灵机一动,给本地项目加上

 "@jtopo/core": "file:jtopo_npm/core","@jtopo/editor": "file:jtopo_npm/editor",

再执行cnpm i ,node_modules依赖包上有了
直接import {Stage, Layer, Node, Link} from '@jtopo/core';引入,也能运行成功了
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


尝试使用,也是2d画图的
Konva

http://www.lryc.cn/news/217676.html

相关文章:

  • 基础课20——智能客服系统的使用维护
  • Aop自定义注解生成日志
  • 虚幻引擎:RPC:远端调用
  • 涉及多种位运算操作混合类题目——通过加转三进制(扩大状态,不变枚举量):CF1033F
  • BIOS开发笔记 - DDR基础
  • 基于SpringBoot+Vue的旅游系统、前后端分离
  • 手动制作Docker容器镜像
  • WPF布局控件之WrapPanel布局
  • 实现自动接听电话
  • 计算机网络之网络层(全)
  • PS学习笔记合集
  • 汇总记录Python常用的基础内置方法
  • 基于Tensorflow卷积神经网络玉米病害识别系统(UI界面)
  • Execution failed for task ‘:keyboard_utils:compileDebugKotlin‘.
  • AC修炼计划(AtCoder Regular Contest 163)
  • 持续进化,快速转录,Faster-Whisper对视频进行双语字幕转录实践(Python3.10)
  • 【设计模式】第24节:行为型模式之“模板方法模式”
  • 【考研数学】数学“背诵手册”(二)| 线代及概率论部分
  • Android WMS——WindowState介绍(十三)
  • C/C++网络编程基础知识超详细讲解第二部分(系统性学习day12)
  • 【教3妹学编程-算法题】117. 填充每个节点的下一个右侧节点指针 II
  • window10 mysql8.0 修改端口port不生效
  • 欧盟网络安全威胁:虚假与错误信息
  • 006 Linux 进程的概念 | 获取进程的PID
  • 时序预测 | Python实现ARIMA-CNN-LSTM差分自回归移动平均模型结合卷积长短期记忆神经网络时间序列预测
  • 《异常检测——从经典算法到深度学习》23 TimesNet: 用于常规时间序列分析的时间二维变化模型
  • 计算机网络(59)
  • 【CSS】CSS基础知识扫盲
  • React中的状态管理
  • 【优选算法系列】【专题九链表】第一节.链表常用技巧和操作总结(2. 两数相加)