去年倒騰過一段時間的 electron ，但最終沒做出什麼東西來，最新剛好要幫一個做審計工作的朋友做一個桌面軟體，所以打算正兒八經地研究一下。我們都知道 electron 相當於一個瀏覽器的殼子，裡面的內容開發其實與 web 網頁開發並無明顯區別，只是通過此框架提供了可以直接作業系統的 native API ，大部分介面是普通瀏覽器做不到的。

electron 安裝

有資源問題，在國內使用 npm 直接安裝 electron 是比較麻煩的，有兩個解決方案：

• 通過修改 npm 映象獲取地址：

  $ npm install -g package --registry=https://registry.npm.taobao.org
   
  

  或直接使用 cnpm 工具。

• 翻牆（看個人習慣了，我現在是習慣了面向 google 程式設計）

UI 方案

由於 electron 的 UI 也是使用 HTML + CSS 實現的，所以 UI 開發與 Web 並無差異，可以選擇當前比較流行的前端框架，例如 Angular 、Vue 或 React 等。這裡選擇較為輕量級的 vue ，一方面是學習成本最低，其次也有比較成熟的整合到 electron 框架中的開源手腳架 ，再配合基於 vue 2.0 封裝好的元件庫 ，UI 開發工作顯然要簡單許多。

安裝 electron-vue 框架

• 先安裝 vue-cli 工具：

  $ npm install -g vue-cli
   
  

• 使用 vue-cli 和 electron-vue 建立工程：

  $ vue init simulatedgreg/electron-vue exceltools
  ​
  ? Application Name exceltools
  ? Project description An electron-vue project
  ? Select which Vue plugins to install axios, vue-electron, vue-router, vuex
  ? Use linting with ESLint? No
  ? Set up unit testing with Karma + Mocha? Yes
   
  
  ? Set up end-to-end testing with Spectron + Mocha? Yes
  ? What build tool would you like to use? builder
  ? author linshuhe1 <[email protected]>
  ​
     vue-cli · Generated "exceltools".
  ​
  ---
  ​
  All set. Welcome to your new electron-vue project!
  ​
  Make sure to check out the documentation for this boilerplate at
  https://simulatedgreg.gitbooks.io/electron-vue/content/.
  ​
  Next Steps:
  ​
    $ cd exceltools
    $ yarn (or `npm install`)
    $ yarn run dev (or `npm run dev`)

  注意：

  • 應用名不能帶大寫字母，否則會報錯："Sorry, name can no longer contain capital letters."

  • 不使用 eslint ，可避免書寫規範的檢查

• 安裝依賴：

  在工程建立完成後，進入工程並使用 yarn 或 npm 安裝依賴：

  $ cd exceltools
  $ npm install# 安裝依賴包
  $ npm run dev# 開發環境執行

  也可以使用 yarn 安裝依賴，假如還未安裝 yarn 可以使用 npm 全域性安裝：

  $ npm install -g yarn

  但我在 windows 下使用 yarn 安裝download-chromedriver.js 依賴會報錯，使用 npm 就正常。 mac 下恰好相反，使用 npm install 安裝會報錯，使用 yarn install 才正常。

• 執行 debug 模式：

  $ npm run dev

  直接使用開發環境執行專案，會有除錯面板等工具。執行成功可以看到彈窗：

  

• 打包釋出：

  $ npm run build

  ​

參考：