发布于 由admin

解释 Vue 在桌面应用开发中的应用，例如 Electron 或 Tauri。

各位观众老爷，晚上好！我是你们的老朋友，今天咱们聊聊Vue在桌面应用开发中的那些事儿，尤其是结合Electron和Tauri这两个当红炸子鸡。

开场白：Web技术，不止于Web！

话说当年，咱们写Web页面，浏览器就是我们的舞台。可是时代变了，Web技术就像孙悟空，七十二变，不仅能在浏览器里耍，还能跳出浏览器，在桌面应用领域大显身手。这都得益于像Electron和Tauri这样的框架，它们把Web技术和系统能力巧妙地结合起来，让咱们用熟悉的HTML、CSS和JavaScript，也能开发出媲美原生应用的桌面程序。而Vue，作为前端界的扛把子之一，自然也成了桌面应用开发中的香饽饽。

第一部分：Vue + Electron：老牌劲旅，功能强大

Electron，本质上就是一个用Chromium和Node.js构建桌面应用的框架。它允许你使用Web技术创建跨平台的桌面应用程序。简单来说，它就像一个浏览器内核（Chromium）和一个后端服务器（Node.js）的结合体，让你可以在里面跑你的Web应用，同时还能访问操作系统的底层API。

  • Electron的工作原理

    Electron应用主要由三部分组成：

    1. 主进程 (Main Process)：负责管理应用程序的生命周期，创建渲染进程，处理菜单、托盘等系统级别的操作。可以理解为应用的“大脑”。

    2. 渲染进程 (Renderer Process)：负责显示用户界面，处理用户交互。每一个窗口（window）都运行在一个独立的渲染进程中。可以理解为应用的“眼睛”和“手”。

    3. 预加载脚本 (Preload Script)：运行在渲染进程中，但在网页内容加载之前执行。它可以访问Node.js的API，并将这些API暴露给渲染进程，实现渲染进程与主进程的通信。可以理解为渲染进程的“翻译官”。

  • Vue 在 Electron 中的角色

    在Electron应用中，Vue主要负责构建渲染进程的用户界面。你可以像开发普通的Web应用一样，使用Vue的组件、指令、路由等特性来构建你的桌面应用界面。

    示例代码：一个简单的 Vue + Electron 应用

    1. 创建 Electron 项目

      首先，你需要安装Node.js和npm（或yarn）。然后，创建一个新的项目目录，并初始化项目：

      mkdir my-electron-vue-app
cd my-electron-vue-app
npm init -y
npm install electron --save-dev

    2. 创建 main.js (主进程)

      // main.js
const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false, // 重要：禁用nodeIntegration，使用contextBridge
      contextIsolation: true, // 启用上下文隔离
      preload: path.join(__dirname, 'preload.js') // 预加载脚本
    }
  });

  win.loadFile('index.html'); // 加载 HTML 文件
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

    3. 创建 index.html (渲染进程)

      <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Vue + Electron</title>
</head>
<body>
  <div id="app"></div>
  <script src="./renderer.js"></script>
</body>
</html>

    4. 创建 renderer.js (渲染进程 – Vue)

      首先，需要安装 Vue：

      npm install vue
      // renderer.js
import { createApp } from 'vue';

const app = createApp({
  template: '<h1>Hello Electron with Vue!</h1>'
});

app.mount('#app');

    5. 创建 preload.js (预加载脚本)

      // preload.js
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeAPI({
    myAPI: {
        doSomething: () => ipcRenderer.invoke('do-something')
    }
});

    6. 修改 package.json 添加启动脚本

      {
  "name": "my-electron-vue-app",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^28.0.0"
  },
  "dependencies": {
    "vue": "^3.0.0"
  }
}

    7. 运行应用

      npm start

      现在，你应该能看到一个简单的Electron窗口，上面显示着 "Hello Electron with Vue!"。

  • Electron + Vue 的优势

    • 成熟的生态系统：Electron已经发展多年，拥有庞大的开发者社区和丰富的第三方库。
    • 跨平台：一次编码，多平台运行（Windows、macOS、Linux）。
    • 强大的系统能力：可以访问操作系统的底层API，实现更复杂的功能。
    • Vue 的易用性：Vue的组件化开发模式和简洁的语法，让UI开发变得更加高效。

  • Electron + Vue 的劣势

    • 体积较大：Electron应用通常体积较大，因为需要打包整个Chromium浏览器。
    • 资源占用较高：Electron应用会占用较多的内存和CPU资源。
    • 安全性问题：如果不注意安全措施，Electron应用可能会存在安全漏洞。

第二部分：Vue + Tauri：后起之秀，轻量高效

Tauri，是一个用Rust编写的框架，用于构建跨平台的桌面应用程序。与Electron不同，Tauri不使用Chromium，而是利用系统自带的Webview（例如Windows上的WebView2、macOS上的WKWebView、Linux上的WebKitGTK），因此体积更小，资源占用更低。

  • Tauri的工作原理

    Tauri应用也由前端和后端两部分组成：

    1. 前端 (Frontend)：使用Web技术（HTML、CSS、JavaScript、Vue等）构建用户界面。
    2. 后端 (Backend)：使用Rust编写，负责处理系统级别的操作，与操作系统进行交互。

    前端和后端通过消息传递机制进行通信。前端可以通过JavaScript调用Rust函数，Rust函数也可以向前端发送事件。

  • Vue 在 Tauri 中的角色

    与Electron类似，Vue在Tauri应用中主要负责构建前端的用户界面。你可以使用Vue CLI创建一个标准的Vue项目，然后将其集成到Tauri项目中。

    示例代码：一个简单的 Vue + Tauri 应用

    1. 安装 Tauri CLI

      首先，你需要安装Rust和Tauri CLI：

      cargo install tauri-cli

    2. 创建 Tauri 项目

      cargo create-tauri-app my-tauri-vue-app

      在创建过程中，Tauri CLI会询问你一些问题，例如项目名称、窗口标题、前端框架等。选择Vue作为你的前端框架。

    3. Tauri 项目结构

      Tauri项目的目录结构如下：

      my-tauri-vue-app/
├── src-tauri/      # Rust 后端代码
├── src/          # Vue 前端代码
├── tauri.conf.json # Tauri 配置文件
└── ...

    4. 修改 src/App.vue (Vue 组件)

      <template>
  <h1>Hello Tauri with Vue!</h1>
</template>

<script>
export default {
  name: 'App'
}
</script>

    5. 修改 src-tauri/src/main.rs (Rust 后端)

      // src-tauri/src/main.rs
#![cfg_attr(
    all(not(debug_assertions), target_os = "windows"),
    windows_subsystem = "windows"
)]

use tauri::{CustomMenuItem, Menu, MenuItem, Submenu};

fn main() {
  let quit = CustomMenuItem::new("quit".to_string(), "Quit");
  let close_window = CustomMenuItem::new("close".to_string(), "Close");
  let submenu = Submenu::new("File", Menu::new().add_item(quit).add_item(close_window));
  let menu = Menu::new()
    .add_submenu(submenu);

  tauri::Builder::default()
    .menu(menu)
    .on_menu_event(|event| {
      match event.menu_id.as_str() {
        "quit" => {
          std::process::exit(0);
        }
        "close" => {
          event.window().close().unwrap();
        }
        _ => {}
      }
    })
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
}

    6. 构建和运行应用

      cd my-tauri-vue-app
npm run tauri dev

      现在，你应该能看到一个简单的Tauri窗口，上面显示着 "Hello Tauri with Vue!"。

  • Tauri + Vue 的优势

    • 体积小巧：Tauri应用体积远小于Electron应用，因为不包含完整的浏览器。
    • 资源占用低：Tauri应用占用更少的内存和CPU资源。
    • 安全性高：Rust语言本身具有很高的安全性，可以有效防止安全漏洞。
    • 性能优秀：Rust语言的性能非常出色，可以提供流畅的用户体验。

  • Tauri + Vue 的劣势

    • 生态系统相对较小：Tauri的生态系统不如Electron成熟，第三方库相对较少。
    • 学习曲线较陡峭：Rust语言的学习曲线相对较陡峭，需要一定的学习成本。
    • 依赖系统 WebView：依赖系统WebView，不同系统版本表现可能存在差异。

第三部分：Electron vs Tauri：谁更胜一筹？

Electron和Tauri都是优秀的桌面应用开发框架，但它们各有优缺点。选择哪个框架取决于你的具体需求。

特性 Electron Tauri
底层技术 Chromium + Node.js 系统 WebView + Rust
应用体积 较大 较小
资源占用 较高 较低
安全性 依赖开发者安全意识 较高 (Rust 语言的安全性)
性能 较好 优秀
生态系统 成熟，庞大的社区和丰富的第三方库 相对较小，但发展迅速
学习曲线 相对平缓 相对陡峭 (Rust 语言)
适用场景 对系统能力要求高，需要完整浏览器功能的场景 对体积和资源占用有严格要求的场景
开发语言 JavaScript, HTML, CSS JavaScript, HTML, CSS, Rust
跨平台性 优秀 优秀
系统依赖 无 依赖系统 WebView，可能存在兼容性问题

总结：选择适合你的武器

  • 如果你的应用需要访问大量的系统API，或者需要使用一些只有Chromium才支持的特性，那么Electron可能更适合你。 比如，你需要一个内嵌完整浏览器的应用，或者需要一些复杂的音视频处理功能，Electron的成熟生态可能会让你事半功倍。

  • 如果你的应用对体积和资源占用有严格的要求，并且希望获得更高的安全性，那么Tauri可能更适合你。 比如，你需要开发一个轻量级的工具，或者希望你的应用在资源有限的设备上运行，Tauri的轻量化特性会让你受益匪浅。

  • 如果你已经熟悉Rust语言，并且对性能有很高的要求，那么Tauri也是一个不错的选择。 比如，你需要开发一个高性能的桌面应用，或者希望你的应用能够充分利用硬件资源，Tauri的Rust后端会让你拥有更大的控制权。

最后的温馨提示

无论你选择Electron还是Tauri，都需要注意以下几点：

  • 安全性：桌面应用拥有访问系统资源的权限，因此安全性至关重要。一定要采取必要的安全措施，防止安全漏洞。
  • 用户体验：桌面应用的用户体验与Web应用有所不同。要根据桌面应用的特点，优化用户界面和交互方式。
  • 跨平台兼容性：不同的操作系统之间存在差异。要进行充分的测试，确保应用在各个平台上都能正常运行。

好了，今天的讲座就到这里。希望通过今天的分享，能让你对Vue在桌面应用开发中的应用有更深入的了解。记住，没有最好的框架，只有最适合你的框架。选择适合你的武器，才能在桌面应用开发的世界里披荆斩棘，所向披靡！ 祝大家开发愉快！ 咱们下期再见！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注