@ggwork/diagramviewer v1.0.10
DiagramViewer使用方法
1.安装包
本项目可以使用npm包安装,也可以使用url直接引入。
npm包地址:@ggwork/diagramviewer
cdn地址:@ggwork/diagramviewer
使用案例:diagramviewer-demo
使用案例:solution首页地址
2.npm包使用方法
安装
npm i @ggwork/diagramviewer -S
引入包
// @ts-ignore
import DiagramViewer from '@ggwork/diagramviewer'
因为diagramviewer并不是ts开发,直接引入会报ts错误,因此引入前要加@ts-ignore
,忽略ts错误检查
使用
以vue3为例,在onMounted(vue2中为mounted)中调用。
import {onMounted} from 'vue'
onMounted(()=>{
let data_url='http://localhost:1337/api/diagrams/58'
let container = document.querySelector('#container')
new DiagramViewer(container,data_url);
})
如果是其他框架,请确保DiagramViewer调用的时候,container元素已经存在于真实的dom中。
3.url使用方法。
引入包
在jsdelivr上搜索@ggwork/diagramviewer
包,然后获取dist文件下index.js 或者index.min.js的地址。
这里我以1.0.9版本的index.min.js为例说明。
https://cdn.jsdelivr.net/npm/@ggwork/diagramviewer@1.0.9/dist/index.min.js
在vue根目录的index.html文件中引入该js
<script src="https://cdn.jsdelivr.net/npm/@ggwork/diagramviewer@1.0.9/dist/index.min.js"></script>
使用包
DiagramViewer作为全局变量挂载到了window上,如果要使用的话,就在对应页面的onMounted方法中调用即可
import { onMounted } from "vue";
onMounted(() => {
let data_url = "http://localhost:1337/api/diagrams/58";
let container = document.querySelector("#container");
// @ts-ignore
new window.DiagramViewer(container, data_url);
});
4.如何更新npm包和url
@ggwork/diagramviewer包的github地址:diagramviewer
1.将仓库克隆到本地
git clone https://github.com/ggwork/diagramviewer.git
2.修改代码
代码主要存放在src下的index.js文件里。
3.打包
shell端执行以下命令打包代码,打包后的代码存放在dist文件夹下
npm run webpack:build
4.修改包信息
包信息存放在package.json文件里其中。 name 就是包的名称,你可以更换成自己的包名。 version 就是包的版本号,每次修改程序后都需要修改版本号才能发布包。 main是入口文件,既别人引入包时引入的文件。 可以根据自己的需要,添加description和keywords等字段
5.发布包
shell端执行
npm publish
如果没有登录过npm,这里还会涉及到npm包登录,npm包登录可以查看此教程如何发布自己的NPM包
5.@ggwork/diagramviewer是如何制作的
@ggwork/diagramviewer包是在flashoop/DiagramViewer仓库的基础上,删掉了vue代码,做了一些修改,制作而成的。
1.修改DiagramViewer.js
@ggwork/diagramviewer的入口文件为src下的index.js文件,index.js文件就是flashoop/DiagramViewer项目中src文件夹下的DiagramViewer.js
index.js文件相较于DiagramViewer.js文件,修改了以下几点
- 修改了文件名,由DiagramViewer.js 改成了index.js
- 顶部包引入的路径由绝对路径(@开头)改成了相对路径(.开头)
- index.js底部,将DiagramViewer挂载到了window上
除了以上几个地方,index.js和DiagramViewer.js一模一样。
3.其他文件改动
其他文件夹下的文件,修改的也不少。但是修改的方法都比较统一。
- 凡是引入本地包的,引用路径统一由绝对路径(@开头)改成了相对路径
- 引入的资源(图片,splinecode文件),统一改成了线上地址,目前是存放在阿里云。
4.删掉代码里的vue代码和配置
略,这个对比两个仓库的内容就可以看出来了,我这里就不说了。
5.配置webpack打包程序
略,这个对比两个仓库的内容就可以看出来了,我这里就不说了。