Electron 【基础】
言小溪
一碰编程就上瘾
展开
-
electron 模仿 vscode 启动, 真正的无边框
使用 ffi-napi 调用底层 dll , 实现模拟 vscode 无边框启动。参考文献:https://docs.microsoft.com/en-us/windows/win32/api/winuser/nf-winuser-setwindowlongahttps://docs.microsoft.com/en-us/windows/win32/api/winuser/nf-winuser-setwindowpos// @ts-checkconst { BrowserWindow, app原创 2022-03-17 12:07:46 · 801 阅读 · 0 评论 -
electron vue3 typescript 使用 nodejs 的 fs, path 等库, 以及类型声明
在 electron 环境下的 vue3 使用 import 会导致报错,但是又想使用代码提示支持,可以使用如下方法。<template>...</template><script setup lang="ts">const fs = require("fs") as typeof import("fs");const path = require("path") as typeof import("path");// code here ...<原创 2022-02-26 20:48:23 · 3744 阅读 · 0 评论 -
electron-builder 和 pnpm(monorepo) 一起使用
一般使用 pnpm 的 electron 项目结构如下:+ packages/ + app # electron 文件夹 + web # web端的文件夹 ...其他项目.npmrcpackage.jsonpnpm-workspace.yamlpnpm-workspace.yaml 设置如下packages: # all packages in subdirs of packages/ and components/ - "packages/**" # 排除 e原创 2022-02-24 17:13:40 · 2483 阅读 · 2 评论 -
electron 自定义标题栏(windows 系统)
其实没有网上那么麻烦,如果你仅仅只是想去掉标题,还有下面的工具栏,只需要如下配置const win = new BrowserWindow({ width: 800, height: 600, titleBarStyle: "hidden", titleBarOverlay: { color: "#fff", symbolColor: "black", }});这样就会出现原生的最小化,关闭等按钮在 win 的右侧,主要这个区域原创 2022-02-08 19:34:44 · 6942 阅读 · 0 评论 -
electron 拦截所有页面跳转
const win = new BrowserWindow({})// 处理链接跳转win.webContents.on('will-navigate', (e, url) => { e.preventDefault() shell.openExternal(url)})// 处理 window.open 跳转win.webContents.setWindowOpenHandler((data) => { shell.openExternal(data.url)原创 2021-09-25 17:52:06 · 3142 阅读 · 1 评论 -
electron 平滑启动,解决启动闪过黑屏与卡顿问题
const { app, BrowserWindow } = require('electron');// 关闭GPU加速 app.disableHardwareAcceleration()app.whenReady().then(() => { createWindow() app.on('activate', function () { if (BrowserWindow.getAllWindows().length === 0) createWindo原创 2021-09-23 12:05:46 · 2756 阅读 · 0 评论 -
electron vue3 + ts 初始化项目
新建 vue3 + ts 项目npm init @vitejs/app electron-demo选择 vue-ts ,等待项目创建完成安装 electronnpm i electron -D确认 node_modules/electron/dist/electron.exe 是否下载成功如果没有下载成功需要手动下载 node .\node_modules\electron\install.js直到 100% 下载完成后才算安装完成创建 electron 入口文件在根目录下创建文原创 2021-09-22 22:56:58 · 544 阅读 · 0 评论 -
electron-store 本地储存数据
elelctron-storeelelctron-store 是很好的本地储存库https://www.npmjs.com/package/electron-store使用npm i elelctron-store设置 electron-vue 的运行环境在项目根路径下新增 vue.config.jsmodule.exports={ pluginOptions: { electronBuilder: { nodeIntegration: true原创 2021-03-22 19:35:10 · 3004 阅读 · 0 评论 -
electron npm 安装很慢的解决方案
使用一个中国的镜像:#在powershell命令行中输入以下指令 $ELECTRON_MIRROR="https://cdn.npm.taobao.org/dist/electron/"#重新安装npm i electron -D原创 2021-02-22 22:36:28 · 1004 阅读 · 0 评论 -
electron-vue2 项目初始化
不要使用网上或者 github 的模板初始化项目。直接上代码#安装 vuecli 脚手架npm update @vue/cli#初始化 project-name 项目vue create project-name#进入项目cd project-name# 安装 electron-buildervue add electron-builder#安装依赖npm install#运行npm run electron:serve#打包npm run electron:build原创 2021-02-22 20:17:58 · 388 阅读 · 0 评论 -
Electron + vue 新建项目
最近想学一下桌面端的开发,所以选择使用 electron + vue 框架话不多说直接上代码1 安装node环境这个我就不多说了2 创建electron vue 项目//1.安装使用vue-cli 脚手架模板 simulatedgreg/electron-vuevue init simulatedgreg/electron-vue 你的项目名//2.下载依赖npm install//3.重新下载electron依赖,不重新下载可能会报错npm i electron -D//4.运行原创 2020-11-27 20:41:20 · 313 阅读 · 0 评论