Hello大家好我是Jaken一个不是很懂前端的后端。最近工作涉及到使用PlantUML语言做一些流程图、活动图等。经过一番折腾我使用了vscode+插件+style样式库的形式最终获得了不错的效果。但是折腾的UML服务器用起来不是很方便,而且vscode的渲染略有些卡顿(可能因为插件的原因)。所以决定使用Electron自己写一个简单的PlantUML客户端,提供简单的编辑、保存、打开、撤销等功能。当然其实最主要的是想学习下Electron开发,这系列教程会随着代码的进度来更新,同时作为一个没有Electron基础的小白,我也会不断优化原先文档中不合理的地方,最终实现一个PlantUML客户端。 本课程适合你有一定的HTML、JS(TS)的基础,同时了解vue3,、vite、Tailwind CSS等基础。但是又对Electron没有太多了解的小伙伴(PS:其实我也是从头入门Electron)。因此这系列的文章名为Hello Electron。 其实Electron的文档非常友好,所以在这里我推荐大家可以先去官方文档了解一下Electron相关基础原理,例如IPC、沙盒模式等。这篇教程不会阐述过多的教程内容,但是在一些功能第一次引用到的地方我会贴出我学习的文档地址和链接供大家参考。
项目的仓库地址:Jakentop/plantuml-editor: 基于electron+vue+vite实现的plantuml桌面编辑器 (github.com)
项目用到或即将用到的组件:
- Electron,Vue3,Vite
- Monaco Editor(VsCode编辑器)
- Naive-ui(尤大亲自安利的UI框架),pinia(状态管理)
- plantuml-server