原文：
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> <button type="button" class="btn btn-primary">Primary</button> </div> 再运行：
npm start 得到如下结果：
这里我们看到了 bootstrap 的按钮， 表示我们的桌面版的 bootstrap 已经调用成功了!!!
下面你就可以随意的添加各个 Bootstrap 组件来编写你的 electron 桌面应用了。
是不是很简单呢？
赶紧试一下吧，也许下一个 google 就属于你的了。
欢迎微信公共号:frontend-guru 了解更多的信息，或者扫描二维码：
5
Select Language