请使用2.0版本

1. 选择开发模式

打开配置文件：electron-egg/electron/config.js，可修改如下配置：

  1.   developmentMode: {
  2.     default: 'vue', // 默认前后端分离，使用vue
  3.     mode: {
  4.         // 前后端分离，使用vue开发，端口与vue启动的serve一致
  5.       vue: {
  6.         hostname: 'localhost',
  7.         port: 8080
  8.       },
  9.       // 前后端分离，使用react开发，端口与react启动的serve一致
  10.       react: {
  11.         hostname: 'localhost',
  12.         port: 3000
  13.       },
  14.       // ejs模板渲染
  15.       ejs: {
  16.         hostname: 'localhost',
  17.         port: 7068 // The same as the egg port
  18.       }
  19.     }
  20.   },

2. 启动

(1) vue模式【默认】

  1. # 1：【进入前端目录】，启动vue
  2. cd electron-egg/frontend
  3. npm run serve
  5. # 2：【根目录】，启动electron服务
  6. npm run dev

(2) react模式，同vue

  1. 1：frontend目录为前端目录，理论上可使用任何前端技术

(3) ejs模式，模板渲染

  1. # 直接启动桌面应用即可
  2. # 根目录
  3. npm run dev

3. 编写一个api，供前端使用

  1. 创建路由

在electron-egg/app/router/index.js文件中，添加：

  1. router.get('/hello', controller.v1.home.hello);

  1. 在控制器层中（electron-egg/app/controller/v1/home.js），编写方法

    1. async hello() {
    2.  const { ctx, service } = this;
    4.  const data = {
    5.    title: 'hello'
    6.  };
    8. this.sendSuccess(data);
    9. }

  2. 访问api

    1. http://localhost:7068/hello

4. 如果是ejs模板渲染方式，编写一个hello页面

  1. 创建路由

    在electron-egg/app/router/index.js文件中，添加：

    1. router.get('/helloPage', controller.v1.home.helloPage);

  2. 创建electron-egg/app/view/hello.ejs视图文件

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.  <title><%= title %></title>
    5.  <link rel='stylesheet' href='/stylesheets/style.css' />
    6. </head>
    7. <body>
    8.  <h1><%= title %></h1>
    9.  <p>Welcome to electron-egg</p>
    10. </body>
    11. </html>

  3. 添加方法

在electron-egg/app/controller/v1/home.js文件中，添加方法：

  1.   async helloPage() {
  2.     const { ctx } = this;
  4.     const data = {
  5.       title: 'hello'
  6.     };
  8.     await ctx.render('hello.ejs', data);
  9.   }

注：egg详细功能，请参照egg框架文档学习即可

5. 打包成exe、dmg、deb可执行文件

见目录