最新 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.rhkb.cn/news/184551.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【机器学习3】有监督学习经典分类算法

1 支持向量机 在现实世界的机器学习领域&#xff0c; SVM涵盖了各个方面的知识&#xff0c; 也是面试题目中常见的基础模型。 SVM的分类结果仅依赖于支持向量&#xff0c;对于任意线性可分的两组点&#xff0c;它 们在SVM分类的超平面上的投影都是线性不可分的。 2逻辑回归 …

Python--- lstrip()--删除字符串两边的空白字符、rstrip()--删除字符串左边的空白字符、strip()--删除字符串右边的空白字符

strip() 方法主要作用&#xff1a;删除字符串两边的空白字符&#xff08;如空格&#xff09; lstrip() 方法 left strip&#xff0c;作用&#xff1a;只删除字符串左边的空白字符 rstrip() 方法&#xff0c;作用&#xff1a;只删除字符串右边的空白字符 strip 英 /strɪp…

k8s 目录和文件挂载到宿主机

k8s生产中常用的volumes挂载方式有&#xff1a;hostPath、pv&#xff0c;pvc、nfs 1.hostPath挂载 hostPath是将主机节点文件系统上的文件或目录挂载到Pod 中&#xff0c;同时pod中的目录或者文件也会实时存在宿主机上&#xff0c;如果pod删除&#xff0c;hostpath中的文…

android studio 编译Telegram源码经验总结(2023-11-05)

前言 Telegram是一款强大的端到端加密IM&#xff0c;专注于安全性和速度&#xff0c;支持Android/IOS/Windows/macOS等平台&#xff0c;功能丰富&#xff0c;运行流畅&#xff0c;免费开源&#xff0c;代码具有学习和研究意义。 一、android telegram源码下载地址&#xff1a; …

农林牧数据可视化监控平台 | 智慧农垦

数字农业是一种现代农业方式&#xff0c;它将信息作为农业生产的重要元素&#xff0c;并利用现代信息技术进行农业生产过程的实时可视化、数字化设计和信息化管理。能将信息技术与农业生产的各个环节有机融合&#xff0c;对于改造传统农业和改变农业生产方式具有重要意义。 图扑…

在HTML单页面中,使用Bootstrap框架的多选框如何提交数据

1.引入Bootstrap CSS和JavaScript文件&#xff1a;确保在HTML页面的标签内引入Bootstrap的CSS和JavaScript文件。可以使用CDN链接或者下载本地文件。 <link rel"stylesheet" href"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css&q…

git命令行操作

git remote update origin --prune 更新本地的git分支保持和远程分支一致 git clone -b develop XXX 拉取某个分支的代码 1、创建一个空文件夹&#xff0c;在其中打开Git Bash Here&#xff0c;输入&#xff1a; git clone 刚刚复制的粘贴过来&#xff0c;回车 2、打开你拉下…

IDEA版SSM入门到实战(Maven+MyBatis+Spring+SpringMVC) -Maven核心概念

一.Maven的POM POM全称&#xff1a;Project Object Model【项目对象模型】&#xff0c;将项目封装为对象模型&#xff0c;便于使用Maven管理【构建】项目 pom.xml常用标签 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://m…

OAuth2.0双令牌

OAuth 2.0是一种基于令牌的身份验证和授权协议&#xff0c;它允许用户授权第三方应用程序访问他们的资源&#xff0c;而不必共享他们的凭据。 在OAuth 2.0中&#xff0c;通常会使用两种类型的令牌&#xff1a;访问令牌和刷新令牌。访问令牌是用于访问资源的令牌&#xff0c;可…

MySQL之表的约束

目录 表的约束1.空属性2.默认值3.列描述4.zerofill5.主键6.自增长7.唯一键8.外键 表的约束 真正约束字段的是数据类型&#xff0c;数据类型规定了数据的用法、范围…假如我们没有按照其规定的约束&#xff0c;那么数据将插入不成功但是数据类型约束很单一&#xff0c;需要有一…

pytorch之relu激活函数

目录 1、relu 2、relu6 3、leaky_relu 4、ELU 5、SELU 6、PReLU 1、relu ReLU&#xff08;Rectified Linear Unit&#xff09;是一种常用的神经网络激活函数&#xff0c;它在PyTorch中被广泛使用。ReLU函数接受一个输入值&#xff0c;如果该值大于零&#xff0c;则返回该…

NetworkManager 图形化配置 bond

1、在桌面右下角找到网络连接标识&#xff0c;鼠标右击&#xff0c;选择编辑连接&#xff0c;如下图 注意&#xff1a;此次示例使用 ens37 和 ens38 两张网卡组成 bond。在配置 bond 前为了网 络稳定如果子网卡已有网络连接的建议先删除 bond 子网卡的网络连接。 2、单击按钮&a…

VSCode设置中文语言界面(VScode设置其他语言界面)

一、下载中文插件 二、修改配置 1、使用快捷键 CtrlShiftP 显示出搜索框 2、然后输入 configure display language 3、点击 (中文简体) 需要修改的语言配置 三、重启 四、可能出现的问题 1、如果configure display language已经是中文配置&#xff0c;界面仍是英文 解决&a…

使用R语言构建HTTP爬虫:IP管理与策略

目录 摘要 一、HTTP爬虫与IP管理概述 二、使用R语言进行IP管理 三、爬虫的伦理与合规性 四、注意事项 结论 摘要 本文深入探讨了使用R语言构建HTTP爬虫时如何有效管理IP地址。由于网络爬虫高频、大量的请求可能导致IP被封禁&#xff0c;因此合理的IP管理策略显得尤为重要…

吴恩达《机器学习》5-6:向量化

在深度学习和数值计算中&#xff0c;效率和性能是至关重要的。一个有效的方法是使用向量化技术&#xff0c;它可以显著提高计算速度&#xff0c;减少代码的复杂性。接下来将介绍向量化的概念以及如何在不同编程语言和工具中应用它&#xff0c;包括 Octave、MATLAB、Python、Num…

【Java初阶习题】 -- 类和对象

目录 1.局部变量必须先初始化才能使用2. this的两种用法3. import语句不能导入一个指定的包4.代码块的执行顺序5.静态变量的调用6 . 现有一个Data类&#xff0c;内部定义了属性x和y&#xff0c;在main方法中实例化了Data类&#xff0c;并计算了data对象中x和y的和。 1.局部变量…

怎样在iOS手机上进行自动化测试

Airtest支持iOS自动化测试&#xff0c;在Mac上为iOS手机部署iOS-Tagent之后&#xff0c;就可以使用AirtestIDE连接设备&#xff0c;像连接安卓设备一样&#xff0c;实时投影、控制手机。iOS测试不仅限于真机测试&#xff0c;iOS模拟器也可以进行。Mac端上部署完成后还可以提供给…

mediapipe流水线分析 二

目标检测 Graph 一 流水线上游输入处理 1 TfLiteConverterCalculator 将输入的数据转换成tensorflow api 支持的Tensor TfLiteTensor 并初始化相关输入输出节点 &#xff0c;该类的业务主要通过 interpreter std::unique_ptrtflite::Interpreter interpreter_ nullptr; 实现…

js原型链

什么叫原型链 原型链是js中的核心&#xff0c;原型链将各个属性链接起来&#xff0c;在原型链上面定义&#xff0c;原型链上的其他属性能够使用&#xff0c;原型链就是保证继承 原型链区分 原型链分为显式原型和隐式原型 显式原型&#xff1a;只有函数和构建函数才有显式原型…

Spark 新特性+核心回顾

Spark 新特性核心 本文来自 B站 黑马程序员 - Spark教程 &#xff1a;原地址 1. 掌握Spark的Shuffle流程 1.1 Spark Shuffle Map和Reduce 在Shuffle过程中&#xff0c;提供数据的称之为Map端&#xff08;Shuffle Write&#xff09;接收数据的称之为Reduce端&#xff08;Sh…