前端系列——Electron工程构建（普通工程，Vue集成）

前端系列——Electron工程构建（普通工程，Vue集成）
前端系列——Electron工程构建（普通工程，Vue集成）
- Electron
- 前言
  创建Electron工程（npm）
  1.创建项目文件夹
  2.初始化
  3.安装Electron环境
  遇到的错误
  完成后如下所示
  
  自动构建Electron工程
  利用git构建
  创建Electron工程（yarn）
  创建Electron工程（cnpm）(实在不行用这个)
  启动并预览项目
  项目中构建Electron工程（推荐直接看这个）
  1.构建文件夹
  2.安装依赖
  3.创建index.html
  4.创建main.js
  5.生成package.json
  6.使用npm run start打开
  
  项目构建Vue+Electron工程
  1.构建一个普通的Vue项目
  2.进入项目目录构建electron
  3.查看版本
  4.启动项目
  5.安装vue-devtools
  6.注释掉vue-devtools的调用
  注意
Electron

前言

如果你想要直接以项目的方式学习构建，请不要看上面的创建Electron工程，而是直接看“项目中构建Electron工程”

创建Electron工程（npm）

1.创建项目文件夹
```
mkdir test
cd test
1
2
```
2.初始化
```
npm init
1
```
3.安装Electron环境
```
npm install --save-dev electron
1
```
遇到的错误

当我使用手动创建electron项目的时候我的node一直依赖下载卡住，不知道你们有没有这种问题，所以我使用自动构建的方式，自动构建如下

 完成后如下所示

 自动构建Electron工程
```
npx create-electron-app@latest 项目名
1
```
利用git构建
```
# Clone this repository
git clone https://github.com/electron/electron-quick-start
# Go into the repository
cd electron-quick-start
# Install dependencies
npm install
# Run the app
npm start
1
2
3
4
5
6
7
8
```
以上是npm安装我一律存在依赖问题

 创建Electron工程（yarn）
```
yarn init
yarn add --dev electron
1
2
```
创建Electron工程（cnpm）(实在不行用这个)
```
cnpm install --save-dev electron
1
```
启动并预览项目

你需要在package.json文件的script下加上如下内容
```
"start": "electron ."
1
```
然后使用npm run start

项目中构建Electron工程（推荐直接看这个）

1.构建文件夹
```
mkdir 项目目录名

cd 项目目录名
1
2
3
```
2.安装依赖
```
cnpm install --save-dev electron
1
```
3.创建index.html
```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>hello World</h1>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
```
4.创建main.js
```
const { app, BrowserWindow } = require('electron')

//创建主窗口
const createWindow = () => {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600
  })

  //加载html
  mainWindow.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
```
5.生成package.json
```
npm init -yes
1
```
添加命令
```
 "start": "electron ."
1
```
6.使用npm run start打开

 项目构建Vue+Electron工程

 1.构建一个普通的Vue项目

我这里采用vue3
```
vue create test
1
```
2.进入项目目录构建electron
```
cnpm install --save-dev electron-chromedriver
vue add electron-builder
1
2
```
当时折磨了我整整一天安装不好 electron-builder，因为一直卡着不动，我本来已经抱着没有希望的态度了，睡觉之前就直接扔在哪里让他放着，第二天早上居然安装好了，不得不说速度慢

 3.查看版本
```
npx electron -v
1
```
4.启动项目
```
npm run electron:serve
1
```
5.安装vue-devtools

在启动时会报Vue Devtools failed to install: Error: net::ERR_CONNECTION_TIMED_OUT
解决如下：
```
cnpm install vue-devtools --save-dev
1
```
6.注释掉vue-devtools的调用

找到background.js中这块地方，注释修改如图

 注意

我们要关注入口js的改变，原先是main.js现在是src下的background.js，如果你的不是，请手动修改
相关阅读:
Acwing第 67 场周赛
 webpack优化
 ubuntu 20.04+ORB_SLAM3 安装并行全记录（无坑版）（二）
在Kubernetes环境中有关Nginx Ingress与API Gateway的连接问题
 限流器设计思路（浅入门）
什么是IoT数字孪生？
3d-DNA组装基因组
 云栖发布｜阿里云消息队列 RocketMQ 5.0：消息、事件、流融合处理平台
 Flink 1.13（八）CDC
矩阵的运算规则
原文地址：https://blog.csdn.net/qq_51553982/article/details/126210481

前端系列——Electron工程构建（普通工程，Vue集成）

Electron

前言

创建Electron工程（npm）

1.创建项目文件夹

2.初始化

3.安装Electron环境

遇到的错误

完成后如下所示

自动构建Electron工程

利用git构建

创建Electron工程（yarn）

创建Electron工程（cnpm）(实在不行用这个)

启动并预览项目

项目中构建Electron工程（推荐直接看这个）

1.构建文件夹

2.安装依赖

3.创建index.html

4.创建main.js

5.生成package.json

6.使用npm run start打开

项目构建Vue+Electron工程

1.构建一个普通的Vue项目

2.进入项目目录构建electron

3.查看版本

4.启动项目

5.安装vue-devtools

6.注释掉vue-devtools的调用

注意