tauri-markdown

使用 tauri 开发一款 Markdown Editor

开发过程

新建 tauri 项目

执行 npm create tauri-app@latest

> create-tauri-app

✔ Project name · tauri-markdown
✔ Identifier · com.tauri-markdown.app
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, deno, bun)
✔ Choose your package manager · npm
✔ Choose your UI template · Vue - (https://vuejs.org/)
✔ Choose your UI flavor · JavaScript

然后执行 npm install 完成依赖的下载

引入 MarkdownEditor 组件

1. 下载 editor.md、scriptjs 和 jquery.js 1.1 将 editor.md 放置到 public/static 目录下 1.2 下载 jquery.min.js 放到 public/static/jQuery 目录下 1.3 npm install scriptjs --save

2. 封装组件 MarkdownEditor.vue，放在 src/components/ 目录下

引入 tauri 的文件系统和对话框插件

执行这两条指令：

1. npm run tauri add fs
2. npm run tauri add dialog

支持读本地目录，读写本地文件

1. 新建 SelectFolder.vue 用于打开本地目录
2. 在 App.vue 使用组件 SelectFolder 和 MarkdownEditor.vue
3. 使用 plugin-fs 插件读写本地文件内容

引入 view-ui-plus 组件库，优化 UI 布局

1. npm install view-ui-plus --save
2. 使用 分割左右面板
3. 使用 树形控件渲染文件树
4. 联动 SelectFolder、FolderTree 和 MarkdownEditor 组件

监听并动态调整 MarkdownEditor 的高宽度

1. MarkdownEditor 加载完成后，重新自适应高度
2. 监听 Split 的数值变化，调整 MarkdownEditor 的宽度
3. 监听窗口 resize 事件，调整 MarkdownEditor 的高度和宽度

改用 md-editor-v3 编辑器组件

1. npm install md-editor-v3 --save
2. 在 src/components/MainEditor.vue 组件里使用 md-editor-v3 组件
3. 实现保存功能；自定义工具栏实现显示/隐藏目录以及发布等功能

调试应用

• 开发调试：npm run tauri dev

编译打包

通过执行 npm run tauri icon app-icon.png 可以使用 app-icon.png 生成新的应用图标。

1. 编译前执行 npm install 拉取依赖
2. 构建应用：npm run tauri build