相信看到這篇文章的人，都是對Electron感興趣的， 網上關於Electron的教程其實已經不少了，但是大多都是一些功能點的實現，對於從零開始搭建一個適合自己的項目，估計還是有不少人有點懵逼的。剛好自己也學習Electron一段時間了，想著整理一下自己學習期間的一些筆記和踩坑的地方，從零開始編寫一個小項目。一個由淺入深（或者說從入門到放棄）的套路，一步步帶你敲代碼實現一個小項目，希望能給大家帶來一點點啟發。
2 項目搭建網上有個比較火的腳手架electron-vue，github 上 12.2k 的 star，大家應該都聽說過或者使用過，但現在我們不使用它，electron-vue是vue-cli2.0的版本，現在都已經出道 4.0 了，再者electron-vue已經很久沒有更新，我們可以使用 vue 最新的腳手架加上插件vue-cli-plugin-electron-builder來搭建項目，項目結構也更加清晰明了。好了不廢話了，開擼吧……
2.1 用vue-cli創建一個項目打開命令行工具，安裝 node，安裝 yarn，安裝vue-cli腳手架，我這裡使用的版本是：
MacBook-Pro:~ Bill$ node -v
v12.16.1
MacBook-Pro:~ Bill$ yarn -v
1.22.4
MacBook-Pro:~ Bill$ vue -V
@vue/cli 4.3.1
MacBook-Pro:~ Bill$vue-cli創建初始化項目：
vue create vue-electron-notes我們選擇自定義創建：
Vue CLI v4.3.1
? Please pick a preset:
default (babel, eslint)
❯ Manually select features我們選擇自定義創建，使用babel(語法編譯器)、Router(路由)、CSS Pre-processors(css預處理器)、Linter / Formatter(代碼風格、格式校驗)：
Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project:
◉ Babel
◯ TypeScript
◯ Progressive Web App (PWA) Support
◉ Router
◉ Vuex
◉ CSS Pre-processors
❯◉ Linter / Formatter
◯ Unit Testing
◯ E2E Testingrouter我們使用history模式，輸入y，進入下一步：
Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) ycss預處理器我這裡選擇Less，大家也可以選擇自己喜歡的Sass、Stylus：
Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
❯ Less
Stylus選擇ESLint代碼檢查工具，我這裡選擇的是「ESLint + Airbnb config」，強烈建議大家一定要在項目內使用ESLint，一直用一直爽，懂的自然懂……該有的規範還是要遵循的：
Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config:
ESLint with error prevention only
❯ ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier選擇什麼時候執行ESLint檢查，我這裡兩個都選了，保存時檢查「Lint on save」，向倉庫提交代碼時也檢查「Lint and fix on commit」，不符合規範的代碼我們不允許提交到倉庫：
Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Airbnb
? Pick additional lint features:
◉ Lint on save
❯◉ Lint and fix on commit這裡是詢問 babel, postcss, eslint這些配置是單獨的配置文件還是放在package.json 文件中，這裡我們選擇「In dedicated config files」單獨放置：
Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Airbnb
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
In package.json這裡是最後的操作，是否保存該配置，如果你下次需要使用相同的配置，那麼可以選擇 yes，我這選擇 no：
Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Airbnb
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) no執行完以上操作，剩下的我們等待項目下載依賴包，vue項目初始化就算搞定了哈。
cd vue-electron-notes進入項目跑一遍yarn serve，這個時候沒什麼問題就已經成功運行起來了！
2.2 在項目內集成Electron進入我們項目的根目錄，我們執行以下命令來安裝插件vue-cli-plugin-electron-builder
vue add vue-cli-plugin-electron-builder我們選擇版本^6.0.0：
✔ Successfully installed plugin: vue-cli-plugin-electron-builder
? Choose Electron Version (Use arrow keys)
^4.0.0
^5.0.0
❯ ^6.0.0這裡靜靜等待安裝即可，它會下載electron的依賴文件 60M 左右，過程可能有點長，跟你的網絡息息相關……
在這等待安裝的過程中，其實我們還可以再嘮嗑嘮嗑另一種頁面可視化安裝vue-cli-plugin-electron-builder的方式，執行以下命令
vue ui這個時候會自動打開瀏覽器頁面，然後選擇左側插件菜單，搜索安裝插件即可：
我個人更偏向於使用命令安裝，更加簡單方便快捷，當然不管使用上面哪種安裝方法，其結果是一致的。等安裝完畢後會重新構建項目架構，在src目錄下生成background.js文件，並且還新增了啟動命令，如下圖：
到這裡其實還有一個小問題，插件安裝的Electron是 6.0 版本的，但官方最新的版本其實已經到了8.2.5了，為了後續我們可以使用最新的api，我們需要執行命令更新一下版本：
yarn add electron@8.2.5 -D到這一步，我們所有的安裝都已經完成了，可以運行程序看效果了，要注意我們現在啟動項目的命令已經變成這個了：
yarn electron:serve這個時候就已經會自動彈出一個程序了，終於大功告成了……
那個，再稍等一下唄，我們去看看剛才執行命令行的地方，是不是有這個警告⚠️呀：
DONE Compiled successfully in 1339ms 1:52:39 PM
File Size Gzipped
dist_electron/index.js 651.77 KiB 148.32 KiB
Images and other types of assets omitted.
INFO Launching Electron...
(electron) The default value of app.allowRendererProcessReuse is deprecated, it is currently "false". It will change to be "true" in Electron 9. For more information please check [https://github.com/electron/electron/issues/18397](https://github.com/electron/electron/issues/18397)有道翻譯的結果是：allowrendererprocessreuse的默認值是不贊成的，它當前是「false」。在electron9中，它會變成「true」。（好吧我是個英語渣渣……）
為了解決以上告警，我們需要在主進程文件background.js中添加以下代碼：
app.allowRendererProcessReuse = true今天的項目搭建就先到這裡，如果你覺得也還可以，那麼我們每周四晚不見不散！😉