正文

学会Electron框架Vue3，打造桌面应用实战指南

/0 浏览量
0623

了解Electron和Vue3

Electron是一个使用Web技术（HTML，CSS和JavaScript）来创建桌面应用程序的框架。它由GitHub开发，并允许开发者利用他们已经熟悉的Web技术来构建跨平台的应用程序。Vue3是一个流行的前端JavaScript框架，用于构建用户界面和单页应用程序。

安装和设置开发环境

1. 安装Node.js和npm

首先，确保你的计算机上安装了Node.js和npm。你可以从Node.js官网下载并安装。

2. 创建Electron项目

使用以下命令创建一个新的Electron项目：

npm init -y
npm install electron --save-dev

3. 安装Vue3

在项目目录中，创建一个名为src的文件夹，并在其中创建一个名为main.js的文件。然后，安装Vue3：

cd src
npm install vue@next

构建Vue3应用

在src文件夹中，创建一个名为App.vue的文件，并添加以下内容：

<template>
  <div id="app">
    <h1>欢迎来到Electron和Vue3的世界！</h1>
  </div>
</template>

<script>
import { createApp } from 'vue'

createApp({
  // ...
}).mount('#app')
</script>

<style>
/* ... */
</style>

然后，在main.js中导入Vue应用并启动Electron：

const { app, BrowserWindow } = require('electron')
const Vue = require('vue')
const App = require('./App.vue')

let win

function createWindow () {
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadFile('src/index.html')

  win.on('closed', () => {
    win = null
  })
}

app.whenReady().then(createWindow)

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

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

添加桌面应用功能

1. 交互式菜单

在main.js中，添加以下代码来创建一个交互式菜单：

const Menu = require('electron').Menu
const template = [
  {
    label: 'File',
    submenu: [
      {
        label: 'Exit',
        accelerator: process.platform === 'darwin' ? 'Command+Q' : 'Ctrl+Q',
        click: () => {
          app.quit()
        }
      }
    ]
  }
]

const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)

2. 窗口状态

使用Electron的session模块来存储窗口状态：

const session = require('electron').session
const Store = require('electron-store')

const store = new Store()

session.defaultSession.webContents.on('will-navigate', (event, url) => {
  store.set('lastUrl', url)
})

app.whenReady().then(() => {
  const lastUrl = store.get('lastUrl')
  if (lastUrl) {
    win.loadURL(lastUrl)
  }
})

部署桌面应用

1. 打包应用

使用Electron的electron-builder插件来打包你的应用程序：

npm install electron-builder --save-dev

在package.json中，添加以下脚本：

"scripts": {
  "start": "electron .",
  "build": "electron-builder"
}

然后，运行以下命令来打包你的应用程序：

npm run build

2. 发布应用

将打包的应用程序上传到你的应用商店或发布到网络。

总结

通过学习Electron框架和Vue3，你可以轻松地创建跨平台的桌面应用程序。遵循上述步骤，你可以开始构建自己的桌面应用，并逐步添加更多功能。祝你学习愉快！

-- 展开阅读全文 --