Electron-Vue 是一个使用 Vue.js 构建跨平台桌面应用程序的框架。它基于 Electron,一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序的开源库。
Electron-Vue 结合了 Vue.js 的灵活性和 Electron 的跨平台能力,使得开发桌面应用程序变得更加简单和高效。以下是一些 Electron-Vue 的主要特点:
本系列将使用yarn作为包管理工具。
安装命令:
npm install -g yarn
yarn --version
设置源:
yarn config set registry https://registry.npm.taobao.org -g
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
electron-builder
是一个用于构建和打包Electron应用程序的强大工具。它允许将你的Electron应用程序打包成可执行文件,以便在不同平台上分发和部署。以下是关于electron-builder
的详细介绍:
多平台支持: electron-builder
支持将Electron应用程序构建为各种操作系统的本机可执行文件,包括Windows、macOS和Linux。这意味着你可以一次构建适用于多个操作系统的应用程序。
自动化打包: electron-builder
提供了一个自动化的构建过程,使得将你的应用程序打包成可分发的文件变得简单。你只需要准备好你的应用程序代码和一些配置,然后electron-builder
将负责执行构建、打包和部署。
丰富的配置选项: electron-builder
允许你通过配置文件来定义构建过程中的各种设置,如应用程序的元数据、文件结构、图标、版本信息、签名等。这使得你可以轻松地定制构建过程以满足你的需求。
自动更新: electron-builder
支持自动更新功能,可以让你的应用程序在用户打开应用时检查并自动下载新版本。这有助于保持用户体验和及时修复错误。
集成第三方依赖: electron-builder
允许你在构建过程中集成第三方依赖,以确保你的应用程序在用户的计算机上能够正常运行。它可以自动安装系统依赖并处理应用程序的依赖关系。
支持多种格式: electron-builder
支持将Electron应用程序打包成多种格式,包括可执行文件、安装程序、归档文件等。这使得你可以根据需要选择不同的分发方式。
集成于开发工作流: electron-builder
可以与常见的开发工作流集成,如npm脚本、CI/CD流程等,使构建和部署过程更加无缝。
下面会使用electron-builder 来构建程序。
# 安装 vue-cli 和 脚手架样板代码
npm install -g vue-cli
vue create my-electron
# 安装依赖并运行你的程序
cd my-electron
vue add electron-builder
npm run electron:serve
# 或 yarn
yarn # 或者 npm install
yarn run electron:serve
yarn run electron:build
background.js
是 Electron 应用程序的主要后台脚本,它在应用程序启动时负责创建主窗口和处理应用程序的生命周期事件。
import { app, protocol, BrowserWindow } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, { VUEJS3_DEVTOOLS } from 'electron-devtools-installer'
这里引入了 Electron 的核心模块以及一些第三方依赖。app
模块用于管理应用程序的生命周期,protocol
模块用于注册 URL 协议,BrowserWindow
用于创建浏览器窗口。vue-cli-plugin-electron-builder/lib
中的 createProtocol
用于创建自定义协议,而 electron-devtools-installer
则用于安装 Electron 开发工具。
protocol.registerSchemesAsPrivileged([
{ scheme: 'app', privileges: { secure: true, standard: true } }
])
这里注册了一个自定义的协议 ‘app’,用于在应用程序中加载本地资源。
async function createWindow() {
// 创建浏览器窗口
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
}
})
// 根据开发环境加载不同的内容
if (process.env.WEBPACK_DEV_SERVER_URL) {
await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
if (!process.env.IS_TEST) win.webContents.openDevTools()
} else {
createProtocol('app')
win.loadURL('app://./index.html')
}
}
这个函数负责创建浏览器窗口,设置窗口的初始大小和 WebPreferences。在开发模式下,会加载开发服务器的 URL,并在需要时打开开发工具。在生产模式下,会通过自定义协议加载应用程序的主页面。
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
app.on('ready', async () => {
if (isDevelopment && !process.env.IS_TEST) {
try {
await installExtension(VUEJS3_DEVTOOLS)
} catch (e) {
console.error('Vue Devtools failed to install:', e.toString())
}
}
createWindow()
})
if (isDevelopment) {
if (process.platform === 'win32') {
process.on('message', (data) => {
if (data === 'graceful-exit') {
app.quit()
}
})
} else {
process.on('SIGTERM', () => {
app.quit()
})
}
}
这一部分设置了应用程序的生命周期事件和相应的监听器。
window-all-closed
事件在所有窗口关闭时触发,根据平台决定是否退出应用程序。activate
事件在应用程序激活时触发,如果没有窗口存在,则创建一个新窗口。ready
事件在应用程序初始化完成时触发,如果是开发模式且不是测试环境,会尝试安装 Vue Devtools 插件。最后,根据开发模式和平台不同,设置退出应用程序的条件。https://vuetifyjs.com/en/getting-started/installation/
yarn add vuetify
import { createApp } from 'vue'
import App from './App.vue'
// Vuetify
import 'vuetify/styles'
import vuetify from './plugins/vuetify'
createApp(App).use(vuetify).mount('#app')
使用示例:
HelloWorld.vue
<template>
<v-container>
<v-row class="text-center">
<v-col cols="12">
<v-btn>
Button
v-btn>
v-col>
v-row>
v-container>
template>
<script>
export default {
name: 'HelloWorld',
}
script>
// Styles
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
import { VBtn } from 'vuetify/components/VBtn'
import 'vuetify/dist/vuetify.min.css';
// Vuetify
import { createVuetify } from 'vuetify'
export default createVuetify(
{
aliases: {
VBtnPrimary: VBtn,
},
defaults: {
VBtnPrimary: {
class: ['v-btn--primary', 'text-none'],
},
VBtn: { variant: 'flat' }
}
}
)