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的更多相关文章

  1. Vuex内容解析和vue cli项目中使用状态管理模式Vuex

    中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, gett ...

  2. vue.cli项目中src目录每个文件夹和文件的用法

    assets文件夹是放静态资源:components是放组件:router是定义路由相关的配置:view视图:app.vue是一个应用主组件:main.js是入口文件:

  3. 如何在vue && webpack 项目中的单文件组件中引入css

    引入方式很简单,就是在script下使用require()即可. 因为import 是import...from 的形式,所以是不需要的. <script> import {mapStat ...

  4. vue cli 项目中设置背景图

    https://blog.csdn.net/MoLvSHan/article/details/78204972 不能直接写成相对路径,像下面这这种就会报错 backgroundImage: " ...

  5. 改造@vue/cli项目为服务端渲染-ServerSideRender

    VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...

  6. Vue+Typescript项目中使用echarts

    方案一:推荐 在typescript+Vue的项目中引用echarts,为了加强引用,引入echarts和@types/echarts两个包,一个是工程依赖,一个是声明依赖. npm install ...

  7. .Net Core ORM选择之路，哪个才适合你 通用查询类封装之Mongodb篇 Snowflake(雪花算法)的JavaScript实现 【开发记录】如何在B/S项目中使用中国天气的实时天气功能 【开发记录】微信小游戏开发入门——俄罗斯方块

    .Net Core ORM选择之路,哪个才适合你   因为老板的一句话公司项目需要迁移到.Net Core ,但是以前同事用的ORM不支持.Net Core 开发过程也遇到了各种坑,插入条数多了也特别 ...

  8. 如何在 GitHub 的项目中创建一个分支呢？

    如何在 GitHub 的项目中创建一个分支呢? 其实很简单啦,直接点击 Branch,然后在弹出的文本框中添加自己的 Branch Name 然后点击蓝色的Create branch就可以了,这样一来 ...

  9. 在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理

    在一些内部OA或者流转的文件,或者给一些客户的报价文件.合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印章,本篇随笔介绍基于Vue&am ...

随机推荐

  1. .Net下MoongoDB的简单调用

    1.安装.Net 驱动:Install-Package MongoDB.Driver 2.数据插入 //新建Person测试类 public class Person { public long Id ...

  2. 1.InfluxDB-官方测试数据导入

    本文翻译自官网,官方文档地址:https://docs.influxdata.com/influxdb/v1.7/query_language/data_download/ 1.下载官网示例数据 命令 ...

  3. Spring 注册BeanPostProcessor 源码阅读

    回顾上一篇博客中,在AbstractApplicationContext这个抽象类中,Spring使用invokeBeanFactoryPostProcessors(beanFactory);执行Be ...

  4. 深度长文回顾web基础组件

    什么是Serlvet ? 全称 server applet 运行在服务端的小程序: 首先来说,这个servlet是java语言编写的出来的应用程序,换句话说servlet拥有java语言全部的优点,比 ...

  5. DP题 总结 [更新中]

    建设中 ... 预防针 : 本蒟蒻代码风格清奇(⊙﹏⊙)b 一.选学霸 题目描述 老师想从N名学生中选M人当学霸,但有K对人实力相当,如果实力相当的人中,一部分被选上,另一部分没有,同学们就会抗议.所 ...

  6. 控制反转和依赖注入（对IOC,DI理解+案例）

    理解 控制反转说的官方一点就是面向对象编程中的一种设计原则,可以用来减低计算机代码之间的耦合度.其实就是一种设计思想,大概思想就是把设计好的对象交给容器控制,而不是在你内部直接控制. 依赖注入是控制反 ...

  7. asp.net core mvc中自定义ActionResult

    在GitHub上有个项目,本来是作为自己研究学习.net core的Demo,没想到很多同学在看,还给了很多星,所以觉得应该升成3.0,整理一下,写成博分享给学习.net core的同学们. 项目名称 ...

  8. 手绘风格的 JS 图表库：Chart.xkcd

    本文作者:HelloGitHub-kalifun 图表库千万个今天 HelloGitHub 给大家推荐个很有"特色"的图表库:一个手绘风格的 JS 图表库 -- Chart.xkc ...

  9. electron调用c#动态库

    electron调用c#动态库 新建C#动态库 方法要以异步任务的方式,可以直接包装,也可以写成天然异步 代码如下 public class Class1 { public async Task< ...

  10. 在非洲运营互联网系统-PAYGo方案

    ​ 尼日利亚当地经济.支付.网络.供电.交通等基建都比较落后,虽然各方面都在缓慢增长,但当地人对高额的刚需产品仍望而却步. 其他非洲国家也有同样的问题. 同理国内,一些低收入人群都想买房,但房价动辄几 ...