vue 图扑 开发_【前端vue进阶实战】：从零打造一个流程图、拓扑图项目【Nuxt.js + Element + Vuex】 （一）…

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

本系列教程源码地址：Github

一、创建项目框架

1. 使用Nuxt.js向导创建项目

yarn create nuxt-app topology-vue

// 注意在后面提示中，上移下移，按空格选中 Element

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

3.2 导入

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

import ‘~/assets/css/base.scss’

二、 页布局

1. 顶部导航栏

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

三、创建画布

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相关服务

文章知识点与官方知识档案匹配，可进一步学习相关知识Vue入门技能树VueX状态管理VueX是什么/span>23005 人正在系统学习中 相关资源：若为自由故:自由软件之父理查德·斯托曼传-讲义文档类资源-CSDN文库