• 注册
  • Electron 关注:4 内容:9

    Electron 手动构建项目

  • 查看作者
  • 打赏作者
  • 拉黑名单
    • 说明,本篇总结是Windows下所做,如果您使用的是Mac,出现了什问题,或者卡在什么地方,欢迎留言提问,个人认为Mac开发会比Windows开发方便很多

      1 环境安装

      1.1 NodeJs 安装

      在这里我是用的是 Electron 6.0.1 版本,所以NodeJs版本也是选择最新的。用的是 12.6.0,关于最新版,直接去官网下载就好,不用去中文网,下载地址为
      https://nodejs.org/en/
      然后选择最新版本安装

      1.2 Git 安装

      git的安装也非常简单,网上都有相关教程,这里不再赘述,给出下载地址
      https://git-scm.com/

      1.3 Electron 安装

      打开 git 控制台,直接输入

      npm install electron -g

      即可,但是这一步需要翻墙,目测淘宝镜像也不行,所以需要大家自备梯子
      安装完毕后,在git控制台输入

      electron

      出现这个界面

      Electron 手动构建项目

      查看所安装的 Electron 版本号

      electron -v

      1.4 编辑器的选择

      vscode编辑器越来越受到前端热爱,当然 vscode不仅仅可以用来开发前端,通过插件安装,可以扩展各种语言,比如C/C++, java, golang等。功能非常强大。
      并且vscode是微软开源编辑器,本身就是用 Electron 来实现的,用来做 Electron 的开发,再好不过。
      下载地址

      https://code.visualstudio.com/

      环境安装完毕,下面进入开发阶段

      2 构建第一个Electron版本

      2.1 项目初始化

      打开git控制台输入

       mkdir electronDemo && cd electronDemo

      然后输入

      npm init

      一路无脑回车结束后我们用查看命令 ls 会得到一个名字叫做package.json的文件,这里先不用管, 利用 vscode 打开我们的项目,在里面新建一个 index.js 文件,并且添加以下内容

      const {app,BrowserWindow} = require('electron')let mainWindowfunction createWindow(){
          mainWindow = new BrowserWindow({width:1024,height:768})
          mainWindow.loadURL(`https:www.iquanku.com`)
      }
      app.on('ready',createWindow)

      然后在控制台用命令

      electron .

      就会把相关内容加载完成

      Electron 手动构建项目

      2.2 项目结构以及内容

      2.2.1 vscode项目

      Electron 手动构建项目

      2.2.2 文件内容

      json 内容

      {
      "name": "electron",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC"
      }

      请登录之后再进行评论

      登录
    • 帖子间隔 侧栏位置: