Electron桌面端构建

Electron 是一个开源框架,用于构建跨平台的桌面应用程序。它由 GitHub 开发,并且基于 Node.js 和 Chromium 构建。Electron 允许开发者使用 Web 技术(HTML、CSS 和 JavaScript)来创建桌面程序,可以在 Windows、macOS 和 Linux 等操作系统上运行。

Electron 的核心是一个使用 Chromium 运行时的 JavaScript 运行环境。它将你的应用程序和本地操作系统进行了解耦,使你可以使用 Web 技术来构建界面和处理用户交互,并且可以访问本地的系统资源和功能,如文件系统、网络等。这使得 Electron 非常适合开发跨平台的桌面应用程序,如文本编辑器、IDE、音乐播放器等。

Electron 还有丰富的插件生态系统,开发者可以通过使用第三方插件来扩展应用程序的功能,如添加通知、文件拖放、快捷键等。

Electron 提供了一种简单、灵活且强大的方式来开发跨平台的桌面应用程序,同时利用 Web 技术的优势和丰富的插件生态系统,使开发过程更加高效和便捷。

启动项目

java 复制代码
npm install -g @vue/cli  //安装 Vue CLI
vue create my-vue-electron-project //创建一个新的 Vue.js 项目
cd my-vue-electron-project //进入目录
npm install electron --save-dev //安装 electron 及其他必要的依赖

创建main.js

scss 复制代码
const { app, BrowserWindow } = require('electron')

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

  // 加载 Vue 应用的 index.html 文件
  win.loadURL('http://localhost:8080')

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

// 当 Electron 完成初始化并准备创建浏览器窗口时调用此方法
app.whenReady().then(createWindow)

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

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

修改pacakge.json文件,添加 Electron 的配置。在package.json文件的scripts部分,换成electron的配置

json 复制代码
"scripts": {
  "serveserve": "vue-cli-service build && electron .",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint"
},

运行 npm run serveserve

相关推荐
盛夏绽放6 分钟前
接口验证机制在Token认证中的关键作用与优化实践
前端·node.js·有问必答
zhangxingchao23 分钟前
Jetpack Compose 之 Modifier(中)
前端
JarvanMo23 分钟前
理解 Flutter 中 GoRouter 的context.push与context.go
前端
pe7er29 分钟前
使用 Vue 官方脚手架创建项目时遇到 Node 18 报错问题的排查与解决
前端·javascript·vue.js
星始流年32 分钟前
前端视角下认识AI Agent
前端·agent·ai编程
pe7er36 分钟前
使用 types / typings 实现全局 TypeScript 类型定义,无需 import/export
前端·javascript·vue.js
CH_Qing36 分钟前
【udev】关于/dev 设备节点的生成 &udev
linux·前端·网络
小诸葛的博客41 分钟前
gin如何返回html
前端·html·gin
islandzzzz1 小时前
(第二篇)HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html
喝拿铁写前端1 小时前
前端实战优化:在中后台系统中用语义化映射替代 if-else,告别魔法数字的心智负担
前端·javascript·架构