桌面应用的实现方式有很多,但谈到多操作系统平台兼容的话,就不得不提到electron。electron是前端开发的利好,做过web前端的同学只要稍微迁移下自己的项目,就能够将原本的web前端变成桌面应用。
因此,本文以react为例,以antd为UI库支持,讲解基于react的electron应用该如何搭建。
首先,electron-react-boilerplate项目,就帮助我们初始化了基于react的electron应用。electron-react-boilerplate内置了flow静态类型检查机制、基于webpack的electron应用打包支持以及with redux的前端架构。故在此基础上再引入其它的lib,也不会过于困难。本文采用的electron-react-boilerplate版本为0.17.1。
通过yarn add antd
,就可以安装上antd库。要在内置的例子里以antd为layout的话,首先需要在app
文件夹下新建app.global.less
文件,填充内容:@import '../node_modules/antd/dist/antd.less';
,然后我们可以再观察到,app/containers/Root.js
是redux store的抽象层,wrap了路由;路由所在的文件为app/Route.js
,是以<App>
标签为根的路由集合;<App>
主界面所在的文件为app/containers/App.js
,我们通过更改其中的内容,就可以变换主界面的样式了。我们就以antd的layout为例,写一个App主界面: