搭建一个Electron项目时遇到的一些小问题

1 篇文章 0 订阅

一、搭建 Electron 项目

1、创建一个文件夹

mkdir electron-desktop

2、进入创建好的文件夹

cd electron-desktop

3、执行如下命令:

yarn init -y
yarn add electron --dev

        以上命令创建一个空白的项目,项目中包含一个package.json 和 node_modules目录下安装的依赖。

        我创建的过程中同时生成了一个package-lock.json文件,导致我在第四步的时候一直报错,报错中提示移除该文件:

 移除后再次执行yarn add命令时仍旧报错:

搜索后找到以下解决方法:

  • 先清一下缓存:npm cache clean --force
  • 设置一下镜像源:npm config set registry https://registry.npm.taobao.org
  • 原来没有设置过的,设置镜像地址:npm config set disturl https://npm.taobao.org/dist
  • 设置electron镜像:npm config set electron_mirror https://npm.taobao.org/mirrors/electron/


以上方法来自:CSDN博主「明仔的阳光午后」的原创文章,原文链接:https://blog.csdn.net/qq_41785288/article/details/128323448

验证是否安装成功:

  • npx electron -v

成功后再次执行yarn add,

 二、编写启动项目

1、创建src目录,该目录下继续创建main和renderer文件夹:

        Electron中有 主进程 和 渲染进程 两个重要的概念,在主进程里面用Node.js代码调用 Electron 封装好的API来创建窗口,管理应用整个生命周期,在渲染进程里面加载传统的Web界面:

  • main 目录用于存放跟主进程相关的代码
  • renderer目录用于存放跟渲染进行相关的代码

2、 renderer目中中创建index.html 文件,文件内容根据自己的需求编写

3、在main目录中创建index.js 作为主进程的入口,加载index.html文件

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

let win
app.whenReady().then(() => {
  win = new BrowserWindow({ width: 800, height: 600, titleBarStyle: 'hiddenInset' })
  win.loadFile(path.join(__dirname, '../renderer/index.html'))
})

4、在package.json文件中添加配置如下:

"main": "src/main/index.js",
"scripts": {
  "start": "electron ."
},

5、运行搭建好的项目:

npm start

成功即可在桌面打开搭建的应用。

路漫漫其修远兮,吾将上下而求索!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值