From a43f75db0072226457306cb40cb0f81cfab53e87 Mon Sep 17 00:00:00 2001 From: Frankie Huang Date: Thu, 10 Apr 2025 02:33:00 +0800 Subject: [PATCH] =?UTF-8?q?chore:=20=E6=9B=B4=E6=96=B0=20README?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 5735a81..200f000 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,9 @@ 使用 tauri 开发一款 Markdown Editor -## 新建 tauri 项目 +## 开发过程 + +### 新建 tauri 项目 执行 `npm create tauri-app@latest` @@ -19,7 +21,7 @@ 然后执行 `npm install` 完成依赖的下载 -## 引入 MarkdownEditor 组件 +### 引入 MarkdownEditor 组件 1. 下载 editor.md、scriptjs 和 jquery.js 1.1 将 editor.md 放置到 public/static 目录下 @@ -28,35 +30,39 @@ 2. 封装组件 MarkdownEditor.vue，放在 src/components/ 目录下 -## 引入 tauri 的文件系统和对话框插件 +### 引入 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 布局 +### 引入 view-ui-plus 组件库，优化 UI 布局 1. `npm install view-ui-plus --save` 2. 使用 分割左右面板 3. 使用 树形控件渲染文件树 4. 联动 SelectFolder、FolderTree 和 MarkdownEditor 组件 -## 监听并动态调整 MarkdownEditor 的高宽度 +### 监听并动态调整 MarkdownEditor 的高宽度 1. MarkdownEditor 加载完成后，重新自适应高度 2. 监听 Split 的数值变化，调整 MarkdownEditor 的宽度 3. 监听窗口 resize 事件，调整 MarkdownEditor 的高度和宽度 -## 调试和打包应用 +### 调试应用 - 开发调试：`npm run tauri dev` -- 打包应用：`npm run tauri build` + +## 编译打包 > 通过执行 `npm run tauri icon app-icon.png` 可以使用 app-icon.png 生成新的应用图标。 + +1. 编译前执行 `npm install` 拉取依赖 +2. 构建应用：`npm run tauri build`