https://github.com/mollerzhu/electron-app-template
Simple template for electron app using Vue/Vite/ElementPlus.
https://github.com/mollerzhu/electron-app-template
electron typescript vite vue
Last synced: about 1 year ago
JSON representation
Simple template for electron app using Vue/Vite/ElementPlus.
- Host: GitHub
- URL: https://github.com/mollerzhu/electron-app-template
- Owner: mollerzhu
- License: mit
- Created: 2022-09-20T00:49:21.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2022-09-20T03:13:03.000Z (almost 4 years ago)
- Last Synced: 2025-04-03T08:02:44.692Z (about 1 year ago)
- Topics: electron, typescript, vite, vue
- Language: Vue
- Homepage:
- Size: 140 KB
- Stars: 6
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# electron-app-template
🥳 `Electron` + `Vue` + `Vite` template with several functions.
## Features
📦 Base on [electron-vue-vite](https://github.com/electron-vite/electron-vite-vue)
🎯 Build-in Element-plus UI modules
🌱 SQLite3 support
🌞 Light/Dark mode change
🔩 Update function
🖥 Child window management
🎱 Internationalization support
## Directory
```diff
+ ├─┬ electron
+ │ ├─┬ main
+ │ │ ├── index.ts entry of Electron-main
+ │ │ ├── config.ts default window config
+ │ │ ├── ipc.ts window controller ipc event
+ │ │ ├── window.ts window controller
+ │ │ └── updater.ts updater function
+ │ └─┬ preload
+ │ └── index.ts entry of Electron-preload
├─┬ src
│ └─┬─ windows
│ └─┬─ main
│ └─── main.ts entry of Electron-renderer
├── index.html
├── package.json
└── vite.config.ts
```
## 🥳 `npmRebuild`
** In electron-builder.json5, here is a setting `npmRebuild`, if you want to rebuild some modules like sqlite3, set it to `true`.
## 🚨 `dependencies` vs `devDependencies`
**Put Node.js packages in `dependencies`**
**e.g.** `electron-store` `sqlite3` `serilaport` `mongodb` ...others
**Put Web packages in `devDependencies`**
**e.g.** `vue` `vue-router` `vuex` `pinia` `element-plus` `ant-design-vue` `axios` ...others
See more 👉 [dependencies vs devDependencies](https://github.com/electron-vite/vite-plugin-electron-renderer#dependencies-vs-devdependencies)
## 🚨 ESM packages
**e.g.** `node-fetch` `execa` `got` ...others
1. `npm i vite-plugin-esmodule -D`
2. Configure in vite.config.ts
```ts
import esmodule from 'vite-plugin-esmodule'
export default {
plugins: [
esmodule(['got', 'execa', 'node-fetch']),
],
}
```