一分钟搭建vue+Electron跨平台桌面应用，代码简单好上手！

2023-10-06 00:50:50

使用vue-cli3 + Electron开发跨平台桌面应用

如今，越来越多的企业和个人开始使用跨平台桌面应用，因为它们可以同时在Windows、macOS和Linux上运行，这使得它们在不同操作系统环境下都可以使用。跨平台桌面应用可以用来开发各种各样的应用程序，包括生产力工具、游戏、媒体播放器等等。

在本文中，我们将介绍如何使用 vue-cli3 和 Electron 来开发一个跨平台的桌面应用程序。我们将从安装 vue-cli3 开始，然后创建我们的 Vue 项目并安装 Electron。最后，我们将逐步介绍如何配置 Electron，使其能够与我们的 Vue 项目一起工作。

一、安装vue-cli3

1. 1. 安装前提

为了使用 vue-cli3，需要先安装好node.js和yarn。

1. 2. 安装方法

npm install -g @vue/cli
# or
yarn global add @vue/cli

二、创建Vue项目

2. 1. 创建Vue项目

使用 vue-cli3 创建一个新的 Vue 项目。

vue create my-project

2. 2. 安装Electron

在项目根目录下安装Electron。

yarn add electron

2. 3. 创建主文件

在项目根目录下创建main.js文件，用于启动Electron。

const { app, BrowserWindow } = require('electron')

function createWindow () {
  // 创建浏览器窗口
  const win = new BrowserWindow({ width: 800, height: 600 })

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

  // 打开开发者工具
  win.webContents.openDevTools()
}

// 当Electron初始化完成时创建窗口
app.whenReady().then(() => {
  createWindow()

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

// 当所有窗口都关闭时退出应用程序
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

2. 4. 创建渲染器进程文件

在项目根目录下创建renderer.js文件，用于在浏览器窗口中渲染Vue应用程序。

const { createApp } = require('vue')
const App = require('./App.vue')

// 创建Vue应用程序
const app = createApp(App)

// 将应用程序挂载到元素上
app.mount('#app')

2. 5. 配置Electron

在项目根目录下创建package.json文件，并添加以下配置：

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "A cross-platform desktop application built with Vue.js and Electron.",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "electron": "^15.2.0",
    "vue": "^3.2.33"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.15",
    "@vue/cli-plugin-eslint": "^4.5.15",
    "@vue/cli-service": "^4.5.15",
    "@vue/compiler-sfc": "^3.2.33"
  }
}