mirror of
https://github.com/electron-vite/electron-vite-vue
synced 2025-07-01 04:43:14 +08:00
78 lines
3.0 KiB
Markdown
78 lines
3.0 KiB
Markdown
# electron-vite-vue
|
|
|
|
[](https://github.com/vitejs/awesome-vite)
|
|
|
|
|
|
|
|
|
|
|
|
**English | [简体中文](README.zh-CN.md)**
|
|
|
|
🥳 Real simple `Electron` + `Vue` + `Vite` boilerplate.
|
|
|
|
## Quick Start
|
|
|
|
[](https://asciinema.org/a/483731)
|
|
|
|
## Overview
|
|
|
|
This is a `Vite`-integrated `Electron` template built with simplification in mind.
|
|
|
|
The repo contains only the most basic files, dependencies and functionalities to ensure flexibility for various scenarios.
|
|
|
|
You need a basic understanding of `Electron` and `Vite` to get started. But that's not mandatory - you can learn almost all the details by reading through the source code. Trust me, this repo is not that complex. 😋
|
|
|
|
## Directory
|
|
|
|
A `dist` folder will be generated everytime when `dev` or `build` command is executed. File structure of `dist` is identical to the `packages` directory to avoid any potential path calculation errors.
|
|
|
|
```tree
|
|
├
|
|
├── dist Will be generated following the structure of "packages" directory
|
|
├ ├── main
|
|
├ ├── preload
|
|
├ ├── renderer
|
|
├
|
|
├── scripts
|
|
├ ├── build.mjs Build script -> npm run build
|
|
├ ├── watch.mjs Develop script -> npm run dev
|
|
├
|
|
├── packages
|
|
├ ├── main Main-process source code
|
|
├ ├── vite.config.ts
|
|
├ ├── preload Preload-script source code
|
|
├ ├── vite.config.ts
|
|
├ ├── renderer Renderer-process source code
|
|
├ ├── vite.config.ts
|
|
├
|
|
```
|
|
|
|
## Learn About Electron-vue-vite
|
|
|
|
Used in main-process 👉 [electron-vite-boilerplate](https://github.com/caoxiemeihao/electron-vite-boilerplate)
|
|
|
|
Used in Renderer-process 👉 [electron-vite-boilerplate/tree/nodeIntegration](https://github.com/caoxiemeihao/electron-vite-boilerplate/tree/nodeIntegration)
|
|
|
|
**ES Modules**
|
|
|
|
- [execa](https://www.npmjs.com/package/execa)
|
|
- [node-fetch](https://www.npmjs.com/package/node-fetch)
|
|
- [file-type](https://www.npmjs.com/package/file-type)
|
|
|
|
**Native Addons**
|
|
|
|
- [sqlite3](https://www.npmjs.com/package/sqlite3)
|
|
- [serialport](https://www.npmjs.com/package/serialport)
|
|
|
|
## Main window
|
|
<img width="400px" src="https://raw.githubusercontent.com/caoxiemeihao/blog/main/electron-vue-vite/screenshot/electron-15.png" />
|
|
|
|
## <!-- Wechat | | -->请我喝杯下午茶 🥳
|
|
|
|
<div style="display:flex;">
|
|
<!-- <img height="333px" src="https://raw.githubusercontent.com/caoxiemeihao/blog/main/assets/wechat/group/qrcode.jpg" />
|
|
-->
|
|
<img height="333px" src="https://raw.githubusercontent.com/caoxiemeihao/blog/main/assets/wechat/%24qrcode/%24.png" />
|
|
</div>
|
|
|