Simple template for electron app using Vue/Vite/ElementPlus.

Overview

electron-app-template

๐Ÿฅณ Electron + Vue + Vite template with several functions.

GitHub stars GitHub forks

Features

๐Ÿ“ฆ Base on electron-vue-vite
๐ŸŽฏ Build-in Element-plus UI modules
๐ŸŒฑ SQLite3 support
๐ŸŒž Light/Dark mode change
๐Ÿ”ฉ Update function
๐Ÿ–ฅ Child window management
๐ŸŽฑ Internationalization support

Directory

+ โ”œโ”€โ”ฌ 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

๐Ÿšจ 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']),
  ],
}
You might also like...
Vue3 + vite2 + Typescript + electron 13 + tailwind

Vue 3 + Typescript + Vite 2 + Tailwindcss + Electron 13 + Elctron-builder with preconfiged sample windows app Required Enviroments Nodejs = 14.0.0 MS

A simple start for using vue2 with vite

A simple start for using vue2 with vite

This template allows you to quickly scaffold a Vue project with Vue Router, VueX, TailwindCss with JIT Compiler and vite as a bundler.
This template allows you to quickly scaffold a Vue project with Vue Router, VueX, TailwindCss with JIT Compiler and vite as a bundler.

This template allows you to quickly scaffold a Vue project with Vue Router, VueX, TailwindCss with JIT Compiler and vite as a bundler.

Vue 3 starter template: Vite / Vue 3 / Tailwind CSS / PNPM
Vue 3 starter template: Vite / Vue 3 / Tailwind CSS / PNPM

Vue.js starter template Features: ๐Ÿ›  Vue 3 โšก๏ธ Vite ๐Ÿ—‚ PNPM ๐Ÿ›ฃ Vue Router ๐ŸŽจ Tailwind CSS ๐Ÿ” Eslint with airbnb and stylelint ๐ŸŒ— Light and dark mode co

:star: A Vite 2.x + Vue 3.x + TypeScript template starter

Vite2.x + Vue3.x + TypeScript Starter ๅœจ็บฟ้ข„่งˆ https://vite-vue3-starter.xpoet.cn

This template should help get you started developing with Vue 3, Vuetify 3 and Typescript in Vite.

This template should help get you started developing with Vue 3, Vuetify 3 and Typescript in Vite.

This template should help get you started developing with Vue 3 and Typescript in Vite

Vue 3 + Typescript + Vite This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 script setu

This template should help get you started developing with Vue 3 in Vite.

vue-project This template should help get you started developing with Vue 3 in Vite. Recommended IDE Setup VSCode + Volar (and disable Vetur). Type Su

This template should help get you started developing with Vue 3 in Vite.
This template should help get you started developing with Vue 3 in Vite.

Vue 3 + Vite This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 script setup SFCs, check out the scrip

Owner
Moller Zhu
Moller Zhu
โšก An Electron & Nuxt.js / Vue.js quick start boilerplate with vue-cli scaffolding, electron-builder, unit/e2e testing, vue-devtools

Overview The boilerplate for making electron applications built with vue / nuxt. Currently runs with: Electron v12 Electron Builder v22 Vue v2 Nuxt v2

Michaล‚ Zarach 664 Oct 4, 2022
๐Ÿฅณ Very simple electron + vue3 + vite boilerplate.

electron-vue-vite English | ็ฎ€ไฝ“ไธญๆ–‡ ?? Very simple Electron + Vue3 + Vite2 boilerplate. Run Setup # clone the project git clone [email protected]:caoxiemeih

่‰้ž‹ๆฒกๅท 1.5k Sep 30, 2022
Template creates with Vite that includes a Vue 3 app template with routes and store. Regarding css we use Tailwind CSS

Template creates with Vite that includes a Vue 3 app template with routes and store. Regarding css we use Tailwind CSS

Marco 4 Aug 3, 2022
โšก๏ธVite Vue, Pinia, vite-ssg, Typescript, eslint,stylelint starter template

A development template for vue3 + vue-router + pinia + typescript + vite-ssg

็Œด่ฒ“ 2 Aug 12, 2022
Use vue3+ts+vite2+electron make desktop App for wallhaven.cc

Use vue3+ts+vite2+electron make desktop App for wallhaven.cc

hezg 2 Mar 7, 2022
Vite - Vue 2 starter template using composition-api and windiCSS

Vite โšก - Vue 2 starter template This starter template will help you to easily create a Vue2 application bundled by the lightning fast build tool calle

null 165 Sep 27, 2022
Vue template for starter using Vue3 + TypeScript + Vite + Pinia ๐Ÿš€

Vue TypeScript Starter This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 <script setup>

Yuga Sun 24 Sep 27, 2022
A simple opinionated Vue3 Starter Template with Vite.js

Logo created with Windcss logo + Icons made by Vectors Market & Pixel perfect from www.flaticon.com Vitesome ?? โ›ต๏ธ A simple opinionated Vue3 Starter T

Alvaro Saburido 148 Oct 1, 2022
Simple, opinionated, fully typed, and production-ready project template for Vite.

Opinionated Vite + Vue 3 + TypeScript + Tailwind CSS starter template.

Ville Sรครคvuori 263 Sep 30, 2022
Simple, opinionated, fully typed, and production-ready project template for Vite

Vite + Vue 3 + Typescript + Tailwind Starter Simple, opinionated, fully typed, and production-ready project template for Vite. This template is practi

Julien 0 Feb 25, 2022