1 前言

LeanoteVditorVditor

2 需求分析

作为一个自用标准的笔记软件，目前的需求如下：

  • 😆 界面好看，暗黑色系。日常使用的软件基本都是暗黑的，夜间场景比较多，各种切换不要受到影响
  • 😛 交互越少越好，专注与笔记本身。什么登录啊、弹窗啊、广告啊什么的，统统不要，能 CURD 就行。
  • 🙄 支持全局搜索，一个文件管理所有的笔记
  • 🥰 Markdown 编辑所见即所得，像 Typora 一样

3 技术选型

根据需求，结合自己目前所了解的技术能力，做如下选型：

VditorElectronGolangSqlite3

4 开发环境

信息说明
操作系统Microsoft Windows 10 专业工作站 10.0.19042 64位
开发工具Visual Studio Code
Vditor 版本3.8.10
Electron 版本13.0.0
Vue 版本3.0.0
Node 版本16.13.1
NPM 版本8.1.2
Golang 版本go version go1.17.5 windows/amd64
Sqlite3 版本3.32.3

5 开发经过

5.1 前端开发

VueElectronVueElectronElectron
vue ui

命令来创建 Vue 项目了。已安装的插件如下：

运行的依赖，也就是引入的外部组件如下：

软件功能比较简单，所以界面布局也一切从简了。

以上就是所有的布局了：

  • 💡 上方负责标题栏和窗体控制
  • 💡 左侧负责笔记导航
  • 💡 右侧最大的区域负责笔记的编辑
新拟态

具体代码，详见 gitee 仓库 gitee.com/Yogurt_cry/…

5.2 服务端开发

Golang检索新建保存删除获取

所以使用 Golang 来操作 sqlite3 就是关键，不知道该怎么处理，所以就参考了一下网上大神的操作，完成了开发。

参考资料：

6 打包经历

新拟态
Visual StudioF5F6Electron

原以为只要一个：

npm run electron:build

就可以解决所有问题，结果花了我 5 个多小时去处理各种各样的异常错误。

6.1 Electron 打包配置

这是第一个没想到的问题，第一次打包完后启动不了，嗯。。。准确的说应该是启动了，但是没法进入项目，就一个黑屏。跟 Vue 打包完后没有通过 Nginx 配置的效果一样。

vue-cli-plugin-electron-builder

6.1.1 Electron 打包时 preload.js 没有输出的问题

嗯，这也是打包配置文件的问题。

6.1.2 Electron 打包时外部程序没有输出的问题

嗯，这也是打包配置文件的问题。

打包参考示例如下：

6.2 child_process 无法启动子进程的问题

main.js
background.js

6.3 Golang 项目的绝对路径问题

./go run ./main.gonote.db/Static
func main() {
    appPath, _ := os.Executable()
    currentFolderPath = filepath.Dir(appPath)
    println(currentFolderPath)
}

参考资料：

7 后记

以上就是所有的开发过程，利用业余时间，前前后后花了 3 周吧，把这个工具整出来了，还是很有成就感的。除了收获了一个自己的笔记工具外，还收获了接触新技术的经验，为后面的开发开了一个好头，未来在开发桌面级应用时有了一个新的选择。

对了，这篇文章就是用这个工具写的。

8 后续