使用Tauri + Vditor + Vue打造本地化Markdown编辑工具

什么是 tauri ？这个和 electron 想做的事基本是一样的。都是为跨平台桌面应用而努力！

为什么要用 tauri ？它号称使用 Web 前端构建更小、更快、更安全的桌面应用程序。

的确，在实际测试中的原始包大小只有3M，达到了可喜的效果，内存占用也更小。现在已支持Windows、macOS、Linux多平台编译，未来还可在Android和iOS上来跨平台使用和实现交叉编译等特性。

一、安装系统依赖

参考 Tauri 官方文档

安装打包器

cargo install tauri-bundler

安装 Nodejs 最新稳定版

不同平台请参考 nodejs 官网

二、安装应用开发工具

Vue Cli

npm install -g @vue/cli

创建工程目录

vue create tauri-markdown
cd tauri-markdown/

安装后会自动生成 vue 示例项目，直接运行 npm run serve 后，打开 http://localhost:8080 即可看到效果

安装 tauri

npm install tauri -S

初始化 tauri 项目

npm run tauri init

初始化后会自动生成 src-tauri 目录，修改目录下文件 tauri.conf.json 其中的 build 部分为我们的 vue 开发目录和服务。

"build": {
    "distDir": "../dist",
    "devPath": "http://localhost:8080",
    "beforeDevCommand": "",
    "beforeBuildCommand": ""
  },

三、开发纪要

1.使用 vditor 作为 markdown 的编辑器 -> vditor使用指南

npm install vditor -S

2.使用 element-ui 做美化提示

npm install element-ui -S

3.新建组件 src/components/Vditor.vue

<template>
    <!--注这里的class用到了全屏模式-->
    <div id="vditor" class="vditor vditor--fullscreen"></div>
</template>

<script async>
    import Vditor from "vditor";
    import { MessageBox } from 'element-ui';
    import * as dialog from 'tauri/api/dialog'
    import {writeFile, readTextFile} from 'tauri/api/fs'

    export default {
        name: "Vditor.vue",
        data (){
            return {
                vditor: '',
                welcome: '# 🎉️ Welcome to use Tauri Markdown!',
            };
        },
        mounted () {
            let self = this
            this.vditor = new Vditor('vditor', {
                // mode: 'sv', 默认为即时渲染模式
                // cdn: '..',
                cache: {
                    enable: false,
                },
                placeholder: self.welcome,
                minHeight: 600,
                width: 'auto',
                outline: true, // 大纲模式
                counter: {
                    enable: 102400, // 计数，提示角标问题
                },
                toolbarConfig: {
                    pin: true,
                },
                // 工具栏配置具体看 vditor 使用指南
                toolbar: [
                    {
                        name: "open_save",
                        tip: "打开/保存",
                        icon: '',
                        toolbar: [
                            {
                                name: "open_md",
                                icon: '打开MD',
                                click (){
                                    self.open_md()
                                }
                            },
                            {
                                name: "export_md",
                                icon: '导出MD',
                                click() {
                                    return self.save_md()
                                }
                            },
                        ],
                    },
                    "|",
                    "emoji",
                    "headings",
                    "bold",
                    "italic",
                    "strike",
                    "link",
                    "|",
                    "edit-mode",
                    {
                        name: "more",
                        toolbar: [
                            {
                                name: "about",
                                icon: '关于',
                                click (){
                                    self.show_about()
                                }
                            },
                        ],
                    }],
                preview:{
                    delay: 200,
                },
                after: () => {
                    // this.vditor.setValue('# 🎉️ Welcome to use Tauri Vditor!')
                }
            })
        },
        methods: {
            async open_md(){
                const file_path  = await dialog.open({
                    filter: 'md',
                })
                // Notification.info(JSON.stringify(file_path))
                let result = await readTextFile(file_path)
                // Notification.info(JSON.stringify(result))
                this.vditor.setValue(result)
            },
            async save_md(){
                const file_path = await dialog.save({
                    filter: 'md',
                })
                await writeFile({
                    path: file_path,
                    contents: this.vditor.getValue()
                })
            },
            show_about(){
                MessageBox.alert('这是基于Tauri和Vditor的本地MarkDown工具<br/>欢迎使用~<br/> ©MIT by jeeinn', '', {
                    dangerouslyUseHTMLString: true
                });
            }
        },
    }
</script>

<style scoped>
@import "~vditor/dist/index.css";
@import '~element-ui/lib/theme-chalk/index.css';
</style>

4.在 App.vue 中嵌入组件后调试

npm run serve

在另一个终端运行

npm run tauri dev

这样可以修改代码后，直接显示出结果来

四、项目开源

项目地址：https://github.com/jeeinn/tauri-markdown

结语：

目前 tauri 的 js 部分的 API 接口还很少，比起 electron 的完整度来差很多。不过体积小是很大的优势，后端使用 Rust 进行系统绑定也是一个独特之处。希望越来越成熟吧！

喜欢就打赏下～