用vue一分钟快速实现一个可视化编辑器（流程图、拓扑图、web组态、SCADA）

时间 2020-12-04

标签 css html vue git github ajax npm canvas app echarts 栏目系统架构繁體版

原文原文链接

视频教程： https://www.bilibili.com/vide...css

安装

topology-vuehtml

$ npm install topology-vue

# OR

$ yarn add topology-vue

使用组件

1. 导入组件

Typescript使用方式
https://github.com/le5le-com/...vue

<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/...git

<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/...github

免费在线使用：http://topology.le5le.comajax