react+electron+AntD编辑桌面应用

最新推荐文章于 2025-07-14 16:13:50 发布

原创

最新推荐文章于 2025-07-14 16:13:50 发布 · 1.1w 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#react+electron+antd

一、开发的首要任务，安装node环境https://nodejs.org/zh-cn/，需要自行下载

二、要下载react，有一个快捷的方法，创建react应用，使用脚手架，下载（可选择是否全局安装）：

npm install --global create-react-app

成功运行后会显示：
脚手架下载成功
三、创建react项目：

create-react-app demo

新建项目
新建完后，按着步骤执行：
执行命令
先cd demo，然后 yarn start
如果你没有yarn，可以下载下，很好用的包管理工具：

npm install -g yarn

下载完在执行yarn start,如果不想下载，可以直接npm start,也可以出来下方的这个页面
执行结果
四、.安装electron,
在刚创建好的react项目文件夹中（demo文件夹），打开命令行：

npm install electron --save

electron下载
electron成功安装
electron有两种进程，一个是主进程，一个渲染进程，所以必不可少的是main.js文件，
所以要在当前目录下，新建一个main.js:
注意：在main.js中的地址写的是localhost：3000，原因详见https://blog.youkuaiyun.com/zoepriselife316/article/details/88031218

const { app, BrowserWindow } = require('electron')
let win
function createWindow() {
    // 创建浏览器窗口。
    win = new BrowserWindow({ width: 800, height: 600 })

    // 然后加载应用的 index.html。  url 及本地文件形式
    win.loadURL('http://localhost:3000')
    // win.loadFile('public/index.html')
    //如果想要让electron加载本地打包好的React文件的build文件下的内容是这样子的：(这个问题困扰我很久，解决了。分享下2019-4-29添加)
    // win.loadURL(`f