Easy to use template for creating an app with Electron, Vue3, and Typescript
This is a vue3 application created with the vue-cli with Electron added on.
- Vue3
- Babel
- ESLint
- Mocha & Chai for testing.
- Typescript support for Vue components
- electron-reloader to reload the app on changes
- electron-builder for packaging and building your Electron app.
- dotenv to load environment variables
npm run start: Starts the Electron app.npm run build:dev: Builds the Vue app to thedistdirectory 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 undertest/unit.npm run lint: Runs ESLint to check for issues.npm run dist: Runsnpm run build:prodand then calls electron-builder to package the Electron app.npm run dist:mac: Runsnpm run build:prodand then calls electron-builder to package the Electron app for OSX.npm run dist:linux: Runsnpm run build:prodand then calls electron-builder to package the Electron app for a Linux environment.npm run dist:windows: Runsnpm run build:prodand then calls electron-builder to package the Electron app for Windows.npm run dist:all: Runsnpm run build:prodand then calls electron-builder to package the Electron for OSX, Linux, and Windows.
- Clone the repository
- Run
npm installto install the dependencies needed.
To develop, you need to follow the steps below every time you begin working on it:
- First you want to run
npm run build:dev:watchto build thedistdirectory and watch for changes to your Vue templates/components. - Run
npm run startto 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.