electron基础环境的搭建及项目的创建

最新推荐文章于 2024-04-23 13:55:08 发布

yw00yw

最新推荐文章于 2024-04-23 13:55:08 发布

阅读量385

点赞数 1

分类专栏： electron 文章标签： electron 跨平台 node 桌面端

本文链接：https://blog.csdn.net/yw00yw/article/details/106090233

版权

electron 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

环境

安装node

全局安装electron

npm install -g electron

克隆远程仓库

克隆这仓库

git clone https://github.com/electron/electron-quick-start

进入仓库

cd electron-quick-start

安装依赖库

npm install

运行应用

npm start

手动创建

新建文件夹

mkdir electron-demo

安装依赖

npm install electron --save-dev

新建文件

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>hello world</h2>
</body>
</html>

main.js

var electron = require('electron')  //引入electron模块

var app = electron.app   // 创建electron引用

var BrowserWindow = electron.BrowserWindow;  //创建窗口引用

var mainWindow = null ;  //声明要打开的主窗口

// 监听应用准备完成的事件
app.on('ready', () => {
    mainWindow = new BrowserWindow({width:400, height:400})   //设置打开的窗口大小

    mainWindow.loadFile('index.html')  //加载那个页面

    //监听关闭事件，把主窗口设置为null
    mainWindow.on('closed', () => {
        mainWindow = null
    })

})

//监听所有窗口关闭的事件 
app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') {
        app.quit(); 
    }
})

初始化package.json文件

npm init --yes

运行

electron .

electron-forge 脚手架搭建

安装electron-forge

npm install -g electron-forge

初始化项目

electron-forge init my-new-app

此处到最后会一直在下载中，可以使用ctrl+c终止掉，然后进入目录，使用cnpm或者yarn安装

进入目录

cd my-new-app

启动

electron .

参考地址

https://www.jianshu.com/p/2244653515a7

yw00yw

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
electron基础环境的搭建及项目的创建

克隆远程仓库克隆这仓库git clone https://github.com/electron/electron-quick-start进入仓库cd electron-quick-start安装依赖库npm install运行应用npm start手动创建新建文件夹mkdir electron-demo安装依赖npm install electron --save-dev新建文件index.html<!DOCTYPE html><html la
复制链接

扫一扫

专栏目录