electron学习笔记(一)—— 创建electron项目

2021-09-07  本文已影响0人  程序媛的程

1、在使用Electron进行开发之前,您需要安装 Node.js,有条件的,最好yarn也一起安装

2、创建一个文件夹并初始化 npm 包。

(1)cd到新项目所在路径, 执行mkdir my-electron-app && cd my-electron-app,该路径下就会出现一个名为“my-electron-app”的文件夹。

(2)执行npm init,按照提示填写项目的基本信息,(其中entry point 应为 main.js,author 与 description 可为任意值,但对于应用打包是必填项),最后一个回车后,my-electron-app文件夹里面出现一个名为package.json的文件。

3、执行 npm install,将 electron 包安装到应用的开发依赖中。

4、在的package.json配置文件中的scripts字段下增加一条start命令。

{

  "scripts": {

    "start": "electron ."  }

}

之后,执行npm start,正常情况下是可以打开应用的。

5、很多人按照官网的步骤执行npm start以后,都会报一个错误(Error: Electron failed to install correctly, please delete node_modules/electron and try installing again),这是因为众所周知的原因,导致electron下载安装失败,所以需要切换淘宝镜像。

(1)终端 vim ~/.nrmrc(或者直接用户目录下打开.npmrc文件)

(2)配置如下键值对

registry=https://registry.npm.taobao.org

sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

electron_mirror=https://npm.taobao.org/mirrors/electron/

(3)source~/.bashrc(或者直接保存关闭.bashrc文件)

6、删除掉项目中node_modules/electron文件夹,配置完镜像以后,执行yarn add electron,这时,electron安装成功。

7、执行 npm start,会有一个类似如下的error弹窗,这是因为我们还没有创建main.js文件,也就是应用程序的入口,Electron 会根据package.json中的main字段来查找此文件。

error

8、在项目的根目录下创建一个名为main.js的空文件,再执行npm start,这时应用将不会抛出任何错误。

上一篇下一篇

猜你喜欢

热点阅读