electron-vite 你太优秀了

目录

安装

说明

开发注意

源代码目录

使用网页第三方插件

调用electron API

​编辑 ​编辑

---

今天给大家推荐一个非常好用的electron构建工具，他是基于vite构建的一个工具，基本上把开发一系列需要的事情，都帮大家做好了。大家只需要像，写网页一样，就能制作出完美的桌面程序出来。 electron vite 官网

下面我来说说他的基本使用。

安装

前提： electron-vite 需要 Node.js 版本 18+，20+ 和 Vite 版本 4.0+

满足了前提就可以安装了。

npm安装：

npm create @quick-start/electron@latest

yarn安装（推荐）：

yarn create @quick-start/electron

pnpm安装（推荐）：

pnpm create @quick-start/electron

输入指令后，根据提示即可完成安装：

✔ 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.

说明

开发注意

  "scripts": {
    "format": "prettier --write .",
    "lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
    "start": "electron-vite preview",
    "dev": "electron-vite dev --watch",// 加入--watch 开启热重载
    "build": "electron-vite build",
    "postinstall": "electron-builder install-app-deps",
    "build:unpack": "npm run build && electron-builder --dir",
    "build:win": "npm run build && electron-builder --win",// 打包成windows安装包
    "build:mac": "npm run build && electron-builder --mac",// 打包成mac安装包
    "build:linux": "npm run build && electron-builder --linux"// 打包成linux安装包
  },

源代码目录

使用网页第三方插件

这里以element puls ui组件库为例：

调用electron API

 

好了，看到这里，大家应该知道如何使用这个构建工具了，如果还有问题，可以访问electron-vite构建工具官方文档和electron官方文档。