HTML一直是桌面軟件的重點，各種桌面軟件或者多或少都會嵌入一些HTML的代碼。而自從在了Nodejs後，使用HTML製作桌面就成爲了可能。
這要感謝node-webkit引入了對桌面的支持，然後electron推動了這個趨勢。
由於node-webkit的支持力度似乎不夠大，而electron已經有相應的比較成熟的產品Atom/VSCode，所以我傾向了electron.
今天我要介紹如何使用electron與bootsrap做一個桌面的應用。
安裝Electron
Electron的安裝是很方便的
npm install -g electron-prebuilt
你需要添加一個環境變量，執行命令變成是：
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ npm install -g electron-prebuilt
當你安裝完成後，輸入命令：
electron --help
得到
Electron 1.3.1 - Build cross platform desktop apps with JavaScript, HTML, and CSS
Usage: electron [options] [path]
A path to an Electron app may be specified. The path must be one of the following:
- index.js file.
- Folder containing a package.json file.
- Folder containing an index.js file.
- .html/.htm file.
- http://, https://, or file:// URL.
Options:
-h, --help Print this usage message.
-i, --interactive Open a REPL to the main process.
-r, --require Module to preload (option can be repeated)
-v, --version Print the version.
--abi Print the application binary interface.
這表示我們的electron已經安裝完成了。
初試牛刀：Hello Electron!
上面的提示告訴我們：
electron後面可以接.js也可以接.html
所以我們任意創建一個a.html頁面：
<!DOCTYPE html>
<html>
<body>
<h1>
Hello Electron!
</h1>
</body>
</html>
然後打入:
electron a.html
出現如下的圖片：
這是最簡單的辦法，但是控制力量不夠，也不方便加入初始化的代碼，所以我們通常會偏向於選擇使用.js文件作爲入進點。
官方做法
官方提供了做爲進入點的Demo:
# Clone the Quick Start repository
$ git clone https://github.com/electron/electron-quick-start
# Go into the repository
$ cd electron-quick-start
# Install the dependencies and run
$ npm install && npm start
這個時候就會出現一個窗口:
這樣我們就完成了一個最基本的electron框架。
這個框架的目錄結構是這樣的：
.
├── index.html
├── LICENSE.md
├── main.js
├── package.json
├── README.md
└── renderer.js
添加bootstrap
前面我們已經將electron的示例項目安裝完成，下面我們來安裝bootstrap.
bootstrap其實是前端的UI框架，但是electron已經將前後端模糊了。
所以在electron裏，前端與後端是可以共存的。
即nodejs後端與瀏覽器前端已經融合在一起了。
所有的js代碼即可以運行於瀏覽器，也同樣可以運行於nodejs。
安裝bootstrap
但是我們在這裏還是用到了前端的工具bower，執行
bower install bootstrap
下載bootstrap代碼。
如果沒有安裝bower的話，執行一下：
npm install -g bower
先安裝bower
執行成功後,就會多出來一個目錄bower_components,結構如下：
bower_components/
├── bootstrap/
└── jquery/
這時表示我們的bootstrap下載成功。
引入bootstrap
現在我們就將bootstrap引入到我們的項目中來。
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" crossorigin="anonymous">
注意href的路徑，就是bower安裝的包的目標目錄。
由於我們暫時不需要動態功能，所以可以不添加bootstrap的js文件。
添加新代碼
現在我們已經將bootstrap的CSS添加進來了，下面我們放上組件進行測試一下。
添加代碼如下。
<div class="text-center">
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
</div>
再運行
npm start
得到如下結果：
這裏我們看到了bootstrap的按鈕，
表示我們的桌面版的bootstrap已經調用成功了!!!
下面你就可以隨意的添加各個Bootstrap組件來編寫你的electron桌面應用了。
是不是很簡單呢？
趕緊試一下吧，也許下一個google就屬於你的了。
自己是從事了五年的前端工程師，不少人私下問我，2019年前端該怎麼學，方法有沒有？
沒錯，年初我花了一個多月的時間整理出來的學習資料，希望能幫助你快速學習前端，拿高薪offer！
如果你依然在編程的世界裏迷茫，不知道自己的未來規劃，可以加入web前端學習交流羣：731771211 裏面可以與大神一起交流並走出迷茫。新手可進羣免費領取學習資料，看看前輩們是如何在編程的世界裏傲然前行！羣裏不停更新最新的教程和學習方法（進羣送web前端系統學習路線，詳細的前端項目實戰教學視頻），有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小夥伴歡迎加入
點擊：加入