本系列教程是用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'
}
]