2022-03-29 18:02:21 +08:00
# electron-vite-vue
2021-11-04 14:28:22 +08:00
2022-06-17 09:01:16 +08:00
🥳 Really simple `Electron` + `Vue` + `Vite` boilerplate.
2022-03-05 06:36:45 +08:00
[](https://github.com/vitejs/awesome-vite)
2022-04-20 00:18:29 +08:00
[](https://app.netlify.com/sites/electron-vite/deploys)
2022-07-27 18:45:22 +08:00
[](https://github.com/electron-vite/electron-vite-vue/blob/main/LICENSE)
[](https://github.com/electron-vite/electron-vite-vue)
[](https://github.com/electron-vite/electron-vite-vue)
[](https://github.com/electron-vite/electron-vite-vue/actions/workflows/build.yml)
2021-11-12 08:35:08 +08:00
2022-06-17 09:01:16 +08:00
## Features
2022-04-26 09:19:55 +08:00
📦 Out of the box
2022-08-03 08:18:24 +08:00
🎯 Based on the official [template-vue-ts ](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-vue-ts ), less invasive
2022-06-17 09:01:16 +08:00
🌱 Extensible, really simple directory structure
2022-06-28 10:25:37 +08:00
💪 Support using Node.js API in Electron-Renderer
2022-06-16 19:35:21 +08:00
🔩 Support C/C++ native addons
2022-04-26 09:19:55 +08:00
🖥 It's easy to implement multiple windows
2022-03-03 20:04:55 +08:00
## Quick Start
2021-11-02 15:06:09 +08:00
2022-04-26 09:19:55 +08:00
```sh
npm create electron-vite
```
2022-03-23 20:03:44 +08:00
2022-04-26 09:19:55 +08:00
<!-- [](https://asciinema.org/a/483731) -->
2022-03-05 06:36:45 +08:00
2022-06-16 19:35:21 +08:00

2022-03-05 06:36:45 +08:00
2022-04-26 09:19:55 +08:00
## Debug
2022-03-05 06:36:45 +08:00
2022-06-16 19:35:21 +08:00

2022-03-05 06:36:45 +08:00
2021-11-11 18:29:18 +08:00
## Directory
2022-06-16 19:35:21 +08:00
```diff
+ ├─┬ electron
+ │ ├─┬ main
2022-07-20 08:47:41 +08:00
+ │ │ └── index.ts entry of Electron-Main
2022-06-16 19:35:21 +08:00
+ │ └─┬ preload
2022-07-20 08:47:41 +08:00
+ │ └── index.ts entry of Preload-Scripts
2022-06-16 19:35:21 +08:00
├─┬ src
2022-07-20 08:47:41 +08:00
│ └── main.ts entry of Electron-Renderer
2022-06-16 19:35:21 +08:00
├── index.html
├── package.json
└── vite.config.ts
2021-11-11 18:29:18 +08:00
```
2022-07-21 09:36:35 +08:00
## 🚨 Be aware
2022-03-13 21:52:58 +08:00
2022-07-20 08:47:41 +08:00
By default, this template integrates Node.js in the Renderer process. If you don't need it, you just remove the option below. [Because it will modify the default config of Vite ](https://github.com/electron-vite/vite-plugin-electron/tree/main/packages/electron-renderer#config-presets-opinionated ).
2022-03-13 21:52:58 +08:00
2022-07-20 08:47:41 +08:00
```diff
# vite.config.ts
2022-06-28 10:25:37 +08:00
2022-07-20 08:47:41 +08:00
electron({
- renderer: {}
})
```
2022-06-28 10:25:37 +08:00
2022-07-20 08:47:41 +08:00
## FAQ
2021-12-18 09:44:36 +08:00
2022-07-20 08:47:41 +08:00
- [dependencies vs devDependencies ](https://github.com/electron-vite/vite-plugin-electron/tree/main/packages/electron-renderer#dependencies-vs-devdependencies )
- [Using C/C++ native addons in Electron-Renderer ](https://github.com/electron-vite/vite-plugin-electron/tree/main/packages/electron-renderer#load-nodejs-cc-native-modules )
- [Node.js ESM packages ](https://github.com/electron-vite/vite-plugin-electron/tree/main/packages/electron-renderer#nodejs-esm-packages ) (e.g. `execa` `node-fetch` )