Electron笔记一：安装

最新推荐文章于 2024-06-27 21:14:08 发布

bestyellow

最新推荐文章于 2024-06-27 21:14:08 发布

阅读量1k

点赞数 1

分类专栏： electron 文章标签： node.js npm ffmpeg dll websocket

本文链接：https://blog.csdn.net/bestyellow/article/details/119144174

版权

electron 专栏收录该内容

7 篇文章 5 订阅

订阅专栏

本人初学Electron，把学习的过程记录了下来，以免以后忘记：
Electron笔记一：安装
Electron笔记二：http与websock的实现
Electron笔记三：调用外部程序（子进程管理）
Electron笔记四：Dll的调用
Electron笔记五：无需控件，HTML5直接播放rtsp（摄像头）
Electron笔记六：打包成可执行程序（.exe）

1.安装node.js

从node.js官网下载推荐下载LTS版本(当前为14.17.3), 默认安装即可.不清楚可按https://www.cnblogs.com/liuqiyun/p/8133904.html 安装配置即可。

2、安装Electron

在cmd命令行，输入node -v，查看node.js是否安装成功，安装 npm镜像，使用该命令进行安装

npm install -g electron-prebuilt

因网络原因，可能安装失败，可切换到国内淘宝镜像

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

cnpm install -g electron

-g 表全局安装，如果不想全局安装，请加--save-dev参数

cnpm install -g electron --save-dev 安装当前项目中

【npm安装模块】
npm install xxx //利用 npm 安装xxx模块到当前命令行所在目录
npm install -g xxx //利用npm安装全局模块xxx
【本地安装】时将模块写入package.json中：
npm install xxx //安装但不写入package.json
npm install xxx –-save //安装并写入package.json的”dependencies”中
npm install xxx -–save-dev //安装并写入package.json的”devDependencies”中
【npm 删除模块】
npm uninstall xxx //删除xxx模块
npm uninstall -g xxx //删除全局模块xxx

如果NPM install -save 和 -save-dev 傻傻分不清，请看https://www.limitcode.com/detail/59a15b1a69e95702e0780249.html

查看版本

3.安装编译环境

在cmd中, 执行指令:

npm install -g windows-build-tools
这个步骤将安装python2.7和msbuild等内容.

4.设置环境变量

在cmd中, 执行指令:第一句指令, 指定了使用python2.7作为编译环境(在上一步中已经安装), electron并不支持python3.x.

npm config set python python2.7
npm config set msvs_version 2017 或 npm config set msvs_version 2019
第二句指令, 指定了使用项目使用的msvs版本.

这些设置后保存在文件C:\Users\Administrator\.npmrc中

如果你的电脑中安装了VS, 需要把VS的MSBuild.exe添加到环境变量中, 具体步骤为:
右键我的电脑->属性->高级系统设置->环境变量->系统变量->编辑->新建->添加vs的MSBuild.exe目录:
"你的vs安装目录"\Microsoft Visual Studio\2017\Community\MSBuild\15.0\Bin

5.新建项目

快速模板：在官网下载程序demo，https://github.com/electron/electron-quick-start
在cmd下进入该项目路径，输入
npm install
npm start
即可运行该项目

如果重头配置可以这样
执行指令:
npm init -y
这一步我们使用npm初始化了项目, 并自动在项目根目录建立了一个package.json文件, 这里我们暂时不管这个文件, 稍后再对它进行配置.

还有一种方法快速建项目安装electron-forge，这是一个脚手架工具，类似于Vue-cli。
然后我们初始化一个项目，项目名称为my-new-project

npm install -g electron-forge
electron-forge init my-new-project
cd my-new-project
electron-forge start

a.修改package.json
内容如下:

{
  "name": "blogs",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "chcp 65001 && electron main.js"    
  },
  "keywords": [],
  "author": "jyb",
  "license": "ISC",
  "devDependencies": {
  "electron": "^13.1.7"
  }
}

为防止日志中文输出乱码，加上chcp 65001

b.添加main.js

// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
const path = require('path')

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // and load the index.html of the app.
  mainWindow.loadFile('index.html')

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  createWindow()
  
  app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

c.添加index.html
在上一步的main.js中, 我们指定加载了一个html文件, 这个html文件, 就是程序的主页面.
在项目根目录下, 新建一个html目录,用于存放与前端有关的内容, 在html目录下, 创建index.html文件.
添加如下内容:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

npm start 运行即可看到效果

bestyellow

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Electron笔记一：安装

1.安装node.js从node.js官网下载推荐下载LTS版本(当前为14.17.3), 默认安装即可.不清楚可按https://www.cnblogs.com/liuqiyun/p/8133904.html 安装配置即可。2、安装Electron在cmd命令行，输入node -v，查看node.js是否安装成功，安装 npm镜像，使用该命令进行安装npm install -g electron-prebuilt因网络原因，可能安装失败，可切换到国内淘宝镜像...
复制链接

扫一扫

专栏目录