2. Electron + vue 打造自己的IM客户端（vue-cli-plugin-electron-builder）[开发准备]

前言

Electron使用的是HTML作为UI展现，但是在开发过程中你会发现，网页和桌面端程序还是有一定用户习惯区别的。例如图片的拖动，文字的选中等都是要注意的地方。只有处理好这些地方，你的程序才能更像桌面端程序，而不是看着像是个网页。
主进程(Main Process)和渲染进程(RendererProcess)的通信尤为重要，这是成为桌面端程序的必要功能。

1. 正式开发前注意事项

1.1 渲染进程UI展示

图片拖拽：大部分情况下在网页上图片是可以随意拖拽和右键下载的，但是桌面端程序一般没必要这样。那么可以这样做：在元素上加上 ondragstart="return false;" 来禁止拖拽。

  <!-- 禁止鼠标拖动图片 -->
  <div id="app" ondragstart="return false;">
    <router-view />
  </div>

文字图片选中问题：网页上文字图片内容等无意外情况，开发者都会让你随意选中。选中之后会留下蓝色底子来代表已经被你选中，但是在桌面端程序中有大部分文字或者是图片等内容是不想被选中的，因为会留下蓝色底很难看违和。那么这个时候可以在元素CSS中加入 -webkit-user-select: none; 来禁止选中

  .xxx-xxx {
    -webkit-user-select: none;
  }

窗口拖动：一般情况下我们都会取消Electron自带的窗口外边缘框架，来自定义自己喜欢的样式。自定义时需要窗口能被鼠标拖动，那么就可以在元素CSS中加入 -webkit-app-region: drag; 来允许此元素让窗口拖动。相反的，如果我们不想这个元素的内部某些按钮元素被拖动，则可以设置 -webkit-app-region: no-drag; 来取消拖动。

  .xxx-xxx {
    -webkit-app-region: drag; // 允许窗口拖动
  }
  
  .xxx-xxx {
    -webkit-app-region: no-drag; // 取消窗口拖动
  }

某些HTML标签focus之后出现边框问题：这个时候就需要用全局CSS语句来去除这些边框，或者下划线。

  input,
  select,
  option,
  textarea {
    outline: none; // 去除这些元素的focus边框
  }
  
  a {
    text-decoration: none; // 去除a标签的下划线
  }

其它前端问题只能再项目中说明了。

1.2 渲染进程和主进程通信

IPC模块：由于我不是用这个方式，这里我贴一个官方例子：

  // 在主进程中.
  const { ipcMain } = require('electron')
  ipcMain.on('asynchronous-message', (event, arg) => {
    console.log(arg) // prints "ping"
    event.reply('asynchronous-reply', 'pong')
  })

  ipcMain.on('synchronous-message', (event, arg) => {
    console.log(arg) // prints "ping"
    event.returnValue = 'pong'
  })

  //在渲染器进程 (网页) 中。
  const { ipcRenderer } = require('electron')
  console.log(ipcRenderer.sendSync('synchronous-message', 'ping')) // prints "pong"

  ipcRenderer.on('asynchronous-reply', (event, arg) => {
    console.log(arg) // prints "pong"
  })
  ipcRenderer.send('asynchronous-message', 'ping')

remote模块：在渲染进程中使用主进程模块，我个人是使用的这个方式（因为真的很方便），虽然官方为了安全考虑已经在electron新版本中默认关闭这个模块了，并推荐你使用IPC的方式。

注意：由于官方默认关闭，所以需要自己在新建窗口的时候打开。

vue-cli-plugin-electron-builder2.x这个插件生成的模板打开remote的方式是在项目根目录下的 vue.config.js 中加入这句话：

  module.exports = {
    pluginOptions: {
      electronBuilder: {
        nodeIntegration: true
      }
    }
  }

因为在 background.js 新建窗口时这个插件添加了属性：

	webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
    }

process.env.ELECTRON_NODE_INTEGRATION 是环境变量等同于你在 vue.config.js 中设置的 nodeIntegration。虽然设置了打开，但是控制台还是会警告此方法不安全等等，并说以后的新版本会怎样怎样。如果烦躁这个每次出现的提示可以再增加一个属性：

	webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: true,
      enableRemoteModule: true // 增加此属性去除控制台remote的使用警告
    }

1.3 代码格式

在项目根目录新建插件 Prettier - Code formatter 的配置文件 .prettierrc.json ：

  {
    "singleQuote": true,
    "semi": false,
    "printWidth": 140
  }

这样可以保持一致且舒适的代码格式。

2. Electron + vue 打造自己的IM客户端（vue-cli-plugin-electron-builder）[开发准备]

前言

1. 正式开发前注意事项

1.1 渲染进程UI展示

1.2 渲染进程和主进程通信

1.3 代码格式

1.4 总结