DQ博客

切换主题

一、快速入门 ​

一、创建项目 ​

1、脚手架创建 ​

bash
mkdir my-electron-app && cd my-electron-app
npm init
bash
mkdir my-electron-app && cd my-electron-app
yarn init

提示

  • entry point 应为 main.js.
  • author 与 description 可为任意值，但对于应用打包是必填项。

此时，package.json 文件为这样

json
{
  "name": "electron-app2",
  "version": "1.0.0",
  "main": "main.js",
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "electron": "^32.1.0"
  }
}

将 electron 包安装到应用的开发依赖中

bash
npm install --save-dev electron
bash
yarn add --dev electron
安装失败

如果出现因为代理问题，导致下载electron依赖失败，需配置npm的config

  1. 打开npm的配置文件

    bash
    npm config edit

  2. 在打开的配置文件空白处将下面几个配置添加上去,注意如果有原有的这几项配置，就修改

    registry=https://registry.npmmirror.com
electron_mirror=https://cdn.npmmirror.com/binaries/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/

    如图所示

  3. 再次执行安装命令，即可成功！

创建成功！

2、使用electron-vite创建 ​

bash
npm create @quick-start/electron@latest
bash
yarn create @quick-start/electron
bash
pnpm create @quick-start/electron

然后按照提示操作即可!

txt
✔ Project name: … <electron-app>
✔ Select a framework: › vue
✔ Add TypeScript? … No / Yes
✔ Add Electron updater plugin? … No / Yes
✔ Enable Electron download mirror proxy? … No / Yes

Scaffolding project in ./<electron-app>...
Done.

提示

注意需要勾选Enable Electron download mirror proxy

安装依赖并启动项目

bash
npm install
npm run dev

启动成功！

二、打包项目 ​

1、使用Electron Forge脚手架打包 ​


（1）安装依赖 ​

bash
npm install --save-dev @electron-forge/cli
npx electron-forge import

（2）使用 Forge 的 make 命令创建可分发的应用程序 ​

bash
npm run make
bash
yarn make

（3）打包后，应用程序位置 ​

警告

打包时，项目路径需为英文路径

out\electron-app2-win32-x64\electron-app2.exe

2、使用electron-vite打包 ​

前提

需要俩个依赖

bash
npm install electron-builder --save-dev
npm install electron-vite --save-dev

打包命令

bash
npm run build:win
npm run build:mac
npm run build:linux

打包后，应用程序的位置

electron-app\dist\win-unpacked\electron-app.exe