Electron+Vue：从桌面应用到跨平台开发的全方位解析

NPBOG • 2025-02-25 18:17 • 编程

一、入门介绍

Electron是一个可以使用Web技术（HTML、CSS、JavaScript）构建跨平台桌面应用程序的开源库。它支持Windows、macOS和Linux系统，能够将网页快速转化为本地应用程序，提供更多的桌面特性。Vue.js是一种轻量级的JavaScript框架，为响应式编程提供了更好的支持，为开发人员提供了一个高效率的编程体验。

二、基本操作

Electron+Vue的基本操作非常简单，我们只需要先安装Electron：npm install electron –save-dev，再在项目中安装Vue.js，使用webpack将Vue.js打包成bundle.js，然后在Electron的主进程中通过BrowserWindow加载bundle.js即可。

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

let win;

function createWindow() {
  win = new BrowserWindow({ width: 800, height: 600 })
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))
  win.on('closed', () => {
    win = null
  })
}

app.on('ready', createWindow)

在Vue.js中，我们可以像普通网页一样编写组件，使用webpack打包后在Electron中使用就行了。

三、专业特性

与浏览器不同，Electron提供了更多的桌面特性和API。例如，我们可以在Electron中使用Node.js的所有API，可以通过内置的对话框（dialog）打开本地文件，或者使用系统通知，甚至可以通过菜单栏添加应用程序菜单，从而提供更友好的用户体验。

//示例：在Electron中使用系统通知
const { Notification } = require('electron')
new Notification({
  title: '标题',
  body: '消息内容'
}).show()

四、扩展应用：Vue-cli-plugin-electron-builder

Vue-cli-plugin-electron-builder是一个Vue.js插件，用于集成Electron和Vue.js，让你能够快速构建和打包你的Electron应用程序。安装该插件后，我们可以使用命令vue-cli-service electron:build，就能够将我们的项目打包成Windows、macOS和Linux三种平台的应用程序。

//示例：安装vue-cli-plugin-electron-builder
npm install vue-cli-plugin-electron-builder --save-dev

五、项目推荐：Element

Element是一套基于Vue.js 2.0的桌面端UI组件库。它不仅提供了常用的UI组件，例如Button、Form、Table等，还提供了桌面端的一些特殊UI组件，例如Window、MessageBox等。使用Element，我们能够快速构建一个美观、易用的Electron应用。

六、结语

Electron+Vue的组合是一种非常强大的桌面端开发工具，它不仅提供了Web技术的高效率，而且具有更多桌面应用程序的特性和接口。我们可以在Electron中使用Node.js、内置对话框和通知、菜单栏等桌面特性，使用Vue.js编写模块化的组件，并且使用Element等UI组件库，轻松构建美观、易用的跨平台桌面应用程序。

原创文章，作者：NPBOG，如若转载，请注明出处：https://www.506064.com/n/361548.html