美文网首页
electron学习笔记(一)—— 创建electron项目

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

作者: 程序媛的程 | 来源:发表于2021-09-07 20:01 被阅读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,这时应用将不会抛出任何错误。

    相关文章

      网友评论

          本文标题:electron学习笔记(一)—— 创建electron项目

          本文链接:https://www.haomeiwen.com/subject/fvupwltx.html