Gitbook Auto Published

README.md

@@ -3,9 +3,9 @@
 你离技术经理，只差这本书： <http://leader.js.cool>
 
 ```
-info: found 67 pages
+info: found 70 pages
 info: found 61 asset files
-Completed counting with 28505 words.
+Completed counting with 30240 words.
 info: >> generation finished with success in 10.6s !
 ```
 

SUMMARY.md

@@ -69,6 +69,7 @@
     - [版本回退](experience/operation/rollback.md)
   - 进阶
     - [元编程构造简单优雅解决方案](experience/advanced/meta.md)
+    - [Electron桌面应用](experience/advanced/desktop-app.md)
 - [思想篇](mind/README.md)
   - 能力
     - [学习能力](mind/capability/study.md)

basic/framework/vue.md

@@ -22,21 +22,6 @@
 * Vue-Cli： <https://github.com/vuejs/vue-cli> （命令行工具）
 * 官方示例： <https://cn.vuejs.org/v2/examples/>
 
-## 示例项目
-
-Hosts.js： <https://github.com/js-cool/Hosts.js>
-
-技术栈包含：
-
-* Electron （仅 OS X 平台）
-* Webpack 2
-* Vue 2
-* Vuex
-* Vue-Router
-* Vue-Material （UI组件）
-* Babel
-* ESLint
-
 ## 进阶使用
 
 * 理解 Flux 模型： <http://www.infoq.com/cn/news/2014/05/facebook-mvc-flux/>

experience/advanced/desktop-app.md

@@ -0,0 +1,153 @@
+# Electron 桌面应用
+
+本章节以 Mac OS X下 Hosts 文件管理 App 为例。
+
+技术栈包含：
+
+* Electron （仅 OS X 平台）
+* Webpack 2
+* Vue 2
+* Vuex
+* Vue-Router
+* Vue-Material （UI组件）
+* Babel
+* ESLint
+* Yarn（包管理）
+
+## 初始化项目
+
+* 安装所需的各种 NPM 包。
+* 引入 ESLint、Babel 配置文件。
+
+## 配置 Vue2 + Webpack2
+
+需要注意`Webpack` 2.x.x 版本与 1.x.x 版本发生了不少改动。可以参考迁移文档： <https://webpack.js.org/guides/migrating/> 进行学习。
+
+### 坑1： extract-text-webpack-plugin
+
+该插件 NPM 最新版本为1.0.1，不支持 Webpack2，所以需要通过安装 RC3 版本来获得对应支持。
+
+```
+yarn add --dev extract-text-webpack-plugin@2.0.0-rc3
+或
+npm i --save-dev extract-text-webpack-plugin@2.0.0-rc3
+```
+
+### 坑2：babel-plugin-transform-runtime 与 extract-text-webpack-plugin 插件有冲突
+
+会导致 extract-text 插件报错崩溃。
+
+解决方法，修改 `.babelrc`：
+
+```json
+{
+  "presets": [
+    "latest"
+  ],
+  "plugins": [
+    [
+      "transform-runtime",
+      {
+        "helpers": false,
+        "polyfill": false,
+        "regenerator": true
+      }
+    ]
+  ],
+  "compact": true
+}
+```
+
+其中 设置`compact`属性还能阻止 500kb 限制的警告。
+
+### 坑3：postcss-loader 与 extract-text-webpack-plugin 插件有冲突
+
+目前无解，去掉了`postcss-loader`的使用。
+
+下一阶段尝试。
+
+### 坑4：在 Vue 中使用 Electron
+
+首先，需要在 webpack config 中设置：
+
+```yaml
+target: 'electron'
+```
+
+向 Electron 注册插件：
+
+```js
+import Vue from 'vue';
+import electron from 'electron';
+
+Vue.use({
+  install: (vue) => {
+    vue.prototype.$electron = electron;
+  }
+});
+```
+
+前端向 IPC 发送消息：
+
+```js
+this.$electron.ipcRenderer.send('resizePreferencesWindow', { width: 400, height: 300 });
+```
+
+## Electron 配置
+
+### 设置 App 开机自启
+
+使用插件：<https://github.com/Teamwork/node-auto-launch>
+
+```js
+import AutoLaunch from 'auto-launch';
+
+const hostsAutoLauncher = new AutoLaunch({
+  name: 'Hosts.js',
+  path: '/Applications/Hosts.js.app'
+});
+
+exports.isEnabled = async () => {
+  const result = await hostsAutoLauncher.isEnabled();
+  return result;
+};
+
+exports.enable = () => {
+  hostsAutoLauncher.enable();
+};
+
+exports.disable = () => {
+  hostsAutoLauncher.disable();
+};
+```
+
+### 添加 Electron Vue DevTools
+
+可以直接通过插件实现，地址：<https://github.com/MarshallOfSound/electron-devtools-installer>
+
+devtools.js:
+
+```js
+import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer';
+
+module.exports = installExtension(VUEJS_DEVTOOLS);
+```
+
+
+窗口加载：
+
+```js
+if (process.env.NODE_ENV === 'development') {
+  // 开发模式加载 devtools
+  const devtools = require('../lib/devtools');
+  devtools.then(() => { // 注意调用方式
+    this.preferencesWindow.loadURL('http://localhost:3000/build/app.html');
+  });
+} else {
+  this.preferencesWindow.loadURL(`file://${path.join(__dirname, '../../build/app.html')}`);
+}
+```
+
+
+
+Hosts.js项目源码： <https://github.com/js-cool/Hosts.js>