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. ef core实现软删除

    很多web程序一般的偶不会设计真的物理删除了. 基本上都是在在数据库加一个标记,就得当作已经删除了.同时在查询的时候,过滤已经标记删除的数据 ef core实现软删除是非常简单的,直接在OnModel ...

  2. AVL平衡二叉查找树

    二叉排序树: 定义 二叉排序树,又叫二叉查找树,它或者是一棵空树:或者是具有以下性质的二叉树: 1. 若它的左子树不空,则左子树上所有节点的值均小于它的根节点的值: 2. 若它的右子树不空,则右子树上 ...

  3. 常用windows命令

    目录 本教程概述 用到的工具 标签 简介 1.cmd的一些规则 2.cd切换目录命令 3.dir显示目录命令 4.type显示文本内容 5.del 删除文件 6.查看IP地址 7.net 命令 8.n ...

  4. 经验分享：程序员如何快速定位问题(BUG)

    让我掉下眼泪的 不止内存泄漏 让我夜夜不眠的 不止你的需求 明天还要改多久 你攥着我的手 让我感到为难的 是善变的需求 发布总是在半夜 回滚是永远的愁 错误(Bug)随时的暴漏 困扰着我心头 作为程序 ...

  5. [Luogu2737] [USACO4.1]麦香牛块Beef McNuggets

    题目描述 农夫布朗的奶牛们正在进行斗争,因为它们听说麦当劳正在考虑引进一种新产品:麦香牛块.奶牛们正在想尽一切办法让这种可怕的设想泡汤.奶牛们进行斗争的策略之一是“劣质的包装”.“看,”奶牛们说,“如 ...

  6. composer依赖管理与laravel框架安装

    步骤有点多,生怕哪一天忘记,记录下来会好点 laravel安装有两种途径:1.直接在一些国内第三方网站,如:https://www.golaravel.com/download/ 下载压缩包来解压即可 ...

  7. Python3+RobotFramework+pycharm环境搭建

    我的环境为 python3.6.5+pycharm 2019.1.3+robotframework3.1.2 1.安装python3.x 略 之后在cmd下执行:pip  install  robot ...

  8. “Triplet network”三元组网络阅读笔记

    记录<DEEP METRIC LEARNING USING TRIPLET NETWORK>阅读笔记 文章总体内容: 作者在前人提出的多个特征提取方法的基础上提出Triplet netwo ...

  9. 设计模式（十六）Mediator模式

    在实际的工作小组的交流过程是,组员向仲裁者报告,仲裁者向组员下达指示,组员之间不再互相询问和指示.Mediator模式是指,当发生麻烦事情的时候,通知仲裁者:当发生涉及全体组员的事情时,也通知仲裁者. ...

  10. 致Java星球程序员兄弟们的一封信

    致Java星球程序员兄弟们的一封信 亲爱的Java星球的程序员兄弟们: 你们好!我是来自地球的一名Java程序员,首先我代表地球人对贵星球的高司令来到地球传授Java语言,造福了全人类,造福了整个地球 ...