65 lines
2.2 KiB
Markdown
65 lines
2.2 KiB
Markdown
# Tauri + Vue 3
|
||
|
||
This template should help get you started developing with Tauri + Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||
|
||
## Recommended IDE Setup
|
||
|
||
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer)
|
||
|
||
|
||
# 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. 使用 <Split> 分割左右面板
|
||
3. 使用 <Tree> 树形控件渲染文件树
|
||
4. 联动 SelectFolder、FolderTree 和 MarkdownEditor 组件
|
||
|
||
## 监听并动态调整 MarkdownEditor 的高宽度
|
||
|
||
1. MarkdownEditor 加载完成后，重新自适应高度
|
||
2. 监听 Split 的数值变化，调整 MarkdownEditor 的宽度
|
||
3. 监听窗口 resize 事件，调整 MarkdownEditor 的高度和宽度
|