本系列教程是用Vue.js + Nuxt.js + Element + Vuex + 开源js绘图库，打造一个属于自己的在线绘图软件，最终效果：topology.le5le.com 。如果你觉得好，欢迎给文章和开源库点赞，让我们更有动力去做好！

本系列教程源码地址：Github

一、创建项目框架 1. 使用Nuxt.js向导创建项目 yarn create nuxt-app topology-vue // 注意在后面提示中，上移下移，按空格选中 Element 复制代码

选择Element后，在plugins文件夹下会自带添加Element的插件配置

完成后，在nuxt.config.js中配置head相关信息，主要有两个阿里字体文件： 左侧工具栏字体文件： //at.alicdn.com/t/font_1113798_0532l8oa6jqp.css

右侧属性字体图标： //at.alicdn.com/t/font_1331132_5lvbai88wkb.css

head: { title: ‘乐吾乐 Topology - 开源免费绘图工具‘, meta: [ { charset: ‘utf-8‘ }, { name: ‘viewport‘, content: ‘width=device-width, initial-scale=1‘ }, { hid: ‘description‘, name: ‘description‘, content: ‘一个基于typescript + canvas的好用开源绘图工具和绘图引擎。易集成到自己的前端项目、还可以方便自定义图形库，支持微服务架构图、流程图、时序图、活动图、类图等‘ } ], link: [ { rel: ‘icon‘, type: ‘image/x-icon‘, href: ‘/favicon.ico‘ }, { rel: ‘stylesheet‘, href: ‘//at.alicdn.com/t/font_1113798_0532l8oa6jqp.css‘ }, { rel: ‘stylesheet‘, href: ‘//at.alicdn.com/t/font_1331132_5lvbai88wkb.css‘ } ] }, 复制代码 2. 添加SCSS支持

2.1 安装scss的依赖包

yarn add node-sass sass-loader -D 复制代码

2.2 给style标签加上lang="scss"标记

<style lang=http://www.mamicode.com/"scss"> .page { width: 100%; height: 100%; } </style> 复制代码 3. 添加一个全局公用css

3.1 在asstes/css文件夹下新建一个base.scss公用全局样式文件

3.2 导入 在layouts/default.vue的script脚本中导入：

import ‘~/assets/css/base.scss‘ 复制代码 二、网页布局 1. 顶部导航栏

修改layouts/default.vue为导航栏 + body两部分

其中： 为Nuxt.js框架中对应页面路由的视图部分。

2. 修改首页为左中右三栏

修改pages/index.vue为左中右三栏布局

三、创建画布 1. 下载topology依赖包 yarn add topology-core topology-class-diagram topology-activity-diagram topology-flow-diagram topology-sequence-diagram -D 复制代码

其中，topology-core为核心库引擎，其他的为图形库。具体参考：开发文档

2. 注册图形库

我们单独写个pages/canvas.server.js服务，用来提供topology相关服务

这里主要提供注册和左侧工具栏数据。

3. 加载图形库

3.1 准备canvas相关数据

data() { return { // 左侧工具栏 tools: Tools, // 图形库 canvas: {}, // 图形库选项：https://www.yuque.com/alsmile/topology/canvas#hOupV canvasOptions: { rotateCursor: ‘/img/rotate.cur‘ }, // 右侧属性栏数据 props: { node: null, line: null, multi: false } } } 复制代码

3.2 注册图形库

created() { canvasRegister() } 复制代码