第一章：Electron环境搭建

最新推荐文章于 2024-07-18 16:07:17 发布

晓果博客

最新推荐文章于 2024-07-18 16:07:17 发布

阅读量700

点赞数

分类专栏： Electron 文章标签：桌面应用 vue

本文链接：https://blog.csdn.net/huangxiaoguo1/article/details/107321943

版权

Electron 专栏收录该内容

18 篇文章 23 订阅

订阅专栏

一、通过electron-quick-start创建项目

安装 node、npm（cnpm）

参考：vue学习（五）—vue-cli构建vue项目目录结构
全局安装Electron
```
npm install -g electron
```
检验是否安装成功
```
npx electron -v
```

创建项目

github镜像：将原本的网站中的http://github.com 进行替换为github.com.cnpmjs.org

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

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

 ###### 安装依赖并运行 
 npm install (cnpm install) 
 npm start

二、通过electron-forge 搭建

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

//全局安装Electron
npm install -g electron
	
//全局安装electron-forge
npm install -g electron-forge 
	
//创建项目
electron-forge init my-new-app 
	
//进入项目
cd my-new-app 
	
//启动项目
npm start

如果一直卡在 Installing NPM Dependencies

先安装淘宝镜像

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

全局安装 electron、electron-forge、electron-prebuilt-compile：

cnpm install -g electron
cnpm install -g electron-forge
cnpm install -g electron-prebuilt-compile

新建文件夹 electron-forge-demo
```
mkdir electron-forge-demo
```

在 electron-forge-demo 文件夹中新建文件 .npmrc，内容如下：

electron_mirror=http://npm.taobao.org/mirrors/electron/
registry=https://registry.npm.taobao.org

在这里插入图片描述

查看 electron-forge-demo 文件夹中的文件：
使用 electron-forge 创建项目，.npmrc 文件配置 npm 使用的镜像地址：
npm start运行项目
运行成功

三、手动创建

全局安装Electron
```
npm install -g electron
```
检验
```
npx electron -v
```

创建index.js

<!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>
    Hello World!
</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
    })

})

生成package.json

 来初始化package.json文件
 npm init --yes

启动
```
electron .
```

让vscode代码提示

当前项目下
cnpm install electron --save

晓果博客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第一章：Electron环境搭建

安装 node、npm（cnpm）参考：vue学习（五）—vue-cli构建vue项目目录结构全局安装Electronnpm install -g electron检验是否安装成功npx electron -v创建项目github镜像：将原本的网站中的http://github.com 进行替换为github.com.cnpmjs.org ###### 克隆示例项目的仓库 git clone https://github.com/electron/elect..
复制链接

扫一扫