VSCODE开发Electron桌面程序环境配置

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进行授权（C:\WINDOWS\System32\WindowsPowerShell）

执行set-ExecutionPolicy RemoteSigned命令，然后选A

添加electron依赖

cnpm install electron -S

修改package.json

{

    "name": "my_eleectron",

    "version": "1.0.0",

    "description": "",

     "main": "index.js",

     "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },

     "keywords": [],  "author": "",  "license": "ISC"

}

新建main.js文件

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

const path = require('path')

const url = require('url')

function createWindow(){

    win =new BrowserWindow({

        width:800,height:600,transparent:true,frame:true,resizable:true

    });

    const URL = url.format({

        pathname:path.join(__dirname,'index.html'),

        protocol:'file:',

        slashes:true

    });

    win.loadURL(URL);

    win.openDevTools();

    // win.loadFile('index.html');

    win.on('closed',()=>{

        console.log('closed');

        win = null;

    });

}

app.on('ready',createWindow);

app.on('window-all-closed',()=>{

    console.log('window-all-closed');

    if(process.platform != 'darwin'){

        app.quit();

    }

});

新建index.html文件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>this is my electron</title>

</head>

<body>

    <p>这是第一个Electron桌面应用</p>

</body>

</html>

运行项目

cnpm install

npm start

添加应用图标文件logo.png

修改main.js文件

functioncreateWindow(){

    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，这个协议导致不进入断点

        }

    ]

}

最后编辑于：2020.09.14 15:55:33