https://github.com/robertcorponoi/electron-vue3-ts-quick-start

Easy to use template for creating an app with Electron, Vue3, and Typescript
https://github.com/robertcorponoi/electron-vue3-ts-quick-start

babel chai electron eslint mocha quick-start quickstart template ts typescript vue vue3

Last synced: 23 days ago
JSON representation

Easy to use template for creating an app with Electron, Vue3, and Typescript

• Host: GitHub
• URL: https://github.com/robertcorponoi/electron-vue3-ts-quick-start
• Owner: robertcorponoi
• Created: 2020-12-08T00:22:51.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2020-12-08T00:26:57.000Z (almost 4 years ago)
• Last Synced: 2024-10-01T02:22:38.451Z (about 1 month ago)
• Topics: babel, chai, electron, eslint, mocha, quick-start, quickstart, template, ts, typescript, vue, vue3
• Language: Vue
• Homepage:
• Size: 13.7 KB
• Stars: 19
• Watchers: 2
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  



Electron Vue3 Typescript Quick Start


Easy to use template for creating an app with Electron, Vue3, and Typescript


This is a vue3 application created with the [vue-cli](https://cli.vuejs.org/) with Electron added on.

## **Table of Contents**

- [Features](#features)

- [Scripts](#scripts)

## **Features**

- [Vue3](https://v3.vuejs.org/)

- [Babel](https://babeljs.io/)

- [ESLint](https://eslint.org/)

- [Mocha](https://mochajs.org/) & [Chai](https://www.chaijs.com/) for testing.

- [Typescript](https://www.typescriptlang.org/) support for Vue components

- [electron-reloader](https://github.com/sindresorhus/electron-reloader) to reload the app on changes

- [electron-builder](https://github.com/electron-userland/electron-builder) for packaging and building your Electron app.

- [dotenv](https://github.com/motdotla/dotenv) to load environment variables

## **Scripts**

- `npm run start`: Starts the Electron app.

- `npm run build:dev`: Builds the Vue app to the `dist` directory which is used by Electron to display the app.

- `npm run build:dev:watch`: The same as above except it watches for and reloads on changes.

- `npm run build:prod`: Creates a production ready build.

- `npm run test:unit`: Runs the unit tests defined under `test/unit`.

- `npm run lint`: Runs ESLint to check for issues.

- `npm run dist`: Runs `npm run build:prod` and then calls electron-builder to package the Electron app.

- `npm run dist:mac`: Runs `npm run build:prod` and then calls electron-builder to package the Electron app for OSX.

- `npm run dist:linux`: Runs `npm run build:prod` and then calls electron-builder to package the Electron app for a Linux environment.

- `npm run dist:windows`: Runs `npm run build:prod` and then calls electron-builder to package the Electron app for Windows.

- `npm run dist:all`: Runs `npm run build:prod` and then calls electron-builder to package the Electron for OSX, Linux, and Windows.

## **Instructions**

1. Clone the repository

2. Run `npm install` to install the dependencies needed.

To develop, you need to follow the steps below every time you begin working on it:

1. First you want to run `npm run build:dev:watch` to build the `dist` directory and watch for changes to your Vue templates/components.

2. Run `npm run start` to start Electron.

Now, with both of these running, whenever you make a change to the files Electron uses or the Vue files, the Electron window will update automatically.

**Note:** The electron files are not Typescript so that they can be reloaded with electron-reloader.