共计 2263 个字符，预计需要花费 6 分钟才能阅读完成。
视频教程：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.css
import "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
正文完
