1. Electron簡介

      引自Electron官方的說明[1]：Electron是由Github開發(fā)，用HTML，CSS和JavaScript來構(gòu)建跨平臺桌面應(yīng)用程序的一個開源庫。 Electron通過將Chromium和Node.js合并到同一個運行時環(huán)境中，并將其打包為Mac，Windows和Linux系統(tǒng)下的應(yīng)用來實現(xiàn)這一目的。Electron于2013年作為構(gòu)建Github上可編程的文本編輯器Atom的框架而被開發(fā)出來。這兩個項目在2014春季開源。目前，Electron已被Microsoft、Facebook、Slack和 Docker等大廠接受，應(yīng)用涉及開發(fā)工具、社交應(yīng)用、音樂、游戲、金融等領(lǐng)域[2]。

2. 腳手架——electron-vue

      Electron文檔已比較完善，官方文檔請參考：https:///docs。為了提高開發(fā)效率，博客推薦electron-vue腳手架來開發(fā)electron應(yīng)用。

      electron-vue 是一個結(jié)合electron和Vue.js的項目[3]，非常方便建立起electron應(yīng)用程序模版。Vue.js是當前比較火的JavaScript MVVM庫, 它以數(shù)據(jù)驅(qū)動和組件化的思想構(gòu)建前端應(yīng)用，被越來越多的前端開發(fā)者接受。采用electron-vue腳手架之后，你可以使用 webpack、electron-packager 或 electron-builder，vue-router、vuex 等最常用的插件。

    electron-vue腳手架安裝：npm install -g vue-cli。

3. 使用教程

   1）創(chuàng)建項目

    vue init simulatedgreg/electron-vue   XXX

  然后， 一路按回車鍵。

2）代碼目錄結(jié)構(gòu)

    經(jīng)過步驟1）之后，自動生成了基本的代碼結(jié)構(gòu)，如下圖3.2所示。熟悉vue.js開發(fā)的小伙伴會發(fā)現(xiàn)這樣的代碼結(jié)構(gòu)非常眼熟，其中：

• src/main/index.js是程序入口文件，electron-vue已經(jīng)幫我們生成好代碼。如果需要修改程序加載、窗口屬性等設(shè)置，在這里修改。
• src/renderer/components：存放頁面布局文件，你開發(fā)頁面時在這個文件下創(chuàng)建頁面的index.vue、index.js、index.css文件。
• src/renderer/router/index.js：設(shè)置頁面轉(zhuǎn)跳路由。
• build：存放項目打包生成的安裝包。

3）編寫頁面布局及路由

      為了簡單說明electron的使用，博主編寫一個demo,  界面如下：

• 首先在components下面分別創(chuàng)建頁面的布局文件，如下圖所示。

• 設(shè)置頁面轉(zhuǎn)跳路由

     在src/renderer/router/index.js中設(shè)置頁面轉(zhuǎn)跳的路由。

4）編譯并運行項目

  執(zhí)行下面的指令，如果沒有報錯，會自動彈出程序界面，說明程序運行起來了。

cd electron-demo
yarn (或者npm install）
yarn run dev（或者npm run dev）

5）項目打包

執(zhí)行指令：npm run build，經(jīng)過幾分鐘的等待之后在項目根目錄下面的build文件夾中看到已經(jīng)生成了安裝包文件，如下圖所示。

 安裝electron-demo-1.0.0.dmg，安裝成功之后打開這個demo程序，彈出如圖3.3的界面。恭喜你，成功運行起來了。

Demo源碼地址：https://github.com/rzhaolin/Desktop-ElectronDemo。

參考文獻

1.Electron官方網(wǎng)頁：https:///docs/tutorial/about

2.Electron應(yīng)用：https:///apps

3.electron-vue ：https://github.com/SimulatedGREG/electron-vue