视频教程： https://www.bilibili.com/vide...
装置
topology-vue
$ npm install topology-vue# OR$ yarn add topology-vue应用组件
1. 导入组件
Typescript应用形式
https://github.com/le5le-com/...
<template> <div class="home"> <topology /> </div></template><script lang="ts">import { Component, Vue } from 'vue-property-decorator';import topology from 'topology-vue';import 'topology-vue/topology-vue.css';@Component({ components: { topology, },})export default class Home extends Vue {}</script><style lang="scss">.home { height: calc(100vh - 80px);}</style>JavaScript应用形式
https://github.com/le5le-com/...
<template> <div class="home"> <!-- 应用topology组件 --> <topology /> </div></template><script>// 导入topology-vue组件import topology from "topology-vue";// 须要导入topology-vue.cssimport "topology-vue/topology-vue.css";export default { name: "Home", components: { topology, },};</script><style lang="scss">.home { height: 100vh;}</style>2. 加载相干字体文件
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <!-- 通用字体图标 --> <link href="//at.alicdn.com/t/font_2030495_pwo1zu1ka1.css" rel="stylesheet" /> <!-- 通用根底图形库 --> <link href="//at.alicdn.com/t/font_1331132_qhyav2o6mp.css" rel="stylesheet"/> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> <!-- 须要用到的工具js --> <script src="http://topology.le5le.com/js/canvas2svg.js"></script> <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <script src="https://cdn.bootcss.com/jszip/3.2.2/jszip.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script> </body></html>3. 加载相干js文件
<!-- 须要用到的工具js --><script src="http://topology.le5le.com/js/canvas2svg.js"></script><script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script><script src="https://cdn.bootcss.com/jszip/3.2.2/jszip.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>页面成果
底层外围库开源
topology-vue基于开源外围库开发的下层利用
外围库GIthub： https://github.com/le5le-com/...
收费在线应用：http://topology.le5le.com