桌面端程序Electron入门到熟练
*node.js*
: 听过*Electron*
的都知道他使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序, 在现在的以单页面应用程序为主的前端环境来看, 毫无疑问需要用的*node.js*
环境
Electron 有两种进程:主进程和渲染进程。
- 主进程通过创建 BrowserWindow 实例来
创建
网页。 每一个BrowserWindow
实例在其渲染过程中运行网页, 当一个BrowserWindow
实例被销毁时,对应的渲染过程也会被终止。 - 主进程 管理 所有网页及其对应的渲染进程。
- 渲染进程只能管理相应的网页, 一个渲染进程的崩溃不会影响其他渲染进程。
- 渲染进程通过 IPC 与主进程通信在网在页上执行 GUI 操作。 出于安全和可能的资源泄漏考虑,直接从渲染器进程中调用与本地 GUI 有关的 API 受到限制。
进程之间的通信可以通过 Inter-Process Communication(IPC) 模块进行:ipcMain
和 ipcRenderer
# 打包
- 第一种 最简打包
npm install electron-packager -g
electron-packager .
1
2
2
# vue + electron
electron-vue 上次更新时间是4年前 毫无疑问再大前端这个领域是过时的了, 这里使用插件创建
**Vue CLI Plugin Electron Builder**
https://nklayman.github.io/vue-cli-plugin-electron-builder/创建完成后就按正常vue项目开始基建
导入
normalize.css
npm i normalize.css -S
// 全局css
import "normalize.css/normalize.css"; // a modern alternative to CSS resets
1
2
2
使用
element-ui
框架npm i element-ui -S
main.js 引入
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI);
1
2
3
4
2
3
4
上次更新: 2022/06/05, 20:31:36