Electron + React + Antd + Next 搭建桌面应用

Electron 是由 Github开发的开源框架， 它允许开发者使用Web技术构建跨平台的桌面应用；

要想使用Electron进行开发，需要搭建一些环境：

安装：Node.js

    下载地址：https://nodejs.org/zh-cn/download/ 
 
    安装后，可以使用下面两个命令进行检测
 
    npm -v
    
    node -v

Next.js 是一个轻量级的 React 服务端渲染应用框架。有了它我们可以简单轻松的实现React的服务端渲染，从而加快首屏打开速度，也可以作SEO（搜索引擎优化）;

创建项目：

    npx create-next-app electron-react

npx 是Node自带的npm模块，所以你只要安装了Node都是可以直接使用npx命令的；
但低版本的Node是不带这个命令的，所以你需要手动安装一下:

    npm install -g npx

安装 Electron：

    npm install --save electron

安装完成之后查看 package.json，是否安装成功；

安装成功之后，修改 package.json,

    增加： "main": "main.js"

在 package.json 同级目录下创建 main.js 文件,作为 Electron 主进程文件；

var electron = require('electron')

var app = electron.app

var BrowserWindow = electron.BrowserWindow

var minWindow = null
app.on('ready',()=>{
    minWindow = new BrowserWindow({
         width:1200,
         height:800,
    })

    minWindow.loadURL('http://localhost:3000/')

    minWindow.on('close',()=>{
        minWindow = null
    })
})

修改启动命令：

    "dev": "electron . | next dev"

不修改也可以，先启动 React 项目，在启动 Electron 也是可以的；不过小编认为修改一下比较方便的；

最后启动项目：

    yarn dev

安装： Ant Design

Next.js默认是不支持CSS文件的，它用的是style jsx，也就是说它是不支持直接用import进行引入css的

所以需要安装：

   yarn add @zeit/next-css

它的主要功能就是让Next.js可以加载CSS文件；

安装完成之后，建立一个next.config.js.这个就是Next.js的总配置文件，写入以下代码：

const withCss = require('@zeit/next-css')

if(typeof require !== 'undefined'){
    require.extensions['.css']=file=>{}
}

module.exports = withCss({})

安装 Antd：

    npm install --save  antd

安装完成之后，在 pages 文件夹下新建 hello.js，写入一下代码：

import { Button } from 'antd'
import 'antd/dist/antd.css'
const Hello = ()=>(
  <div className='div'>
     <Button>Hello Word ！！！</Button>
  </div>
)
export default Hello

删除 pages/index.js 默认代码，引入我们刚创建的 hello.js

最后重启项目：

    yarn dev

这时候 Ant Design已经起作用了，我们也完成了在Next.js中，使用Ant Design;

一个基于Web技术构的桌面应用也就构建完成了；