Electron学习笔记（1）：VSCODE开发环境配置

Electron学习笔记（1）：VSCODE开发环境配置

目录

nodejs安装

下载地址：https://nodejs.org/zh-cn/download/

为了稳定性，建议下载node 10.17.0版本。访问https://nodejs.org/en/download/ 进入Previous Releases。 找到v10.17.0版本的，下载完成后， 执行安装程序，根据引导完成安装即可。

安装完成之后查询node和npm的版本，确认安装是否成功。

node -v
npm -v

如果上述命令均打印出一个版本号，就说明Node.js已经安装好了！

注册npm镜像

不建议直接将npm设置为淘宝镜像，而是注册cnpm指令。方便之后有选择性的使用npm或者cnpm

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

Electron安装

国外站点速度太慢，直接使用cnpm来安装electron。
cnpm install -g electron

新建配置Electron项目

在相应目录新建项目目录

mkdir eledemo

进入目录

cd eledemo

初始化项目，创建package.json

npm init -y

使用VSCode打开项目文件夹

code .

VSCode中无法使用cnpm需要使用PowerShell进行授权
执行set-ExecutionPolicy RemoteSigned命令，然后选A

添加electron依赖

cnpm install electron -S

修改package.json


{
  "name": "eledemo",
  "version": "1.0.0",
  "description": "This is an electron demo project.",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "electron": "^8.2.5"
  }
}

新建main.js文件

const electron = require('electron');
const {app, BrowserWindow} = require('electron');
const path = require('path');
const url = require('url');

let mainWindow;

function createWindow () {
    // Create the browser window.
    mainWindow = new BrowserWindow({
        width: 1024, 
        height: 640,
        transparent: false,
        frame: true,
        resizable : true //固定大小
    });

    const URL = url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
      })

    mainWindow.loadURL(URL);
    console.log(URL);
    mainWindow.openDevTools()

    mainWindow.on('closed', function () {
      mainWindow = null;
    });

}

app.on('ready', createWindow);

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

app.on('activate', function () {
  // On OS X 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 (mainWindow === null) {
    createWindow();
  }
});

新建index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    hello! This is an electron project.
</body>
</html>

运行项目

cnpm install
npm start

添加应用图标文件logo.png
修改main.js文件


function createWindow() {
    var ico = path.join(__dirname, 'img', 'logo-28.png');
    // Create the browser window.
    mainWindow = new BrowserWindow({
        width: 1024,
        height: 640,
        transparent: false,
        frame: true,
        icon: ico,
        resizable: true //固定大小
    });

使用VSCODE调试Electron项目

打开VSCODE的调试窗口，添加调试配置文件（nodejs）

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Electron Main",
            "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
            "program": "${workspaceFolder}/main.js",
            "protocol": "inspector" //添加默认的协议是legacy，这个协议导致不进入断点
        }
    ]
}

posted on 2020-05-09 15:42  宋海鹏  阅读(4885)  评论(0)  编辑  收藏  举报

导航