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/[email protected]/dist/index.min.js

在vue根目录的index.html文件中引入该js

<script src="https://cdn.jsdelivr.net/npm/@ggwork/[email protected]/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打包程序

略，这个对比两个仓库的内容就可以看出来了，我这里就不说了。