Electron
前言
==如果你想要直接以项目的方式学习构建，请不要看上面的创建Electron工程，而是直接看“项目中构建Electron工程”==
创建Electron工程（npm）
1.创建项目文件夹
mkdir test
cd test
2.初始化
npm init
3.安装Electron环境
npm install --save-dev electron
遇到的错误
当我使用手动创建electron项目的时候我的node一直依赖下载卡住，不知道你们有没有这种问题，所以我使用自动构建的方式，自动构建如下
完成后如下所示
自动构建Electron工程
npx create-electron-app@latest 项目名
利用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
以上是npm安装我一律存在依赖问题
创建Electron工程（yarn）
yarn init
yarn add --dev electron
创建Electron工程（cnpm）(实在不行用这个)
cnpm install --save-dev electron
启动并预览项目
你需要在package.json文件的script下加上如下内容
"start": "electron ."
然后使用npm run start
项目中构建Electron工程（推荐直接看这个）
1.构建文件夹
mkdir 项目目录名
cd 项目目录名
2.安装依赖
cnpm install --save-dev electron
3.创建index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<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>
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()
})
})
5.生成package.json
npm init -yes
添加命令
"start": "electron ."
6.使用npm run start打开
项目构建Vue+Electron工程
1.构建一个普通的Vue项目
我这里采用vue3
vue create test
2.进入项目目录构建electron
cnpm install --save-dev electron-chromedriver
vue add electron-builder
==当时折磨了我整整一天安装不好 electron-builder，因为一直卡着不动，我本来已经抱着没有希望的态度了，睡觉之前就直接扔在哪里让他放着，第二天早上居然安装好了，不得不说速度慢==
3.查看版本
npx electron -v
4.启动项目
npm run electron:serve
5.安装vue-devtools
在启动时会报Vue Devtools failed to install: Error: net::ERR_CONNECTION_TIMED_OUT
解决如下：
cnpm install vue-devtools --save-dev
6.注释掉vue-devtools的调用
找到background.js中这块地方，注释修改如图
注意
我们要关注入口js的改变，原先是main.js现在是src下的background.js，如果你的不是，请手动修改
