electron-vite-vue

🥳 Really simple Electron + Vue + Vite boilerplate.

Features

📦 Out of the box
🎯 Based on the official vue-ts template, less invasive
🌱 Extensible, really simple directory structure
💪 Support using Node.js API in Electron-Renderer
🔩 Support C/C++ native addons
🖥 It's easy to implement multiple windows

Quick Start

npm create electron-vite

Debug

Directory

+ ├─┬ electron
+ │ ├─┬ main
+ │ │ └── index.ts    entry of Electron-main
+ │ └─┬ preload
+ │   └── index.ts    entry of Electron-preload
  ├─┬ src
  │ └── main.ts       entry of Electron-renderer
  ├── index.html
  ├── package.json
  └── vite.config.ts

🚨 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

🚨 ESM packages

e.g. node-fetch execa got ...others

1. npm i vite-plugin-esmodule -D
2. Configure in vite.config.ts

import esmodule from 'vite-plugin-esmodule'
export default {
  plugins: [
    esmodule(['got', 'execa', 'node-fetch']),
  ],
}