返回介绍

二、环境搭建

发布于 2024-09-07 18:20:40 字数 1645 浏览 0 评论 0 收藏 0

1. 安装 electron

npm install -g electron

2. 克隆一个仓库、快速启动一个项目

# 克隆示例项目的仓库
git clone https://github.com/electron/electron-quick-start

# 进入这个仓库
cd electron-quick-start

# 安装依赖并运行
npm install && npm start

3. 手动搭建一个 electron 项目

  1. 新建一个项目目录 例如: electrondemo01
  2. electrondemo01 目录下面新建三个文件: index.htmlmain.jspackage.json
  3. index.html 里面用 css 进行布局(以前怎么写现在还是怎么写)
  4. main.js 中写如下代码
var electron =require('electron'); //electron 对象的引用
const app=electron.app; //BrowserWindow 类的引用
const BrowserWindow=electron.BrowserWindow;

let mainWindow=null; //监听应用准备完成的事件 app.on('ready',function(){

//监听应用准备完成的事件
app.on('ready',function(){
  //创建窗口
  mainWindow=new BrowserWindow({width: 800, height: 600}); mainWindow.loadFile('index.html');
  
  mainWindow.on('closed', function () {
    mainWindow = null; })
  })
})

//监听所有窗口关闭的事件 
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(); 
  }
})
  1. 运行
electron . #注意:命令后面有个点

4. electron-forge 搭建一个 electron 项目

electron-forge 相当于 electron 的一个脚手架,可以让我们更方便的创建、运行、打包 electron 项目

npm install -g electron-forge 

electron-forge init my-new-app 

cd my-new-app

npm start

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文