[个人项目] 用 Electron + Vue3 + Golang 做个一个桌面 Markdown 笔记软件

markdown编辑器down 笔记软件” src=”https://www.6hu.cc/wp-content/uploads/2022/01/1d74bwindows更新有必要吗89b927fdf271564nginx反向代理4d2c32f382f0.png”>

以上就是所有的布局了：

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

界面 UI前端开发需要学什么 上尝试了最近关注度比较高的 新拟态 效果，由于界面设计比较简单，总体来说效果还是不错的。由于是自己开发的，后期如果有什么新效果，也可以尝试往里面放markdown语法，嗯，可以折腾一下。

具体代码，详见 gitee 仓库 gitee.com/Ywindows许可证即将过期怎么办ogurt_cry/…

5.2 服务端开发

加上上次做云服务器版的开发，这次算是第二次用 Golan测试你的自卑程度g 开windows怎么激活发项目了。项目比较简单，再加上是单机版的，笔记的 CURD 才是关键点，因此代码合计下来也不过才 290 行。主要是实现了：检索 、新建 、保存 、删除 、获取，也就是 CURD。

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

参考资料：

知乎：golang操作sqlite3

6 打包经历

相比于打包来说，开发上面其实没有花多长时间，前端开发最花时间的就是 新windows许可证即将过期怎么办拟态 的阴影，调试了很nginx启动命令久才出来自己比较满意的效果。

对于桌面开发习惯了 Visuwindows更新有必要吗al Studi前端和后端哪个工资高o 的 F5 运行测试，F6 编译解决方案的我来说，打个包还会出各种各样幺蛾子的 Electron 着实是有点不习惯。

原以为只要一个：

npm run electron:build

就可以解决所有问题，结果花了我 5测试手机是否被监控 个多小时去处理各种各样的异常错误。

6nginx配置.1 Electro测试用例n 打包配置

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

最终通过多方寻找资料，才知道用 vue-cli-plugin-electron-builder 原来是需要写配置文件的。。。还以为全都搞markdown下载好了markdown是什么意思。

参考资料：

简书：在vue-cli-plugin-electron-builder测试下用electron:build打包或生成应用程序的markdown软件两种方markdown下载法nginx重启

简书：electron-builder打包指定资源到安装目录

CSDN：electmarkdown语法ron如何使用webpack打包webview标签中的preload文件

Vue Cli：Vue Cli 插件 Electron Builder

electron-builder：Any Windows Target

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

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

6.1.2 Electron 打包时外部程序前端和后端的区别没有输出的问题

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

打包参考示例如下：

module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        appId: 'com.ccsdesgin.note',
        productName: '创云笔记',
        copyright: 'Copyright  2022',
        directories: {
          output: './dist_electron'
        },
        extraResources: {
          from: './server',
          to: 'server'
        },
        win: {
          icon: './public/favicon.ico',
          target: [
            {
              target: 'nsis',
              arch: [ 'x64' ]
            }
          ]
        },
        nsis: {
          oneClick: false,
          allowElevation: true,
          allowToChangeInstallationDirectory: true
        }
      },
      preload: './src/preload.js'
    }
  }
}

6.2 child_p测试智商ro测试工程师cess 无法启前端和后端动子进程的问题

一开始 Yogurt 是放在markdown语法 main.js 里的，就是 Vue 项目的 main.js 里。就一直在报找不到文件。后面也是因为解决了外部文件Markdown引入的问题，才真正得以解决。

nginx配置tron + Vue3 + Golang 做个一个桌面 Markdown 笔记软件” src=”https://www.6hu.cc/wp-content/uploads/2022/01/adde0awindows10激活密钥653039def19b592368f50a38markdown数学公式b5.png”>

需求是在主窗体启动之前需要启动后台服务，一直以为应前端开发该是前端工程师放在 main.js 里，结果操作了好几次都无法成功，后面想想要不就放在 background.js 里试试，然后就可以了。估计是 main.js 是 Vue 项目里的主程序脚本，打包后无法获取外部程序的路径或者无权操作外部程序，而 background.js 才Markdown是 Electron 的主程序脚本，只有它才能通过 Node 来操作系统文件。

参考资料：

掘金：通过 electron 启动其它exe 程序

Node.js 中文网：Node.js v16.13.2 文档

博客园：Nodejs进阶：如何玩转子进程（child_process）

6.3 Golang 项目的绝对路径问题

由于 Golang 编译好的服务端是需要markdown语法用过 Electron 通过子进程调用实现的，因此启动目录不是预想的路径，原以为使用 ./ 就可以启动的（因为开发是用 go run ./main.go 的时markdown翻译候确实是没问题的），结果笔记数据库 note.db 愣是直接给建到了 Electron 的根目录，然后 /Static 文件夹访问不了，这才发现问题所在。但测试了一番之后才发现 Golang 的路径 run 和 build 居然都会返回开发文件夹的路径，也就有点坑爹了，最后经过多方寻找资料，才得以解决：

func main() {
    appPath, _ := os.Executable()
    currentFolderPath = filepath.Dir(appPath)
    println(currentFolderPath)
}

参考资料：

知乎：彻底解决Golang获取当前项目绝对路径问题

7 后记

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

对了，前端面试题这篇文章就是用这个工具写的。

markdown软件ctron + Vue3 + Golang 做个一个桌面 Markdown 笔记软件” alt=”[个人项目] 用 Electron + Vue3 + Golang 做个一个桌面 Markdown 笔记软件”markdown数学公式 src=”https://www.6hu.cc/wp-content/uploads/2022/01/642f5899ebbdaa08a2225f测试智商051nginx怎么读facd092.png”>