Electron - 用前端的技术开发桌面应用一

导读：准确来说，Electron并不算一个特别新的技术，奈何之前从未接触过。所以，当听说项目里面用到的时候，还是打算了解一下。

开头附上Electron社区网址，感兴趣的小伙伴们自行查看

https://www.electronjs.org/

Electron 是什么？

• Electron是有Github开发的开源框架
• 允许开发者使用Web技术构建桌面应用（官网的话说：使用Javascript, html和css构建跨平台的桌面应用程序）

常见的Electron开发的应用

• VSCode: 开发工具
• Atom: Github的文本编辑器

Electron 开发环境搭建

• 安装Node.js

  • 这个对于我们前端人员来说应该是很熟悉的了，这里直接给官网地址:

    https://nodejs.org/zh-cn/

    安装后，可以使用下面两个命令进行检测，如果出现版本，说明你安装成功。

    • node -v
    • npm -v

• 安装Electron

  • 在电脑盘符里面，新建一个文件夹。用VSCode打开，打开终端，输入安装命令:
    
    npm install electron --save-dev
    

    经过一段时间等待后，使用下面两个命令查看安装是否成功

    npx electron -v

    ./node_modules/.bin/electron -v

    如果成功会显示版本，如图

    

    还有一种方法，直接启动Electron
    
    ./node_modules/.bin/electron
    
    成功后会显示

    

Electron 第一个Hello world程序

每次学习新的技能都要从Hello world开始，Electron也不例外。

• 全局安装Electron

  npm install -g electron

  可以使用cnpm安装，全局安装后使用起来较为方便

• 新建index.js文件

  新建文件夹，如：demo, 在项目的根目录中新建一个index.js文件，然后编写Hello world， 如下：

  

• 新建main.js文件

  在根目录下新建一个main.js 文件，这个就是 Electron 的主进程文件。

  

• 创建package.json文件

  使用 npm init --yes 来初始化 package.json 文件

  

  如果main的值为main.js就说明正确了。你可以打开终端输入electron .就可以打开窗口了。

结语：完成 Hello world,说明最最基本的项目已经成功了，但是离我们的期望还有相当大的差距。本文是Electron系列第一篇，我们的学习之路还没有结束。Electron提供给我们很多应用：制作右键菜单、对话框操作、断网提醒、消息通知、剪切板等，都会在后期文章中陆续出现。