All Projects → Deluze → electron-vue-template

Deluze / electron-vue-template

Licence: MIT License
A very simplistic Electron + Vue 3 template including ViteJS and Electron Builder

Programming Languages

javascript
184084 projects - #8 most used programming language
Vue
7211 projects
HTML
75241 projects

Projects that are alternatives of or similar to electron-vue-template

admin-one-vue-tailwind
Free Vue.js 3.x Tailwind 3.x admin dashboard template with dark mode. Vite builds. Pinia state. Laravel integration available
Stars: ✭ 742 (+1136.67%)
Mutual labels:  vite, vuejs3, vitejs
vite-plugin-webfont-dl
⚡ Webfont Download Vite Plugin - Make your Vite site load faster
Stars: ✭ 69 (+15%)
Mutual labels:  vite, vuejs3, vitejs
vitawind
Install and Setting Tailwindcss automatically for Vite
Stars: ✭ 46 (-23.33%)
Mutual labels:  vite, vitejs
codeigniter-vue-boilerplate
CodeIgniter 3 + Vue.js 3 + Vite with supported Hot Module Replacement (HMR)
Stars: ✭ 38 (-36.67%)
Mutual labels:  vite, vuejs3
vui-vc-next
Vue 3 with Vite Playground - Mobile web UI components - (vue3+vite2).
Stars: ✭ 15 (-75%)
Mutual labels:  vite, vitejs
image-optimizer
A free and open source tool for optimizing images and vector graphics.
Stars: ✭ 740 (+1133.33%)
Mutual labels:  vite, vitejs
vite-plugin-vue-gql
⚡ GraphQL Tags for your Vue SFC ⚡
Stars: ✭ 188 (+213.33%)
Mutual labels:  vite, vitejs
vite-plugin-environment
Easily expose environment variables in Vite.js
Stars: ✭ 57 (-5%)
Mutual labels:  vite, vitejs
vite-plugins
🌱 为社区尽一份绵薄之力
Stars: ✭ 63 (+5%)
Mutual labels:  vite, vitejs
admin-antd-vue
Vue3.x + Ant Design Admin template (vite/webpack)
Stars: ✭ 111 (+85%)
Mutual labels:  vite, vitejs
reactjs-vite-tailwindcss-boilerplate
ReactJS + Vite boilerplate to be used with Tailwindcss.
Stars: ✭ 103 (+71.67%)
Mutual labels:  vite, vitejs
element-plus-admin
基于vite+ts+elementPlus
Stars: ✭ 361 (+501.67%)
Mutual labels:  vite, vuejs3
troisjs.github.io
📖 Examples and documentation for TroisJS ✨
Stars: ✭ 119 (+98.33%)
Mutual labels:  vuejs3, vitejs
django-vite
Integration of ViteJS in a Django project.
Stars: ✭ 201 (+235%)
Mutual labels:  vite, vitejs
vite-plugin-ssr
Like Next.js / Nuxt but as do-one-thing-do-it-well Vite plugin.
Stars: ✭ 1,703 (+2738.33%)
Mutual labels:  vite, vitejs
electron-vue-vite-boilerplate
Electron Vue Vite Boilerplate for you next project
Stars: ✭ 26 (-56.67%)
Mutual labels:  vite, vitejs
preview-pro
Use pro-layout in vitejs. preview https://sendya.github.io/preview-pro/index.html
Stars: ✭ 71 (+18.33%)
Mutual labels:  vite, vitejs
vuejs-3-examples
Some examples of Vue.js 3.0.
Stars: ✭ 26 (-56.67%)
Mutual labels:  vite, vuejs3
admin-two-vue-bulma-dashboard
Free Vue.js Bulma Buefy Admin Dashboard Template. Vite & Vue CLI supported
Stars: ✭ 68 (+13.33%)
Mutual labels:  vite, vitejs
rapide
WIP! do not use just yet - Opinionated Vite + Alpine.js starter PWA template
Stars: ✭ 15 (-75%)
Mutual labels:  vite, vitejs

Electron Vue Template

A starter template that's bundled together with VueJS 3.x, Electron 16.x, ViteJS and Electron Builder 👌

About

This project got inspired by electron-vue

This template uses ViteJS for the development server providing HMR (Hot Reload) while developing your Electron app.
Building the Electron application is done by Electron Builder, making your application cross-platform and easily distributable, it also supports cross-platform compilation!

This template doesn't come with any unnecessary dependencies and is unopinionated, so you can start developing your Electron / Vue applications however you want.

Getting started

Execute the following commands to start developing straight away:

git clone https://github.com/Deluze/electron-vue-template
cd electron-vue-template
npm install
npm run dev

That's all!

Commands

npm run dev # starts application with hot reload
npm run build # builds application

# OR

npm run build:win # uses windows as build target
npm run build:mac # uses mac as build target
npm run build:linux # uses linux as build target

Optional configuration options can be found in the Electron Builder CLI docs.

Project Structure

- root
  - config/
    - vite.js # ViteJS configuration
    - electron-builder.json # Electron Builder configuration
  - scripts/ # all the scripts used to build or serve your application, change as you like.
  - src/
    - main/ # Main thread (Electron application source)
    - renderer/ # Renderer thread (VueJS application source)

Using static files

If you have any files that you want to copy over to the app directory after installation, you will need to add those files in your src/main/static directory.

Referencing static files from your main process

/* Assumes src/main/static/yourFile.txt exists */

const { app } = require('electron');
const FileSystem = require('fs');
const Path = require('path');

const path = Path.join(app.getAppPath(), 'static', 'yourFile.txt');
const contents = FileSystem.readFileSync(path);
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].