最新 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.mfbz.cn/a/118462.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

计算机毕设 基于大数据的服务器数据分析与可视化系统 -python 可视化 大数据

文章目录 0 前言1 课题背景2 实现效果3 数据收集分析过程**总体框架图****kafka 创建日志主题****flume 收集日志写到 kafka****python 读取 kafka 实时处理****数据分析可视化** 4 Flask框架5 最后 0 前言 &#x1f525; 这两年开始毕业设计和毕业答辩的要求和难度不断提升&a…

基于SSM的鲜花商城系统

基于SSM的鲜花商城系统的设计与实现~ 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringSpringMVCMyBatis工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 主页 鲜花列表 热销商品 商品详情 登录界面 购物车 管理员界面 摘要 基于SSM的鲜花商…

oracle 数据库 LISTAGG详解

目录 简介: 效果展示&#xff1a; 举例&#xff1a; 测试表及数据&#xff1a; 简介: Oracle数据库的LISTAGG函数用于将多行数据合并为单个字符串&#xff0c;常见于分组操作&#xff0c;实现数据的垂直到水平的转换。 解决问题如&#xff1a;一个人有多个手机号&#xff0c…

AI 绘画 | Stable Diffusion 提示词

Prompts提示词简介 在Stable Diffusion中&#xff0c;Prompts是控制模型生成图像的关键输入参数。它们是一种文本提示&#xff0c;告诉模型应该生成什么样的图像。 Prompts可以是任何文本输入&#xff0c;包括描述图像的文本&#xff0c;如“一只橘色的短毛猫&#xff0c;坐在…

pandas - 数据分组统计

1.分组统计groupby()函数 对数据进行分组统计&#xff0c;主要适用DataFrame对象的groupby()函数。其功能如下。 &#xff08;1&#xff09;根据特定条件&#xff0c;将数据拆分成组 &#xff08;2&#xff09;每个组都可以独立应用函数&#xff08;如求和函数sum()&#xff0…

C++多态基础

文章目录 1.多态概念2.多态使用3.多态析构4.多态隐藏5.多态原理5.1.单类继承5.1.1.问题一&#xff1a;非指针或引用无法调用多态5.1.2.问题二&#xff1a;同类对象共用虚表5.1.3.问题三&#xff1a;子类对象拷贝父类对象虚表5.1.4.问题四&#xff1a;打印虚表地址和虚表内容 5.…

【C++类和对象中:解锁面向对象编程的奇妙世界】

【本节目标】 1. 类的6个默认成员函数 2. 构造函数 3. 析构函数 4. 拷贝构造函数 5. 赋值运算符重载 6. const成员函数 7. 取地址及const取地址操作符重载 1.类的6个默认成员函数 如果一个类中什么成员都没有&#xff0c;简称为空类。 空类中真的什么都没有吗&#xf…

Nginx默认会自动忽略请求头Headers里带下划线_的参数

起因&#xff1a;该接口设置了必须要传送app_code和app_secret才能正常访问。实际我在本地环境测试中&#xff0c;发现该接口是正常访问的&#xff0c;但是部署到正式系统之后发现&#xff0c;该接口一直提示app_code和app_secret不能为空。 后续排查&#xff1a;发现正式系统…

GitLab CI/CD 持续集成/部署 SpringBoot 项目

一、GitLab CI/CD 介绍 GitLab CI/CD&#xff08;Continuous Integration/Continuous Deployment&#xff09;是 GitLab 提供的一种持续集成和持续部署的解决方案。它可以自动化软件的构建、测试和部署过程&#xff0c;以便开发者更快地、更频繁地发布可靠的产品。 整体过程如…

Unity meta的一些常见属性

Unity会项目文件夹中的每个文件分配一个同名后缀为.meta的文件。 我们可以将meta文件理解不同文件之间的桥梁&#xff0c;通过它引擎可以管理不同文件之间的依赖关系。 使用TXT文本文件打开之后&#xff0c;大致属性如下&#xff1a; 其中常用的属性有guid、 assetBundleName以…

网络原理---网络初识

文章目录 网络发展史独立模式网络互连局域网LAN广域网WAN 网络通信基础IP地址端口号 认识协议什么是协议&#xff1f;协议分层为什么要分层&#xff1f;两种典型的分层方式&#xff1a;OSI七层TCP/IP五层 网络发展史 从我们出生以来&#xff0c;网络世界就已经纷繁错杂。我们虽…

大厂面试题-b树和b+树的理解

为了更清晰的解答这个问题&#xff0c;从三个方面来回答&#xff1a; a.了解二叉树、AVL树、B树的概念 b.B树和B树的应用场景 1.B树是一种多路平衡查找树&#xff0c;为了更形象的理解&#xff0c;我们来看这张图。 二叉树&#xff0c;每个节点支持两个分支的树结构&#xff…

阿里云二级域名绑定与宝塔Nginx反向代理配置

在阿里或者腾讯...各大域名商买好域名&#xff0c;备案解析好&#xff0c;目标URL&#xff0c;是真正的地址&#xff0c;比如一些端口&#xff0c;后者会自动填写。 注意ssl配置好&#xff0c;这里不要带反代端口

SoftwareTest4 - 咋设计一个好的测试用例

咋设计一个好的测试用例 一 . 设计测试用例的万能公式功能测试性能测试界面测试兼容性测试易用性测试安全测试案例案例1 : 对水杯设计测试用例案例 2 : 对登录页面设计测试用例 二 . 具体设计测试用例的方法2.1 等价类等价类的概念等价类的用例编写 2.2 边界值2.3 判定表2.4 场…

Rust学习日记(二)变量的使用--结合--温度换算/斐波那契数列--实例

前言&#xff1a; 这是一个系列的学习笔记&#xff0c;会将笔者学习Rust语言的心得记录。 当然&#xff0c;这并非是流水账似的记录&#xff0c;而是结合实际程序项目的记录&#xff0c;如果你也对Rust感兴趣&#xff0c;那么我们可以一起交流探讨&#xff0c;使用Rust来构建程…

国外住宅IP代理选择的8个方法,稳定的海外IP哪个靠谱?

一、国外住宅IP代理是什么&#xff1f; 代理服务器充当您和互联网之间的网关。它是一个中间服务器&#xff0c;将最终用户与他们浏览的网站分开。如果您使用国外代理IP&#xff0c;互联网流量将通过国外代理服务器流向您请求的地址。然后&#xff0c;请求通过同一个代理服务器…

【Redis】掌握篇--Redis与SSM进行整合

&#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于Redis的相关操作吧 目录 &#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 一.Redis与SSM的整合 1.添加Redis依赖 2…

网络安全应急响应工具(系统痕迹采集)-FireKylin

文章目录 网络安全应急响应工具(系统痕迹采集)-FireKylin1.FireKylin介绍【v1.4.0】 2021-12-20【v1.0.1】 2021-08-09 2.客户端界面Agent支持的操作系统FireKylinAgent界面使用方式比较传统方式与FireKylin比较无法可达目标的场景应用对比 3.使用教程设置语言Agent配置&#x…

掌握文件批量改名的技巧:实现跨文件夹文件统一命名及编号的实用方法“

在日常工作中&#xff0c;我们经常需要处理大量的文件&#xff0c;而这些文件的名字可能各不相同&#xff0c;给我们的管理工作带来了很大的不便。为了解决这个问题&#xff0c;今天我们为您推荐一款全新的文件批量改名工具&#xff0c;它可以帮助您在不同文件夹里的文件进行统…

操作系统复习(3)处理机调度与死锁

一、概述 1.1了解调度的层次 调度是指&#xff0c;在一个队列中&#xff0c;按照某种方法&#xff08;算法&#xff09;&#xff0c;选择一个合适的个体的过程。进程调度的功能就是按一定策略、动态地把CPU分配给处于就绪队列中的某一进程&#xff0c;并使之执行。 作业调度&…