https://github.com/nmgwddj/vue-electron-template
https://github.com/nmgwddj/vue-electron-template
Last synced: 15 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/nmgwddj/vue-electron-template
- Owner: nmgwddj
- License: mit
- Created: 2023-03-27T05:38:02.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2023-03-27T05:38:08.000Z (about 2 years ago)
- Last Synced: 2025-04-10T00:55:12.572Z (15 days ago)
- Language: JavaScript
- Size: 568 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Vue-Electron-Template
[](https://travis-ci.org/mubaidr/vue-electron-template)
[](https://ci.appveyor.com/project/mubaidr/vue-electron-template)
[](#contributors)
Template for building desktop applications using [Electronjs](https://electronjs.org) and [Vue.js](https://vuejs.org)
## NOTICE
[Vue3 Support](https://github.com/mubaidr/vue-electron-template/issues/907)
## Overview
This template takes advantage of `webpack-5` with `vue-loader`, `electron-builder`, and some of the most used plugins like `vue-router`, `vuex` and so much more to provide an easy to use development (with vscode debugging) enviroment with hot module replacement.
### Features
- [Bulma-Fluent](https://mubaidr.github.io/bulma-fluent/), a theme suitable for desktop application based on [Bulma](https://bulma.io/)
- [vue-router](https://github.com/vuejs/vue-router)
- [vuex](https://github.com/vuejs/vuex)
- [vue-electron](https://github.com/SimulatedGREG/vue-electron)
- [material-design-icons](http://google.github.io/material-design-icons/) installed
- Some built-in animaitons [animations.scss](src\renderer\assets\style\animations.scss)
- `SCSS`/`SASS` support with [vue-loader](https://github.com/vuejs/vue-loader/) (removes unused css/styles during build)
- `Typescript` support (for `Vuejs` as well)
- Worker scripts (to perform CPU-intensive operations), to use with nodejs `child_process` module. [Sample Worker File](src\utilities\workerSample.ts)
- Easily package your electron app using [electron-builder](https://github.com/electron-userland/electron-builder)
- `vue-devtools` installed
- `DEV`, `DEBUG` & `BUILD` NPM scripts
- `Babel` configured
- `ESLint` configured
- `vscode` debug config for renderer process debugging
- Process restarting when working in main process & hot module replacement for renderer
- Generates web/browser build in the `dist/web` directory too
- `--debug` paramter to enable dev tools in production build executeable
### Screenshot
### Getting Started
Clone this repository, install dependencies and run using either `dev`, `debug` or `build` command.
```bash
# Clone this repository
git clone https://github.com/mubaidr/vue-electron
# change directory to cloned path
cd vue-electron
# Install dependencies
npm install
# Run in `debug` mode, to debug app using VSCODE
npm run debug
# Run in `dev` mode
npm run dev
# Build installer for this app
npm run build
```
### Project structure
`src/main` contains electron main script.
`src/renderer` contains vue-js application.
`src/utilities/workerSample.ts` a sample worker script.
#### Credits
All credits to authors of packages and tools used in the project.
\* This template is inspired by [electron-vue](https://github.com/SimulatedGREG/electron-vue)
## Contributors
Thanks goes to these wonderful people ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key)):
Jibbie R. Eguna
🎨
eiurur
💻
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!