React+Electron快速创建并打包成桌面应用的实例代码

目录
  • 一、创建react项目
  • 二、安装Electron
  • 三、配置文件
  • 四、打包Electron桌面应用

一、创建react项目

首先使用creat-react-app脚手架来创建一个react项目

# 安装 create-react-app 命令,如果已将安装请忽略
npm install -g create-react-app
# 创建 react项目
create-react-app react-electron
# 启动项目( create-react-app 真的超级方便啊)
cd react-electron && npm start

npm start之后浏览器会自动打开网址 http://localhost:3000/ ，出现react项目的页面了

二、安装Electron

#在react-electron项目目录下
npm install -save electron

三、配置文件

1.在项目根目录新建main.js

const { app, BrowserWindow } = require("electron")
const path = require('path')
const url = require('url')

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 800,
    minWidth: 800,
    minHeight: 800
  })
  win.loadURL("http://localhost:3000/")
}

app.whenReady().then(() => {
  createWindow()
  app.on("active", () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit()
  }
})

2.配置package.json

添加如下两项配置：
{
	"main": "main.js", // 配置electron的启动文件
	"scripts": {
	    "electron-start": "electron ."
	  },
  }

3.启动electron

# 这里要打开两个窗口

# 启动react项目
npm start
# 启动electron
npm run electron-start

npm run electron-start之后会自动出现桌面应用

四、打包Electron桌面应用

1.安装 electron-packager

npm install electron-packager -D

2.** 配置homePage字段**
在package.json文件中添加如下配置

{
	"homepage": "."
}
{
	"script": {
		"package": "electron-packager ./build react-electron --platform=darwin --arch=x64 --electron-version 17.1.0 --overwrite"
	}
}
//mac系统 --platform=darwin
//Windows系统 --platform=win32

然后打包react代码，根目录会多出一个build文件夹

 npm run build

将main.js和package.json两个文件复制到build文件夹下，同时修改build文件夹下的main.js

// 加载应用----electron默认的打包入口
win.loadURL(url.format({
  pathname: path.join(__dirname, './index.html'), // 修改这里
  protocol: 'file:',
  slashes: true
}))

在根目录运行打包命令

npm run package

到此这篇关于React+Electron快速创建并打包成桌面应用的文章就介绍到这了,更多相关React Electron桌面应用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Electron打包React生成桌面应用方法详解

    目录 一.Electron简介 二.搭建准备 三.创建基本应用程序 四.打包项目 一.Electron简介 Electron是一个能让你使用JavaScript,HTML和CSS来创建桌面应用程序的框架.这些应用程序可以打包后在 macOS.Windows 和 Linux 上直接运行. 在目前浏览器和移动端盛行的互联网环境下,跨平台的桌面应用开发,也为前端提供了一个新分支方向. 二.搭建准备 1.检查git和node是否安装完成 git --versionnode -vnpm -v 2.搭建Re

  • React+Electron快速创建并打包成桌面应用的实例代码

    目录 一.创建react项目 二.安装Electron 三.配置文件 四.打包Electron桌面应用 一.创建react项目 首先使用creat-react-app脚手架来创建一个react项目 # 安装 create-react-app 命令,如果已将安装请忽略 npm install -g create-react-app # 创建 react项目 create-react-app react-electron # 启动项目( create-react-app 真的超级方便啊) cd re

  • vue项目打包成桌面快捷方式(electron)的方法

    vue项目打包成桌面快捷方式(electron)的方法

    网上有很多相关的例子了,所以我只是把自己的问题记录一下. 1.把electron的官方例子clone下来 git clone https://github.com/electron/electron-quick-start 2.进入项目,输入以下命令,运行项目 npm install//下载依赖包 npm start//启动 3.弹出界面 4.接下来将自己的vue项目打包,运行npm run build 5.将打包的项目复制到electron-quick-start的根目录 6.重新运行一下 n

  • 用node-webkit把web应用打包成桌面应用(windows环境)

    用node-webkit把web应用打包成桌面应用(windows环境)

    node-webkit是一个Chromium和node.js上的结合体,通过它我们可以把建立在chrome浏览器和node.js上的web应用打包成桌面应用,而且还可以跨平台的哦.很显然比起传统的桌面应用,在某些特定领域用html5+css3+js开发的web应用更加简单和高效,而且还可以使用node.js的功能,所以node-webkit还是很有用处的. 下面我通过一个简单的demo来介绍怎么样把一个web应用打包成一个可执行文件(这里只介绍windows环境) 首先新建一个index.htm

  • 使用electron将vue-cli项目打包成exe的方法

    如果你已经做好了一个vue的项目,并且想要将他打包成exe,那么请继续阅读. 首先你可以下载一个demo了解一下. git clone https://github.com/electron/electron-quick-start cd electron-quick-start npm install npm start 这个demo主要就是main.js和package.json 打开main.js const {app, BrowserWindow} = require('electron

  • Java编程一维数组转换成二维数组实例代码

    简介:由于经常在使用矩阵进行计算时,会首先将一维数组转为二维数组.因此,在这里记录一下,也希望对他人有帮助. 实例代码: package deal; public class ArryTest { public static void main(String[] args) { //创建一个一维数组 0,1,2,3...,10 double [] c= new double[10]; for (int i = 0; i < c.length; i++) { c[i]=i; } double[][

  • Android快速开发系列 10个常用工具类实例代码详解

    打开大家手上的项目,基本都会有一大批的辅助类,今天特此整理出10个基本每个项目中都会使用的工具类,用于快速开发~~在此感谢群里给我发项目中工具类的兄弟/姐妹~ 1.日志工具类L.java package com.zhy.utils; import android.util.Log; /** * Log统一管理类 * * * */ public class L { private L() { /* cannot be instantiated */ throw new UnsupportedOpe

  • C++中用new创建二维数组和指针数组实例代码

    使用new 创建二维数组方法 #include <iostream> using namespace std; void main() { //用new创建一个二维数组,有两种方法,是等价的 //一: int (*p)[10] = new int[5][10]; //二: int **p = new int* [5]; for(int i=0;i <5;i++) p[i] = new int[10]; //指针数组的创建,也有两种方法 //一: char **pa = new char*

  • React中使用async validator进行表单验证的实例代码

    react中进行表单验证毫无疑问是繁琐的,尤其对于动态添加或删除的表单,其验证逻辑更为复杂, 目前UI框架使用material ui ,但其表单处理不太理想,而后研究了一下另一个UI 框架 ant design, 其对表单的处理大大方便了逻辑的编写, 它使用async-validator处理验证逻辑 目前更换框架毫无疑问是不现实的,于是就想直接引入async-validator,下面描述一个简单的使用,具体信息可以去github上查看 validate.js import Schema from

  • AngularJS创建一个上传照片的指令实例代码

    angularJS在近几年发展火热,也无疑是目前市面上来说比较牛逼且成熟的框架,在单页面前端应用当中应该可以说是王者,双向绑定省去了大量的前端代码,控制器在其作用于方面的控制也是相当腻害,今天我们要说的是另外一个比较牛逼的功能,就是angularJS的指令directive,之前没听说过angularJS指令的朋友请自行度娘,随便搜一条文章都比我说的详细,这次用一个我自己写的图片上传的指令来做为案例,详细说明一下实际操作过程中的指令. 之前我们前端的附件上传用的是jqueryFileUpload

  • 如何用electron把vue项目打包为桌面应用exe文件

    如何用electron把vue项目打包为桌面应用exe文件

    目录 1.首先从electron官网克隆一个demo npm与cnpm的区别 2. 接下来,在已创建好的vue-cli项目中 3. 在新建的项目的package.json文件中增加一条指令 下面附上我的文件目录 如果按本文操作遇到一些问题报错,如C:\Users\milyyy\AppData\Roaming\npm-cache\_logs\2018-11-27T07_36_17_406Z-debug.log等等 解决办法可以参见我的另一篇文章:electron打包VUE项目中遇见的报错问题及解决

随机推荐