Electron
关注
分享
扫一扫
Electron学习与实战
晓果博客
You’ll never realize how strong you are until you have no other choice but to be strong<br>你永远都不会知道自己到底有多坚强，直到有一天你除了坚强别无选择。
展开
-
electron-vue通过配置文件设置baseUrl
在项目更目录下创建config.conf{ "baseURL": "http://***.cn:8001"}在package.json中配置build"build": { ... "appId": "com.yuma.duifu", "extraResources": { "from": "./config.conf", "to": "../" }, .原创 2021-12-20 17:04:07 · 2269 阅读 · 1 评论 -
electron-vue 中element-ui的el-table列表不显示、样式不起作用等问题
把element-ui加入到.electron-vue/webpack.renderer.config.js文件中的白名单中重新运行即可原创 2021-12-20 11:55:59 · 889 阅读 · 0 评论 -
第十六章：Electron-Vue 使用highcharts
安装highchartsnpm install --save highchartshttps://github.com/highcharts/highcharts安装vue-highchartsnpm i -S vue-highchartshttps://github.com/weizhenye/vue-highchartsmain.js中引入import Vue from 'vue';import VueHighcharts from 'vue-highcharts';.原创 2020-08-04 16:22:39 · 522 阅读 · 0 评论 -
第十五章：Electron-Vue 操作本地数据库nedb
安装nedb数据库cnpm install nedb --save新建一个src/renderer/datastore.jsimport Datastore from 'nedb'import path from 'path'import { remote } from 'electron'export default new Datastore({ autoload: true, filename: path.join(remote.app.getPath('userDa.原创 2020-08-03 18:28:27 · 5532 阅读 · 5 评论 -
第十四章：Electron-Vue 隐藏顶部菜单 隐藏关闭按钮、自定义关闭 最大化 最小化按钮
electron-vue 中隐藏顶部菜单//隐藏顶部菜单mainWindow.setMenu(null);隐藏关闭 最大化 最小化按钮 mainWindow = new BrowserWindow({ height: 563, useContentSize: true, width: 1000, frame: false /*去掉顶部导航 去掉关闭按钮 最大化最小化按钮*/ })自定义关闭 最大化 最小化按钮自定义导航栏<templa原创 2020-08-03 17:16:17 · 12832 阅读 · 6 评论 -
第十三章：Electron-Vue UI框架 ElementUi的使用&& 使用sass
ElementUi的使用ElementUi的使用cnpm i element-ui -S引入以及配置在main.js中import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);使用 <el-button type="primary">主要按钮</el-button> <el-butto原创 2020-08-03 16:32:29 · 1721 阅读 · 0 评论 -
第十二章：Electron-Vue渲染进程和主进程通信、shell使用、使用node模块
渲染进程和主进程通信1、渲染进程 <div> <button @click="sendMsg">给主进程广播数据</button> </div>methods: { sendMsg() { this.$electron.ipcRenderer.send("tomain", "我是渲染进程"); }, }2、主进程import {ipcMain} from 'electron'//接收渲染.原创 2020-08-03 15:47:05 · 1842 阅读 · 1 评论 -
第十一章：Electron-Vue创建项目
首先需要安装vue-cli脚手架npm install -g vue-cli详细步骤请看：vue学习（五）—vue-cli构建vue项目目录结构全局安装Electronnpm install -g electron详细请看：第一章：Electron环境搭建Electron-Vue创建项目vue init simulatedgreg/electron-vue my-project安装依赖并运行你的程序cnpm install运行（npm run dev）.原创 2020-08-03 11:41:16 · 1585 阅读 · 0 评论 -
第十章：Electron 全局快捷键和剪切板
效果全局快捷键/* eslint-disable no-console *//* eslint-disable no-unused-vars */import { app, globalShortcut } from 'electron';/* **************************全局快捷键**************************** */app.on('ready', () => { // 注册全局快捷键 globalShortcu..原创 2020-08-02 19:05:55 · 1111 阅读 · 0 评论 -
第九章：Electron 消息通知和网络监听
效果消息通知import path from 'path';const option = { title: 'electron 通知', body: 'electron 学习内容,学习内容学习内容学习内容学习内容', icon: path.join('static/icon_shop_card.png'),};const myNotification = new window.Notification(option.title, option);网络变化win.原创 2020-08-02 17:52:03 · 2341 阅读 · 0 评论 -
第八章：Electron系统托盘使用
效果内容import { app, Tray, Menu, BrowserWindow } from 'electron';var path = require('path')var iconTray;const createTray = () => { iconTray = new Tray(path.join(path.join(__dirname, './static'), 'lover.jpg')) //邦定右键菜单 let trayMenu = Me.原创 2020-08-02 17:51:46 · 770 阅读 · 0 评论 -
第七章：Electron shell打开外部浏览器URL和webview使用
shell打开外部浏览器URL <div> <a id="adom" href="https://huangxiaoguo.blog.youkuaiyun.com/">晓果博客（默认在软件中打开）</a> </div> <script src="render/link.js"></script>import {shell} from 'electron'const aDom =document.querySel.原创 2020-08-02 17:51:30 · 2966 阅读 · 0 评论 -
第五章：Electron自定义软件顶部菜单、右键菜 单以及绑定快捷键
让vscode代码提示当前项目下cnpm install electron --save在主进程创建菜单/** * 创建菜单,主进程渲染（建议） */import { Menu } from 'electron';//定义菜单var template=[ { label:'文件', submenu:[ { label:'新建文件', //监听事件原创 2020-08-02 17:51:10 · 1984 阅读 · 0 评论 -
第六章：Electron 主进程与渲染进程之间的通信
渲染进程 和 主进程通信（异步）渲染进程发送并接受广播数据 ipcRender//渲染进程import { ipcRenderer } from 'electron';var sendDom = document.querySelector('#send');sendDom.onclick = function () { // alert('1235') //渲染进程给主进程广播数据 ipcRenderer.send('sendMessage', 'wo原创 2020-08-02 17:50:42 · 1644 阅读 · 1 评论 -
第四章：Electron创建新窗口
效果页面显示<body> <button id="btn_open_new">打开新的窗口</button> <script src="render/opennewwin.js"></script></body>js操作const btn =document.querySelector('#btn_open_new')//渲染进程没法直接调用主进程中的模块，但是我们可以通过 elec.原创 2020-08-02 17:50:18 · 4371 阅读 · 0 评论 -
第三章：主进程方法介绍
//主进程/** * 引入electron模块 * * * app : 创建electron引用 控制应用生命周期的模块 * * BrowserWindow : 创建electron BrowserWindow的引用 窗口相关的模块 */import { app, BrowserWindow } from 'electron';if (require('electron-squirrel-startup')) { app.quit();}.原创 2020-08-02 17:49:20 · 428 阅读 · 0 评论 -
第二章：Electron使用node读取文件&结合调用h5的拖放api 实现拖放打开文件功能
使用node.js读取文件在主进程中添加支持node的功能 mainWindow = new BrowserWindow( { width: 1280,//设置打开的窗口大小 height: 720,//设置打开的窗口大小 webPreferences: { nodeIntegration: true }//使用node功能 } )js调用var fs = require('f原创 2020-08-02 17:48:36 · 3127 阅读 · 0 评论 -
第一章：Electron环境搭建
安装 node、npm（cnpm）参考：vue学习（五）—vue-cli构建vue项目目录结构全局安装Electronnpm install -g electron检验是否安装成功npx electron -v创建项目github镜像：将原本的网站中的http://github.com 进行替换为github.com.cnpmjs.org ###### 克隆示例项目的仓库 git clone https://github.com/electron/elect..原创 2020-07-14 16:45:12 · 773 阅读 · 0 评论