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的插件配置

完成后，在nuxt.config.js中配置head相关信息，主要有两个阿里字体文件：

左侧工具栏字体文件：

//at.alicdn.com/t/font_1113798_0532l8oa6jqp.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'

}

]