registry "https://registry.npm.taobao.org"
sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"
phantomjs_cdnurl "http://cnpmjs.org/downloads"
electron_mirror "https://npm.taobao.org/mirrors/electron/"
sqlite3_binary_host_mirror "https://foxgis.oss-cn-shanghai.aliyuncs.com/"
profiler_binary_host_mirror "https://npm.taobao.org/mirrors/node-inspector/"
chromedriver_cdnurl "https://cdn.npm.taobao.org/dist/chromedriver"

create-react-app pound-system

<!--安装依赖-->
yarn install<!--启动项目-->
yarn start

yarn add electron --dev

const { app, BrowserWindow } = require('electron');// window对象的全局引用
let mainWindow
function createWindow() {mainWindow = new BrowserWindow({ width: 800, height: 600 })// 开发环境// mainWindow.loadURL('http://localhost:3000/');// 生产环境 mainWindow.loadFile(`${__dirname}/index.html`);// 打开开发者工具，默认不打开// mainWindow.webContents.openDevTools()// 关闭window时触发下列事件.mainWindow.on('closed', function () {mainWindow = null})
}app.on('ready', createWindow);// 所有窗口关闭时退出应用.
app.on('window-all-closed', function () {if (process.platform !== 'darwin') {app.quit()}
})app.on('activate', function () {if (mainWindow === null) {createWindow()}
})

{"main": "public/electron.js","homepage": "./","scripts":{"electron-dev": "electron ."}
}

yarn electron-dev

yarn add react-router-dom

import React from 'react';
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom';
import './App.css';import Home from './pages/home';
import About from './pages/about';// 入口app
const App = () => {return (<Router><header className="header"><NavLink to="/">首页</NavLink><NavLink to="/about">关于我们</NavLink></header><div className="App"><Route exact path="/" component={Home} /><Route path="/about" component={About} /></div></Router>);
};export default App;

// home.js
import React from 'react';export default () => {return <div>Home</div>;
};// about.js
import React, { useEffect } from 'react';export default () => {useEffect(() => {}, []);return <div>about</div>;
};

yarn add sass-loader node-sass

import React from 'react';
import styles from './index.module.scss';
export default () => {return <div className={styles.main}>Home</div>;
};

.main{color:blue;
}

yarn add antd

import React from 'react';
import styles from './index.module.scss';
import { Button, message } from 'antd';export default () => {return (<div className={styles.main}>Home<Button onClick={() => message.warn('您点击了我们的提示信息')}>点击提示</Button></div>);
};

@import '~antd/dist/antd.css';

yarn add electron-builder --dev

{"scripts":{"dist-win32": "electron-builder --win --ia32","dist-win64": "electron-builder --win --x64","dist-mac": "electron-builder --mac"},"main":"build/electron.js","description": "项目描述","author": {"name": "katte","email": "417560450@qq.com","url": "https://github.com/katteXu"},"build": {"productName": "my-project","appId": "org.my-project.electron-react-antd","directories": {"output": "dist"},"files": ["build/**/*"],}
}

yarn build

<!--mac环境-->
yarn dist-mac<!--windows环境-->
yarn dist-win64