什么是 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 进行系统绑定也是一个独特之处。希望越来越成熟吧!
喜欢就打赏下~