1. Electron簡(jiǎn)介

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

2. 腳手架——electron-vue

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

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

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

3. 使用教程

   1）創(chuàng)建項(xiàng)目

    vue init simulatedgreg/electron-vue   XXX

  然后， 一路按回車(chē)鍵。

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

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

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

3）編寫(xiě)頁(yè)面布局及路由

      為了簡(jiǎn)單說(shuō)明electron的使用，博主編寫(xiě)一個(gè)demo,  界面如下：

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

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

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

4）編譯并運(yùn)行項(xiàng)目

  執(zhí)行下面的指令，如果沒(méi)有報(bào)錯(cuò)，會(huì)自動(dòng)彈出程序界面，說(shuō)明程序運(yùn)行起來(lái)了。

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

5）項(xiàng)目打包

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

 安裝electron-demo-1.0.0.dmg，安裝成功之后打開(kāi)這個(gè)demo程序，彈出如圖3.3的界面。恭喜你，成功運(yùn)行起來(lái)了。

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

參考文獻(xiàn)

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

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

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