![](https://img-blog.csdnimg.cn/20210114185553861.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Electron
Electron 是由 Github开发的开源框架,方便开发者使用Web技术构建跨平台的桌面应用
朝阳39
钟爱编程,偏前端开发,欢迎私信我加入EC尽享编程俱乐部共同学习,交流成长!
展开
-
Electron 手动创建项目
新建项目文件夹,如 my-electron-app在项目文件夹中,安装Electron相关依赖包npm init -y npm i --save-dev electron会自动生成文件 package.json,将其内容修改为:{ "name": "my-electron-app", "version": "0.1.0", "author": "your name", "description": "My Electron app", "main".原创 2021-06-20 02:49:37 · 238 阅读 · 0 评论 -
electron-vue 常用配置
详见代码中的注释src\main\index.jsimport { app, BrowserWindow } from 'electron'if (process.env.NODE_ENV !== 'development') { global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')}// 开发模式的话走webpack-dev-server的urlconst winUR原创 2021-01-19 10:18:20 · 821 阅读 · 0 评论 -
electron-vue 窗体禁止拖拽
目录1. 新建文件disDrag.js2. 在app.vue中,通过mixins导入1. 新建文件disDrag.jssrc\renderer\utils\disDrag.js// 全局监听drag和drop事件,当用户拖入一个文件但是又不是拖入可拖拽区域的时候,将其屏蔽掉// 避免electron应用像浏览器那样,拖入pdf或图片会自动打开// 将此js通过mixin引入APP.vue中// import disDrag from './utils/disDrag....原创 2021-01-19 10:04:13 · 1739 阅读 · 0 评论 -
electron-vue 自定义菜单
目录1. 加载自定义菜单2. 定义路由1. 加载自定义菜单src\main\index.js在functioncreateWindow 之后,app.on('ready' 之前,添加下方代码:const menuTemplate = [{ label: '主页', click() { // 页面跳转方式一(推荐) mainWindow.webContents.send('href', '/index'); // 页面跳转方式二 /..原创 2021-01-18 13:54:24 · 1932 阅读 · 0 评论 -
Electron 集成 Vue —— electron-vue
目录1. 全局安装vue的脚手架2. 下载electron-vue的项目模板3. 指定依赖下载源4. 下载项目依赖5. 修改配置文件6. 启动项目1. 全局安装vue的脚手架命令行中运行(若没有安装yarn,请自行安装yarn)yarn global add @vue/cli-init2. 下载electron-vue的项目模板electron-vue-start为项目名,可自定义为任意名称vue init simulatedgreg/ele.原创 2021-01-14 18:51:37 · 4209 阅读 · 0 评论