vscode+electron开发环境搭建

来源:csdn博客 分类: 文章浏览史 发布时间:2022-06-18 11:29:58 最后更新:2022-06-18 浏览:424
转载声明:
本文为摘录自“csdn博客”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2022-06-18 11:29:58

安装nodejs

https://nodejs.org/en/download/releases/

国外的连接速度慢或者连接不稳定,可以访问阿里镜像Node.js Mirror (taobao.org)

Node.js Mirror (taobao.org)

有历史版本,我选择的是node-v12.15.0-x64.msi,安装到c:\debug\nodejs目录

进入nodejs安装目录,>node -v及>npm -v若显示版本号则表示安装成功

之后的步骤具体参考https://blog.csdn.net/qq_40421671/article/details/113322614

用vscode打开一个文件夹,在vscode的terminal中输入>npm init -y,可会生成一个package.json文件

设置淘宝镜像

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

安装electron依赖包

cnpm install electron --save-dev

bug 1:

    若提示cnpm 不是内部命令,

solution:

    进入C:\Debug\nodejs\node_global中运行>cnpm -v,若成功,需要设置下PATH环境变量,增加C:\Debug\nodejs\node_global;即可。

bug 2:

    在cmd中正常,但在vscode的terminal中提示“无法加载文件cnpm.ps1,因为在此系统上禁止运行脚本"

solution:

    在powershell中执行Start-Process powershell -Verb runAs

会提示授权,并以管理员身份运行powershell

继续重新执行set-ExecutionPolicy RemoteSigned 选择 Y

继续尝试安装electron依赖包

>cnpm install electron --save-dev

完成后,查当前Electron版本  >npx electron -v 

或者>.\node_modules\.bin\electron -v

若显示版本号表明安装成功

>.\node_modules\.bin\electron

打开electron 查看帮助等

 ===vscode第一次运行electron项目=============

前提:已安装node.js、VSCode、electron依赖包
安装module依赖包
cnpm install update-electron-app
cnpm install app
cnpm install browser-window

-------在VSCode中配置electron调试---------------------------

在VSCode中配置electron调试参考以下链接: Electron开发桌面应用(2):VSCODE调试Electron项目_ruyulin的博客-CSDN博客_vscode调试electron

----Bug1:  报错:Cannot use import statement outside a module
在import { app, BrowserWindow, protocol, shell } from "electron"行
解决办法: 在package.json中加配置项: "type": "module",
 

=======main.js开头要这样写才行,才能解决 core.require is not a function 问题==========

// var app = require('app');  // 控制应用生命周期的模块。

// var BrowserWindow = require('browser-window');  // 创建原生浏览器窗口的模块

// var { app, BrowserWindow } = require('electron')

var electron = require('electron')

var app = electron.app

var BrowserWindow = electron.BrowserWindow

// 保持一个对于 window 对象的全局引用,不然,当 JavaScript 被 GC,

// window 会被自动地关闭

var mainWindow = null;

=====启用remote主进程和渲染进程之间调用

1. remote在electron12的时候废弃了remote模块,所以需要我们自己安装remote包。

 npm install @electron/remote --save

 2. 在主进程中进行初始化: 

require("@electron/remote/main").initialize();

 require("@electron/remote/main").enable(mainWindow.webContents);

3. 并在主进程webPreferences中设置enableRemoteModule和contextIsolation: 

webPreferences: {

    nodeIntegrationtrue,

    contextIsolationfalse,

    enableRemoteModuletrue// 使用remote模块

 },

php技术微信