Electron 桌面应用：环境搭建

简介

    Electron 是由Github开发，基于 Chromium 和 Node.js, 使用 JavaScript, HTML 和 CSS 等 Web 技术创建跨平台原生桌面应用的框架。兼容Mac,Window和Linux，它构建的应用可在这三个操作系统上面运行，借助 Electron，我们可以使用纯 JavaScript 来调用丰富的原生 APIs。

现在已经有很多由 Electron 开发应用，比如 Atom、Insomnia、Visual Studio Code 等。查看更多使用 Electron 构建的项目可以访问 Apps Built on Electron

安装

Electron的开发需要安装Node.js , npm , electron

     Node.js安装

         Node.js官网

        下载安装最新的版本即可。安装完成之后打开命令行工具，输入node -v,npm -v,可以看到如下显示，说明node安装成功。（npm是node的模块管理工具，由node附带安装）

   Electron安装

    electron文档


      electron教程

• npm切换到国内镜像： 

• 上面运行npm install安装项目的依赖资源的时候，出现了报错：”npm ERR！Windows_NT 6.1.7601” 
   
  报错原因是：npm原本的镜像资源索取代理地址默认是国外的 https://rubygems.org/，访问受限连接超时导致报错，有两种解决方法：

  • 方法一：翻墙（并非长久之计，但可以索取到最新的资源）；
  • 方法二：将代理设置为国内的地址，使用国内的npm镜像，通常使用阿里云提供的淘宝镜像：https://npm.taobao.org/或者腾讯的镜像：https://gems.ruby-china.org/，安装package时使用代理地址： 
    

    npm install -g package --registry=https://registry.npm.taobao.org

    • 1

  这里package是要安装的模块的名称，--registry用来指定镜像索取地址。

  为了不用每次安装都指定一个地址，这里我们直接安装淘宝定制的 cnpm 修改如下：

  //安装cnpm
  npm install -g cnpm --registry=https://registry.npm.taobao.org
  //使用cnpm安装package，例如electron
  cnpm install -g electron

  • 1
  • 2
  • 3
  • 4

• 通过cnpm安装electron 
  看到官方的引导，开始使用要用npm安装electron-prebuilt，但是安装的时候会提示electron-prebuilt已改名为electron，而且这里我们使用的是cnpm，所以使用以下方式：

  
  # Install the `electron` command globally
  
  cnpm install -g electron
  
  # Install as a development dependency
  
  cnpm install electron --save-dev

  • 1
  • 2
  • 3
  • 4