如何在Vue-cli项目中使用JTopo
1.前言
jTopo（Javascript Topology library)是一款完全基于HTML5 Canvas的关系、拓扑图形化界面开发工具包。其体积小，性能优异，由一群开发爱好者来维护。唯一感觉不足的是它是一个纯js库，没有像使用ES6语法，不能像模块化开发那样使用import导入，
由于博主的项目是使用vue-cli搭建的模块化开发项目，想要使用第三方库最好的方式是通过npm install xxx安装，然后在项目里import xxx来使用。但是在JTopo官网上并没有发现有该库的npm包，在www.npmjs.com上搜索JTopo，虽然找到了该库的npm包，但是这些包都是由一些个人开发者通过修改源码上传的，并且年限过久，博主担心直接使用的话可能会有一些诡异的bug，所以博主研究了一下，如何在vue-cli项目中直接导入第三方js库，幸运的是，很快就找到了办法，并且很容易哈，现将方法记录下来，并提供demo，供大家参考。
2.解决办法
我们知道，无论是什么项目，最终通过打包后跑在浏览器上的肯定是一个html文件，在Vue中就是根目录下的index.html,在该文件中会将webpack打包后的build.js文件通过<script>标签方式引入，既然如此，我们可以大胆想象一下，我们可以认为jtopo.js就是webpack打包输出的文件，我们也将其手动在index.html文件中通过<script>标签方式引入是不是就可以使用了呢。通过实验，果真如此。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JTopoInVue</title>
</head>
<body>
<div id="app"></div>
<script src="/lib/jtopo-0.4.8-min.js"></script>
<script src="/dist/build.js"></script>
</body>
</html>
这样引入之后，我们就可以在项目中按照jtopo官方文档那样使用了该库啦。demo猛戳这里
3.不足之处
jtopo官网还提供了工具栏，该工具栏功能是在toolbar.js中实现的，而该js文件内部依赖了jQuery，所以要想在项目中使用该工具栏，必须安装jQuery，而博主在项目中没有使用工具栏，所以就没有在继续研究，如果有这方面需求的小伙伴可自行研究使用。
（完）
如何在Vue-cli项目中使用JTopo的更多相关文章
- Vuex内容解析和vue cli项目中使用状态管理模式Vuex
中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, gett ...
- vue.cli项目中src目录每个文件夹和文件的用法
assets文件夹是放静态资源:components是放组件:router是定义路由相关的配置:view视图:app.vue是一个应用主组件:main.js是入口文件:
- 如何在vue && webpack 项目中的单文件组件中引入css
引入方式很简单,就是在script下使用require()即可. 因为import 是import...from 的形式,所以是不需要的. <script> import {mapStat ...
- vue cli 项目中设置背景图
https://blog.csdn.net/MoLvSHan/article/details/78204972 不能直接写成相对路径,像下面这这种就会报错 backgroundImage: " ...
- 改造@vue/cli项目为服务端渲染-ServerSideRender
VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...
- Vue+Typescript项目中使用echarts
方案一:推荐 在typescript+Vue的项目中引用echarts,为了加强引用,引入echarts和@types/echarts两个包,一个是工程依赖,一个是声明依赖. npm install ...
- .Net Core ORM选择之路，哪个才适合你 通用查询类封装之Mongodb篇 Snowflake(雪花算法)的JavaScript实现 【开发记录】如何在B/S项目中使用中国天气的实时天气功能 【开发记录】微信小游戏开发入门——俄罗斯方块
.Net Core ORM选择之路,哪个才适合你 因为老板的一句话公司项目需要迁移到.Net Core ,但是以前同事用的ORM不支持.Net Core 开发过程也遇到了各种坑,插入条数多了也特别 ...
- 如何在 GitHub 的项目中创建一个分支呢？
如何在 GitHub 的项目中创建一个分支呢? 其实很简单啦,直接点击 Branch,然后在弹出的文本框中添加自己的 Branch Name 然后点击蓝色的Create branch就可以了,这样一来 ...
- 在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理
在一些内部OA或者流转的文件,或者给一些客户的报价文件.合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印章,本篇随笔介绍基于Vue&am ...
随机推荐
- Inkscape 旋转并复制
画一个图形,点击图标. 然后图标中心有个十字叉, 然后把这个十字叉拖到你想要旋转的地方. 然后shift+ctrl+m打开变换菜单. 选择旋转选项卡,然后设置角度,点击应用.就可以旋转了,如果配合ct ...
- UnicodeDecodeError: 'gbk' codec can't decode byte 0xae in position 357: illegal multibyte sequence 错误解决方法（已解决）
今天在搭建数据驱动测试框架的时候遇到这个错误: 好在我英语水平还不错(也就六级水平吧),根据英文提示说是多字节数据顺序是非法的 顺着错误往上找发现 File "C:\Users\Mr雷的电脑 ...
- DDR3 DDR4 FPGA实现
基于7系列.virtex6等xilinx器件的MIG ip核设计DDR3/4读写控制器,以及基于arria 10器件的DDR4读写控制:DDR3/4的设计,设计的关键点是提高DDR3/4的访问效率,目 ...
- 设置Linux支持中文
1.首先在command输入locale,可以看到Linux下默认的系统语言的是英文 2.vim ~/.bashrc打开这个文件,该文件夹相当于系统配置文件 3.打开后,将后三行命令输入到文档中,最后 ...
- 10个比较流行的JavaScript面试题
1.如何理解 JS 中的this关键字? JS 初学者总是对this关键字感到困惑,因为与其他现代编程语言相比,JS 中的这this关键字有点棘手. “this” 一般是表示当前所在的对象,但是事情并 ...
- [Luogu3554] Poi2013 Triumphal arch
Description Foreseeable和拿破仑的御用建筑师让·夏格伦在玩游戏 让·夏格伦会玩一个叫“凯旋门”的游戏:现在有一棵n个节点的树,表示一个国家 1号点代表这个国家的首都 这个游戏由两 ...
- [Luogu2824] [HEOI2016/TJOI2016]排序
题目描述 在2016年,佳媛姐姐喜欢上了数字序列.因而他经常研究关于序列的一些奇奇怪怪的问题,现在他在研究一个难题,需要你来帮助他.这个难题是这样子的:给出一个1到n的全排列,现在对这个全排列序列进行 ...
- libevent::事件
/***************************************************************** 函数功能: 创建事件集 ********************* ...
- ExtJs 扩展类CheckColumn修改源码，支持按条件禁用启用下拉框功能
长话短说,具体的请看图 需求如图: 修改CheckColumn.js源码,添加鼠标点击改变事件 完整JS脚本 Ext.ns('Ext.ux.grid'); Ext.ux.grid.CheckColum ...
- lambda高级查询
1.什么是lambda表达式:Lambda 表达式,是一种简化的匿名函数,可用于创建委托或表达式目录树.其次,也可以将 Lambda 表达式作为参数进行传递,或者将它作用于函数调用值调用后返回的一个函 ...