Vue和React中快速使用Electron的简单教程

目录
  • 提示:
  • 前言
  • 一、前提
  • 二、在Vue和React中快速使用
    • 1. 安装Electron
    • 2. 运行成功后,打包成软件
  • 总结

提示:

本篇文章只是教你简单上手,Electron本身功能是非常强大的,这里边的结合,只是能让你简单实现一个桌面应用程序!如需要复杂的配置electron,建议去参考官网~

前言

对于我们来说Electron相当于一个壳子,可以把写好的网页程序嵌入到壳子里面,可以运行在桌面上的一个程序,可以把网页打包成一个在桌面应用程序,也类似我们平时做的套壳打包的5+app,简单来说就是软件,Electron非常出名的就是Vscode,想要深入了解可以查看官网的详细介绍。

提示:以下是本篇文章正文内容,下面案例可供参考

一、前提

Electron使用的前提是需要配备nodejs环境,所以请检查你的电脑是否安装了nodejs环境 可以在cmd或者powerShell使用node -v查看

二、在Vue和React中快速使用

提示:需在Vue和React打包成功的文件目录下!

完整配置的文件,我这边上传了gitee, 把文件复制粘贴进去直接npm i就可以!:地址 XLL/electron打包

1. 安装Electron

  • 在打包后的根目录下 npm init 否则下一步安装的Electron可能会安装到外层vue项目里
  • 在dist文件夹内创建 main.js 文件及 package.json 文件

以下为main.js内容,可复制粘贴进去,以下为最简单的electron配置,如想要复杂的配置,可以去参考一下官网配置

const {
  app,
  BrowserWindow,
  Menu
} = require('electron'); // 引入electron
let win;
let windowConfig = {
  minWidth: 1600, //最小宽度
  minHeight: 800, //最小高度
  show: false,
  resizable: false
  // frame: false,
  // fullscreen: false,
  // titleBarStyle: 'hiddenInset',
  // titleBarOverlay: true
}; //窗口配置程序运行窗口的大小
function createWindow() {
  win = new BrowserWindow(windowConfig); //创建一个窗口
  win.loadURL(`file://${__dirname}/index.html`); //在窗口内要展示的内容index.html 就是打包生成的index.html
  // win.webContents.openDevTools(); //开启调试工具
  // 隐藏菜单栏
  Menu.setApplicationMenu(null)
  // 默认最大化
  win.maximize()
  win.show()
  win.on('close', () => {
    //回收BrowserWindow对象
    win = null;
  });
  win.on('resize', () => {
    // 默认刷新

    // win.reload();
  })
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
app.on('activate', () => {
  if (win == null) {
    createWindow();
  }
});

// electron限制只能打开一个应用窗口,在有窗口的情况下唤起窗口。
const gotTheLock = app.requestSingleInstanceLock()
if (!gotTheLock) {
  app.quit()
} else {
  app.on('second-instance', (event) => {
    if (win) {
      if (win.isMinimized()) win.restore()
      win.focus()
    }
  })
  app.on('ready', () => {
    // createWindow()
    const {
      Menu
    } = require('electron')
    Menu.setApplicationMenu(null) // 隐藏菜单栏
  })
}

package.json中修改,可以把下边的直接复制粘贴进去,electron限定了版本号,下边的复制粘贴进去后,在dist根目录下cmd执行npm i下载,如果你的版本号和我这边的有出入,可能打包失败!

{
  "name": "xxx",
  "productName": "XXXXX",
  "author": "小叮当",
  "version": "1.0.0",
  "main": "main.js",
  "description": "项目描述",
  "scripts": {
    "pack": "npx electron-builder --dir",
    "dist": "npx electron-builder",
    "postinstall": "npx electron-builder install-app-deps",
    "start": "npx electron .",
    "package": "npx electron-packager . relay --platform=win32 --arch=x64 --icon=favicon.ico --out=./out --asar --app-version=1.0.0 --overwrite --ignore=node_modules"
  },
  "build": {
    "electronVersion": "1.8.4",
    "win": {
      "requestedExecutionLevel": "highestAvailable",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ]
    },
    "appId": "demo",
    "artifactName": "demo-${version}-${arch}.${ext}",
    "nsis": {
      "artifactName": "demo-${version}-${arch}.${ext}"
    },
    "extraResources": [
      {
        "from": "./static/",
        "to": "app-server",
        "filter": [
          "**/*"
        ]
      }
    ],
    "publish": [
      {
        "provider": "generic"
      }
    ]
  },
  "dependencies": {
    "core-js": "^2.4.1",
    "create-egg": "^2.0.1",
    "electron": "^16.2.6",
    "electron-builder": "^22.14.13",
    "electron-package": "^0.1.0",
    "electron-packager": "^12.1.0",
    "electron-updater": "^2.22.1"
  }
}
  • 执行命令: npm run start

执行成功,效果如下:(博主这里啥也没写,如果你写了的话,运行的界面应和你写的一致)

2. 运行成功后,打包成软件

执行命令: npm run package

注意:我这里啥也没写所以是空的,你打包之后要是空的就是有问题啦!

总结

到此这篇关于Vue和React中快速使用Electron的文章就介绍到这了,更多相关Vue React使用Electron内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 详解使用webpack+electron+reactJs开发windows桌面应用

    electron是一两年前挺火的一个框架 本质上是一个浏览器,但是集成了很多windows系统的功能,让前端开发也可以直接操作windows的窗体,做成一个实打实的桌面软件 (当然听说mac上也可以用electron,不过没试过) (没错我还在用windows,不是mac也不是linux,我是个lowB) 团队主要的技术栈是react,所以考虑用react开发,方便维护. PS.由于项目是大半年前做的,所以一些细节可能记忆有误请见谅 几个重点: 1.想要能调试必须使用webpack打包,不能用r

  • Electron + vue 打包桌面操作流程详解

    提前准备一个vue项目,也可以使用初始的vue项目 vue init webpack 安装到后边有的会出现报错,可以忽略,启动npm run dev 启动成功就可以 在vue项目下执行下载以下依赖,会用到 cnpm install electron --save-dev cnpm install electron-packager --save-dev //这个是打成exe文件的插件,之后要用,提前下载好 获取Electron的资源 git clone https://github.com/el

  • electron-vue开发环境内存泄漏问题汇总

    package.json "dependencies": { "vue": "^2.5.16" }, "devDependencies": { "ajv": "^6.5.0", "babel-core": "^6.26.3", "babel-loader": "^7.1.4", "babel-plu

  • Electron整合React使用搭建开发环境的步骤详解

    简介 用于构建用户界面的 JavaScript 库 步骤 首先创建React npx create-react-app doc 进入到doc项目 cd doc 安装electron npm install electron --save-dev 安装依赖 判断是否为生产环境 cnpm install electron-is-dev --save-dev 在项目根目录创建main.js const { app ,BrowserWindow } = require('electron') const

  • 使用Electron构建React+Webpack桌面应用的方法

    前言 Electron可以使用HTML.CSS.JavaScript构建跨平台桌面应用,可是在使用到React和Webpack时,会遇到一些配置问题,本文将针对React+Webpack下的Electron配置提供一个通用的解决方案. 环境配置 "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-plugin-transform-class-proper

  • electron + vue项目实现打印小票功能及实现代码

    一 需求: 公司项目需要通过electron调用系统打印机,实现打印小票的功能. 二.分析: electron打印大概有两种: 第一种:通过window的webcontent对象,使用此种方式需要单独开出一个打印的窗口,可以将该窗口隐藏,但是通信调用相对复杂. 第二种:使用页面的webview元素调用打印,可以将webview隐藏在调用的页面中,通信方式比较简单. 两个对象调用打印方法的使用方式都一样. 本文是通过第二种方法实现静默打印. 三.实现过程: 1.要实现打印功能,首先要知道我们的设备

  • Electron vue的使用教程图文详解

    下面详细给大家介绍Electron+vue的使用,具体内容如下所示: .现如今前端框架数不胜数,尤其是angular.vue吸引一大批前端开发者,在这个高新技术快速崛起的时代,自然少不了各种框架的结合使用.接下来是介绍electron+vue的结合使用. 2.Electron是什么?? 对于我来说Electron相当于一个浏览器的外壳,可以把网页程序嵌入到壳里面,可以运行在桌面上的一个程序,可以把网页打包成一个在桌面运行的程序,通俗来说就是软件,比如像QQ.优酷.网易音乐等等.功能的强大超出你的

  • Vue和React中快速使用Electron的简单教程

    目录 提示: 前言 一.前提 二.在Vue和React中快速使用 1. 安装Electron 2. 运行成功后,打包成软件 总结 提示: 本篇文章只是教你简单上手,Electron本身功能是非常强大的,这里边的结合,只是能让你简单实现一个桌面应用程序!如需要复杂的配置electron,建议去参考官网~ 前言 对于我们来说Electron相当于一个壳子,可以把写好的网页程序嵌入到壳子里面,可以运行在桌面上的一个程序,可以把网页打包成一个在桌面应用程序,也类似我们平时做的套壳打包的5+app,简单来

  • vue和react中props变化后如何修改state

    目录 vue和react中props变化后修改state 改进 react改变state必须知道的知识点 1.不能直接修改state 2.state的更新是异步的 3.state的更新是一个合并的过程 state与不可变对象 vue和react中props变化后修改state 如果只想在 state 更改时重新计算某些数据,比如搜索框案例. vue <template> <div> <input type="text" v-model="filt

  • vue和react中关于插槽详解

    目录 简述Slot 基本插槽 vue基本插槽 react基本插槽 具名插槽 vue具名插槽 react具名插槽的讨论 模仿具名插槽 属性插槽 插槽传参 vue插槽传参 react:render-props 简述Slot slot插槽是Vue对组件嵌套这种扩展机制的称谓,在react可以也这样称呼,但是并不很常见.不过叫slot确实很形象. 这样的形式就是slot插槽: vue <template> <container-comp> <content></conte

  • React中常见的TypeScript定义实战教程

    目录 一 引沿 二 什么是调和 三 什么是Filber 四 实现调和的过程 五 总结 一 引沿 Fiber 架构是React16中引入的新概念,目的就是解决大型 React 应用卡顿,React在遍历更新每一个节点的时候都不是用的真实DOM,都是采用虚拟DOM,所以可以理解成fiber就是React的虚拟DOM,更新Fiber的过程叫做调和,每一个fiber都可以作为一个执行单元来处理,所以每一个 fiber 可以根据自身的过期时间expirationTime,来判断是否还有空间时间执行更新,如

  • 在MySQL中使用mysqlbinlog flashback的简单教程

    简介: mysqlbinlog flashback功能是淘宝彭立勋(http://www.penglixun.com/)的一个很强劲的作品. 主要功能: 对rows格式的binlog可以进行逆向操作.delete反向生成insert, update生成反向的update,insert反向生成delete.让dba同学们也有机会简单的恢复数据.可恢复:insert, update,delete相关的操作. 演示一下使用过程: 生成带有flashback mysqlbinlog 工具: 项止主页:h

  • Eclipse中Python开发环境搭建简单教程

    一.背景介绍 Eclipse是一款基于Java的可扩展开发平台.其官方下载中包括J2EE方向版本.Java方向版本.C/C++方向版本.移动应用方向版本等诸多版本.除此之外,Eclipse还可以通过安装插件的方式进行诸如Python.Android.PHP等语言的开发. Eclipse+PyDev插件是最主流的Python开发环境了,本文将要介绍的就是使用Eclipse与PyDev插件. 二.Python安装 Python的安装共分为三个步骤:下载python.配置环境变量.测试安装成功. (1

  • MySQL中数据导入恢复的简单教程

    有两个简单的方法MySQL中的数据加载到MySQL数据库从先前备份的文件. LOAD DATA导入数据: MySQL提供了LOAD DATA语句,作为一个大容量数据加载.下面是一个例子声明中,读取一个文件dump.txt,,从当前目录加载到当前数据库中的表mytbl: mysql> LOAD DATA LOCAL INFILE 'dump.txt' INTO TABLE mytbl; 如果本地的关键字是不存在的,MySQL的外观使用绝对路径名寻找到完全指定位置的文件在服务器主机上的数据文件,从文

  • 如何去除富文本中的html标签及vue、react、微信小程序中的过滤器

    在获取富文本后,又只要显示部分内容,需要去除富文本标签,然后再截取其中一部分内容:然后就是过滤器,在微信小程序中使用还是挺多次的,在vue及react中也遇到过 1.富文本去除html标签 去除html标签及 空格 let richText = ' <p style="font-size: 25px;color: white">       sdaflsjf的丰富及饿哦塞尔</p><span>dsfjlie</span>'; /* 去除富

  • Vscode中快速创建自定义代码模板的方法

    Vscode中快速创建自定义代码模板 一招鲜,吃遍天,学会了这个在Vscode中快速创建自定义代码模板的教程,我相信创建其它代码模板的方法你也就通个七七八八了. 我就以Vue的创建为例,不过我这个Vue是在HTML中创建的. 初学Vue,我们一般都是在.html文件中引入vue包,然后编写自己的vue代码. 盲目的跟着网上那些教程创建Vue模板是行不通的. 因为我们创建的模板是在.html文件下,所以我们的模板也得是在html.json中来进行编写. 教程如下: 图文并用,理解更清晰到位! 在V

  • react中实现搜索结果中关键词高亮显示

    网上看到很多js实现的关键词高亮显示,方法都是一个道理,先获取要替换的文字区域,然后在用正则匹配到关键词,并进行替换. react中实现起来似乎更简单一些. 我这里的需求是通过搜索框搜索出新闻列表,在已经获取到新闻列表数据中使用filter函数,获取到每一个新闻的title,并定义关键词正则,返回替换后的样式,react不能直接解析带html标签的字符串,方法如下: render() { const newsList=this.state.newsList; if(this.props.type

随机推荐