梦想吧

125 分类: WEB前端

Electron+React搭建桌面APP应用

前提

本文默认电脑已经安装配置好了nodejs,并且了解并会使用nodejs相关命令。基础的就行。

1. 安装React

第一步当然是安装我最爱的React了。

1.1 全局安装React

npm install -g create-react-app

QQ截图20191109105635.png

1.2 安装Yarn

接下来安装React官方推荐的包管理工具Yarn。用过React的应该熟悉,可以用于替代npm。就不截图了

npm install -g yarn

1.3 创建React项目

QQ截图20191109111052.png

2. 添加Electron

接下来就是重要部分了,往React项目里加上Electron

2.1 安装Electrion

在根目录下运行npm install --save-dev electron安装Electron

2.2 修改配置文件

在根目录下package.json中添加配置

  "estart": "electron ."
  "main": "main.js",

具体所有配置如下,参考加入

{
  "name": "bityears-test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "react-scripts": "3.2.0",
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "estart": "electron ."
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "main": "main.js"
}

2.3 运行

# 打包React
yarn build
# 运行Electron
yarn estart

内容未写完,待更

#JS, JavaScript, React, Electron

作者: Jim

版权: 除特别声明,均采用BY-NC-SA 4.0许可协议,转载请表明出处

目录Content

评论