- 综合排序
- 最热优先
- 最新优先
- 来自专栏小鑫同学编程历险记
客户端开发（Electron）系统级API使用
系统对话框： 1. 调用系统API实现文件保存或读取前的选择功能： 如上图所示的功能，我们在使用电脑时就经常会遇到，在Electron中我们可以通过调用dialog.showOpenDialogSync函数同步打开下面的对话框 特殊对话框（关于面板）： 如上图就是我们设置过后的特殊对话框关于面板，通常显示当前客户端应用的信息。 菜单栏菜单： Electron提供的默认菜单栏中的菜单都是一些为了演示和开发使用的，在实际的应用中我们还是需要进行配置来实现我们自己的功能。 系统右键菜单： 通过覆盖oncontextmenu来实现弹出定义的菜单想： const menus = [ { label: '文件', submenu: [{ label: '新建文件
4K50编辑于 2022-12-26 - 来自专栏小鑫同学编程历险记
客户端开发（Electron）系统级API使用2
Dear，大家好，我是“前端小鑫同学”，长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～ Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 图中的代码通过监听onkeydown事件，来判断按键是否同时满足ctrl+s（ascll码），mateKey值Mac系统的花键。 这种监听快捷键的特点是只能在窗口处于激活的时候才能触发，但你会发现我们使用系统的一些快捷键是可以唤醒应用的，那这种非激活状态应用的快捷键监听就只能通过Electron提供的系统级API来实现了。 托盘图标的设置： 托盘图标指的就是在电脑底部的任务栏右侧经常会闪动的QQ头像，还有快捷设置离线状态的菜单等，我们就用Electron的API来实现一下这两个小功能吧。 总结： 本篇学习了在客户端应用中监听按键实现快捷键的两种方式，但也要注意避免快捷键的冲突和滥用，也学习了常见的托盘图标的设置和菜单的设置，知道了我们如何在有新消息送达时和QQ一样来闪烁起来，学习阶段化繁为简
3.3K50编辑于 2022-12-26 - 来自专栏h5
整合vite2+electron12撸后台管理系统
Vite2ElectronAdmin 一款精美UI跨平台前端后台管理系统框架。 前一段时间有给大家分享一个Electron+Vue3.x短视频，今天再分享最新开发的Electron桌面端后台系统。 001360截图20210516222515420.png vite2，electron12、element plus跨端后台框架 vite2-admin vue3-admin electron-vadmin 038360截图20210516121336621.png 特点 支持PC及平板端响应式布局 使用最新前端技术Vite2.1.5、Vue3.x、Electron12、Element Plus、Vue-i18n ^12.0.4 打包工具：vue-cli-plugin-electron-builde UI组件库：element-plus^1.0.2 表格拖拽：sortablejs^1.13.0 图表组件：echarts 开发前端后台管理系统就先分享到这里。
2.6K10发布于 2021-05-18 - 来自专栏h5
Electron-React19-WinChat聊天系统|react+electron客户端聊天程序Exe
electron38-vite7-vue3os电脑端os管理系统 最新版electron38-vite7-admin电脑端中后台管理系统 Electron38+Vite7+Pinia3+ElementPlus 客户端聊天程序 基于React19+Arco+Zustand5接入DeepSeek-V4网页版仿豆包/Kimi流式AI系统Vite8.0+Vue3.5+Arco深度对接DeepSeek网页版AI智能助手 +arcoDesign网页端webOS桌面框架自研Vite8+NaiveUI+Vue3+Echarts后台管理系统全新研发Flutter3.41桌面版OS系统最新款flutter3.41 & dart3.11 打造流式输出客户端AI助手基于tauri2.8+vite7+vue3+element-plus仿QQ/微信聊天应用 tauri2.9-vite7-vue3admin客户端后台系统管理Exe模板 最新原创 uniapp-vue3-osadmin手机版后台管理系统 最新研发uniapp+vue3仿微信app聊天模板 基于uni-app+vue3实战短视频+聊天+直播app商城
18320编辑于 2026-08-17 - 来自专栏编程微刊
11个免费开源后台管理系统模板
当你写项目的时候，如何快速的完成一个项目的搭建，这个时候就需要借助到一些模板了，前端开发的一个好处就是，各类UI模板都是相当的齐全的，直接拿来用就可以了，脱离了一行又一行垒代码的繁琐的工作，以下的开源后台管理系统模板是我在逛 UI 框架，这是一个非常老牌的后台管理系统模板，每个页面都是单独的html网页，适合前端入门新手来做项目。 Demo体验：https://lin-xin.gitee.io/example/work/#/dashboard vue-manage-system，一个基于 Vue.js 和 element-ui 的后台管理系统模板 ，挺喜欢这个界面的UI，简约清晰不累赘，多功能的后台框架模板，适用于绝大部分的后台管理系统开发。 ，基于 vue.js 和 ElementUI 的管理系统前端解决方案 ，小于 60kb 的本地首屏 js 加载,已经做好大部分项目前期准备工作 11：vuestic-admin 推荐指数：star:7.1k
9.4K11编辑于 2025-05-19 - 来自专栏编程微刊
11个免费开源后台管理系统模板
当你写项目的时候，如何快速的完成一个项目的搭建，这个时候就需要借助到一些模板了，前端开发的一个好处就是，各类UI模板都是相当的齐全的，直接拿来用就可以了，脱离了一行又一行垒代码的繁琐的工作，以下的开源后台管理系统模板是我在逛 UI 框架，这是一个非常老牌的后台管理系统模板，每个页面都是单独的html网页，适合前端入门新手来做项目。 Demo体验：https://lin-xin.gitee.io/example/work/#/dashboard vue-manage-system，一个基于 Vue.js 和 element-ui 的后台管理系统模板 ，挺喜欢这个界面的UI，简约清晰不累赘，多功能的后台框架模板，适用于绝大部分的后台管理系统开发。 11：d2-admin 推荐指数：star:8.7k github地址：https://github.com/d2-projects/d2-admin D2Admin 是一个完全 开源免费 的企业中后台产品前端集成方案
59.2K1010发布于 2020-06-03 - 来自专栏小鑫同学编程历险记
客户端开发（Electron）主题切换
Dear，大家好，我是“前端小鑫同学”，长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～ Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 本篇说明： 主题切换在安卓、IOS、PC网站的应用的特别的广泛，在第一次接触flutter的时候第一次做状态切换的案例同样也是主题切换，巧了，学习electron的第一个案例也是，具体用到了哪些知识呢？ 准备本篇的首页： 支持显示当前的主题来源：跟随系统/手动切换； 提供两个按钮来触发切换事件； 通过renderer脚本来进行渲染。 <! strong>
<button id="toggle-dark-mode">开启黑暗主题模式</button> <button id="reset-to-system">重置为系统主题模式1.7K40编辑于 2022-12-26 - 来自专栏小鑫同学编程历险记
客户端开发（Electron）发送通知
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 本篇说明： 在windows，macOS，linux操作系统均为开发者提供了向用户发送通知的API，也是客户端开发标配的功能之一，在Electron中主进程和渲染进程显示的方式不太一样，我们用实际的案例来演示一下 并且点击后可以获的反馈 document.getElementById("clickme").addEventListener("click", () => { new Notification("今日更文：客户端开发 主进程发送通知我们还是要在渲染脚本来触发 document.getElementById("clickme2").addEventListener("click", () => { window.send.notice( "客户端开发 （Electron）URL远程启动", "「这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」。"
2.4K40编辑于 2022-12-26 - 来自专栏小鑫同学编程历险记
客户端开发（Electron）加入webpack
本篇说明： 今天我们将在前端开发中最为常见webpack加入到Electron中，因为GUI引用不同于传统的Web前端项目，所以webpack的配置会相对繁琐，这里我们主要用到了electron-webpack 开始前的准备： 初始化项目：mkdir electron-webpack-demo && cd . \electron-webpack-demo && npm init； 安装开发依赖：yarn add electron-webpack electron webpack@4 --dev / 配置"app:dir": "electron-builder --dir"命令，用来构建应用后直接输出而不生成安装文件； 配置"app:dist": "electron-builder"命令，用来构建应用后输出安装文件用于分发 ； 为了达到可分发的标准还需要配置一些其他信息，具体参照https://www.electron.build/来配置。
1.8K40编辑于 2022-12-26 - 来自专栏小鑫同学编程历险记
客户端开发（Electron）数据存储
本地文件存储： 存储目录： 因为不通的系统的文件目录不统一，Electron提供了专有的API来方便我们获取目录（app.getPath("userData");） 常见的用户目录： desktop、documents 、downloads、pictures、music、video 特殊的文件目录： temp对应系统临时文件夹路径。 系统默认目录： 当前用户的主目录：require('os').homedir(); / C:\Users\<username> 默认临时文件目录：require('os').homedir(); / C electron-store： https://github.com/sindresorhus/electron-store，专门为Electron设计的存取用户配置，应用状态，缓存的扩展。 build-from-source --runtime=electron --target=13.6.9 --dist-url=https://atom.io/download/electron 安装knexjs
3.7K50编辑于 2022-12-26 - 来自专栏小鑫同学编程历险记
客户端开发（Electron）认识窗口
Dear，大家好，我是“前端小鑫同学”，长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～ Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 如下图： 在Vue的App.vue中通过html标签来绘制我们的标题栏，绘制后的结果如下图所示： 为标题栏的按钮增加事件： 按钮事件和调用函数的定义均与Vue一致，我们需要考虑的是如何与Electron 联通来调用对应的API： 调整窗口对象中的如下所示属性，切记启用remote： 在App.vue中导入electron对象： const { remote } = window.require('electron 当我们修改主进程的代码并服务自动重启后你会发现窗口会先回到居中的位置再移动到保存的窗口状态的位置，我们需要在主进程关闭展示窗口，并由我们在渲染进程中控制： 总结： 本篇主要介绍了对于Electron
6.2K60编辑于 2022-12-26 - 来自专栏小鑫同学编程历险记
客户端开发（Electron）快速入门
初始化项目： 初始化一个空项目，可以使用mkdir my-electron-app && cd my-electron-app并执行npm init，初始化的后要保证package中的字段 /' 'electron_mirror = https://registry.npmmirror.com/electron/' > .npmrc 安装Electron： npm install --save-dev electron 配置scripts： 启动electron命令："start": "electron ." npm run make 打包结束后会在项目根目录下生成out文件及打包内容 总结： 内容主要整理自官方指南，我也是头一回学习客户端开发，打算把官方文档的内容进行精简并实践一次，整体过完后在总结一次客户端开发的一些内容 ，并且我也会完善此次客户端学习的思维导图，后期复习就不再翻文档了。
2.4K50编辑于 2022-12-26 - 来自专栏小鑫同学编程历险记
客户端开发（Electron）认识窗口2
Dear，大家好，我是“前端小鑫同学”，长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～ Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 process.env.ELECTRON_NODE_INTEGRATION nodeIntegration: true, contextIsolation: false, , message: '系统可能不会保存您所做的更改。' remote.getCurrentWindow(), modal: true, webPreferences: { nodeIntegration: true } }) 总结： 关于Electron
1.5K20编辑于 2022-12-26 - 来自专栏liulun
electron开发客户端注意事项
窗口间通信的问题 electron窗口通信比nwjs要麻烦的多 electron分主进程和渲染进程，渲染进程又分主窗口的渲染进程和子窗口的渲染进程 主窗口的渲染进程给子窗口的渲染进程发消息 subWin.webContents.on 获取app版本号的hack代码 本来electron获取app版本号很简单，只要如下即可（以下代码运行在main进程中） import { app, BrowserWindow,ipcMain } from （就是electron的版本号）。 因为我用的electron-vue，他又两种模式，生产模式和开发模式 在生产模式下没任何问题 在开发模式下，它其实是起了一个webserver，让electron加载一个localhost的地址 这样做主要是为了使用 vue的hotload的优势 但这样的话，electron就找不到 package. json 文件中的版本号了 怎么办呢？
2.6K40发布于 2019-05-25 - 来自专栏h5
Electron13+Vue3+ElementPlus模仿macOS桌面版后台系统框架
项目介绍 electron-vue3-macOS 一款整合vite2.x+electron13跨平台构建模仿mac桌面UI后台管理系统。 ", "version": "0.1.0", "description": "基于Electron13+Vite2+ElementPlus仿Mac桌面UI后台框架", "author": " :serve": "vue-cli-service electron:serve", "electron:build": "vue-cli-service electron:build" } 打包配置 { "productName": "electron-macui", "appId": "cc.xiaoyan.electron-macui", "copyright" ${ext}" } } ending，基于vue3+vite2+electron13开发仿macOS桌面系统就分享到这里。 11.sinaimg.gif
3.8K10发布于 2021-06-24 - 来自专栏小鑫同学编程历险记
客户端开发（Electron）URL远程启动
Dear，大家好，我是“前端小鑫同学”，长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～ Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 本篇说明： 我们在使用一些客户端应用的时候，尤其是用的最多的微信，你在微信客户端打开一些页面的时一般都会默认在微信的浏览器打开，并且在右上角提供了按钮支持在你电脑上装的浏览器里打开。 我们一起来走进Electron Url 远程启动。 环境说明： 设备环境Windows； 代码环境：快速入门 提示说明： 客户端开发在不同的平台有不同的特性； 不同的平台有不同的API。 客户端操作时：在浏览器打开： 第一步：在preload中定义打开浏览器的桥接函数 通过渲染进程发送open事件 桥接函数 const { contextBridge, ipcRenderer } = require pagePath = path.join("file://", __dirname, "index.html"); shell.openExternal(pagePath); }); 浏览器操作时：在客户端打开
2.3K30编辑于 2022-12-26 - 来自专栏h5
最新版electron38-vite7-admin电脑端中后台管理系统
2025最新跨平台electron38+vue3+vite7+pinia3+element-plus桌面端通用后台系统模板。 ^24.13.3electron+vite整合插件：vite-plugin-electron^0.29.0项目框架结构Electron主进程入口配置/** * electron主进程配置 * @author +Vite7+Pinia3+ElementPlus客户端聊天程序最新原创uniapp-vue3-osadmin手机版后台管理系统最新研发uniapp+vue3仿微信app聊天模板最新原创flutter3.27 +bitsdojo_window客户端聊天Exe自研新版Flutter3.32仿微信app聊天|朋友圈模板基于uni-app+vue3实战短视频+聊天+直播app商城基于uniapp+deepseek+ os系统electron31+vue3客户端聊天Exe实例tauri2.0+rust+vue3电脑版Exe聊天软件
73610编辑于 2025-09-28 - 来自专栏小鑫同学编程历险记
客户端开发（Electron）加入Vue2.6
创建Vue基础项目： 我们通过VueCli（vue create electron-vue-demo）快速创建一个Vue的基本项目： 安装electron-builder插件： 安装【vue-cli-plugin-electron-builder 】插件：vue add electron-builder： 插件的源码地址：https://github.com/nklayman/vue-cli-plugin-electron-builder 安装成功后启动和编译命令变更如下图所示： 使用yarn electron:serve 或 npm run electron:serve 启动过程中会拉取vue-devtools的浏览器调试插件 /dist_electron"], "outFiles": ["${workspaceFolder}/dist_electron/**/*.js"] }, { "name": "Electron ": ["Electron: Main", "Electron: Renderer"] } ] } 总结： 本篇内容讲述了使用vue-cli-plugin-electron-builder项目来为Vue
1.6K30编辑于 2022-12-26 - 来自专栏计算机编程
electron-vue 制作 http 应用客户端
关于https声明：由于在制作过程中发现https重定向问题尚未解决，所以只将http客户端相关制作流程开源出来，让大家可以制作属于自己的http页面应用 1、搭建环境 1.1、 下载node ： 点击下载最新版本 vs生成工具.png 2、构建项目 shell: vue init simulatedgreg/electron-vue my-project 注意：需要选择electron-packager 来直接构建自己的客户端应用 ，如果想持续构建那就选择electron-builder，更多配置问题请参考文档：electron-build 文档 ? 5、客户端生成 shell: npm run build:win32 说明：这里仅针对windows系统来进行客户端生成在package.json里配置有各种系统相对应的配置以及shell指令，如下图所示 build完成.png 查看生成的对应系统的应用 ? 构建完毕的目录.png 打开应用即为跳转过后的页面（此处以QQ为例：http://www.qq.com） ? 构建完成的应用.png
1.9K50发布于 2018-09-12 - 来自专栏h5
Electron41+React19+Antd桌面版后台管理Exe系统
经过一周爆肝研发，又一个原创新项目完结~ 2026年9月实战跨平台electron41+react19.2+ant-design客户端通用中后台前端admin管理系统ElectronReacAdmin。 Electron-React19-WinChat聊天系统|react+electron客户端聊天程序ExeReact19+Arco+Zustand仿macOS风格webOS桌面系统electron38- vite7-vue3os电脑端os管理系统 最新版electron38-vite7-admin电脑端中后台管理系统 Electron38+Vite7+Pinia3+ElementPlus客户端聊天程序 Flutter3.41+Dio+WindowManager打造桌面版AI问答系统Flutter3.41实战AI：从零到一构建app版流式ai系统Electron41 + Vite8打造流式输出客户端AI 助手基于tauri2.8+vite7+vue3+element-plus仿QQ/微信聊天应用 tauri2.9-vite7-vue3admin客户端后台系统管理Exe模板 最新原创uniapp-vue3
13520编辑于 2026-09-10
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号