Electron 开发桌面端

1. Electron原生创建

npm install -g electron  #安装 Electron
electron -v  查看版本

先建一个项目 创建 index.html main.js 文件

进入项目使用 npm init --yes 创建 package.json 文件

文件结构：

编写主进程代码 main.js

npm i electron --save-dev 项目里安装，让VScode有提示

const { app, BrowserWindow } = require("electron");
const path = require('path');
//监听应用的启动事件
app.on("ready", () => {
    const mainWindow = new BrowserWindow({
        width: 600,
        height: 400
    })
    mainWindow.loadFile(path.join(__dirname, "index.html"));
})

electron . 启动项目

h2 {
    color: royalblue;
}

添加css 再次执行 electron .

集成 eslint 代码检查工具 JavaScript代码检查工具

npm install -g eslint  安装 eslint 

项目里使用 eslint

eslint --init

·········
PS E:\vscode-workspace\electrondemo> eslint --init
You can also run this command directly using 'npm init @eslint/config'.
Need to install the following packages:
  @eslint/create-config
Ok to proceed? (y) y
√ How would you like to use ESLint? · style
√ What type of modules does your project use? · commonjs
√ Which framework does your project use? · none
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ How would you like to define a style for your project? · guide
√ Which style guide do you want to follow? · standard    
√ What format do you want your config file to be in? · JavaScript
Checking peerDependencies of eslint-config-standard@latest       
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-config-standard@latest eslint@^7.12.1 eslint-plugin-import@^2.22.1 eslint-plugin-node@^11.1.0 eslint-plugin-promise@^4.2.1 || ^5.0.0
√ Would you like to install them now with npm? · No / Yes
A config file was generated, but the config file itself may not follow your linting rules.
Successfully created .eslintrc.js file in E:\vscode-workspace\electrondemo
········

```package.json```
{
  "name": "electrondemo",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",  #主进程
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^17.1.2"
  }
}

Electron 只有一个主进程，有多个渲染进程

点击前往 Electron 文档地址

2.electron-forge 脚手架创建项目

electron-forge 脚手架官网

安装yarn

Microsoft Windows [版本 10.0.19044.1645]
(c) Microsoft Corporation。保留所有权利。

C:\Users\CodeHaywire>npm install -g yarn

added 1 package, and audited 2 packages in 4s

found 0 vulnerabilities

C:\Users\CodeHaywire>yarn -v
1.22.18

开始创建

yarn create electron-app demo

出现 Done in 269.43s. 即创建完成

目录结构

进到项目里打开cmd 启动项目

yarn start

Windows PowerShell
版权所有 (C) Microsoft Corporation。保留所有权利。

尝试新的跨平台 PowerShell https://aka.ms/pscore6

PS C:\Users\CodeHaywire\Desktop\demo> yarn start
yarn run v1.22.18
$ electron-forge start
✔ Checking your system
✔ Locating Application
✔ Preparing native dependencies
✔ Launching Application

如下即成功

index.js 注释 mainWindow.webContents.openDevTools(); 可以关闭开发者窗口

 // mainWindow.webContents.openDevTools();

还可以打包exe

yarn make

打包的文件在out文件夹里 出现 Done in 269.43s. 即打包完成

3.electron-vue 创建 [可以让electron支持vue]

electron-vue 官网

安装最新的 vue/cli-init

npm i -g @vue/cli-init

创建项目

vue init simulatedgreg/electron-vue electron-vue-project

具体过程

PS C:\Users\CodeHaywire\Desktop\electron-vue-demo> vue init simulatedgreg/electron-vue electron-vue-project

? Application Name electron-vue-project
? Application Id com.example.yourapp
? Application Version 0.0.1
? Project description An electron-vue project
? Use Sass / Scss? Yes
? Select which Vue plugins to install (Press <space> to select, <a> to toggle all, <i> to invert selection)axios, vue-electron, vue-router, vuex, vuex-electron
? Use linting with ESLint? Yes
? Which ESLint config would you like to use? Standard
? Set up unit testing with Karma + Mocha? No
? Set up end-to-end testing with Spectron + Mocha? No
? What build tool would you like to use? builder
? author CodeHaywire <CodeHaywire@163.com>

   vue-cli · Generated "electron-vue-project".

---

All set. Welcome to your new electron-vue project!

Make sure to check out the documentation for this boilerplate at
https://simulatedgreg.gitbooks.io/electron-vue/content/.

Next Steps:

  $ cd electron-vue-project
  $ yarn (or `npm install`)
  $ yarn run dev (or `npm run dev`)

将yarn配置成淘宝镜像源

 yarn config set registry https://registry.npm.taobao.org -g

安装依赖

yarn install

启动项目

yarn run dev

去掉menu菜单

去掉 install vue-devtools 的提示

去掉console里的爆红 GET http://localhost:9080/__webpack_hmr net::ERR_ABORTED

紧接着按照vue开发网页端的方式开发桌面端就可以了

4. 打包项目

打包

遇到很多问题

问题一：

解决：

打开build.js



修改成

问题二:

解决：

1.使用 yarn add multispinner -D

2.打开build.js



const Multispinner = require('multispinner')

打包

yarn run build

打包成功

打包失败的话就将报错里的url手动下载一下（有的要翻墙）

winCodeSign-2.2.0_2.7.7z 下载地址
nsis-3.0.3.3.7z 下载地址
nsis-resources-3.3.0.7z 下载地址

解压存放



再次 yarn run build 就可以了

nice