https://github.com/ci010/electron-vue-next

A starter template for using vue-next with the electron.
https://github.com/ci010/electron-vue-next

boilerplate electron electron-vue esbuild rollup vite vue vue-next vue-router vuex

Last synced: 9 days ago
JSON representation

A starter template for using vue-next with the electron.

• Host: GitHub
• URL: https://github.com/ci010/electron-vue-next
• Owner: ci010
• Created: 2020-10-19T17:02:53.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2021-09-06T18:14:06.000Z (about 3 years ago)
• Last Synced: 2024-10-27T07:10:36.973Z (14 days ago)
• Topics: boilerplate, electron, electron-vue, esbuild, rollup, vite, vue, vue-next, vue-router, vuex
• Language: JavaScript
• Homepage: https://ci010.github.io/electron-vue-next/
• Size: 1.73 MB
• Stars: 191
• Watchers: 5
• Forks: 27
• Open Issues: 13
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Overview

This repository contains the starter template for using vue-next with the latest electron. 

*I started to learn electron & vue by the great project [electron-vue](https://github.com/SimulatedGREG/electron-vue). This project is also inspired from it.*

You can see the document [here](https://ci010.github.io/electron-vue-next/index.html).

同样，我们也有[中文文档](https://ci010.github.io/electron-vue-next/zh)。

## Features

- Electron 11

  - Follow the [security](https://www.electronjs.org/docs/tutorial/security) guide of electron, make renderer process a browser only environment

  - Using [electron-builder](https://github.com/electron-userland/electron-builder) to build

- Empower [vue-next](https://github.com/vuejs/vue-next) and its eco-system

  - Using [vite](https://github.com/vitejs/vite) which means develop renderer process can be blazingly fast!

  - Using [vuex 4.0](https://github.com/vuejs/vuex/tree/4.0) with strong type state, getters, and commit

  - Using [vue-router-next](https://github.com/vuejs/vue-router-next)

- Using [eslint](https://www.npmjs.com/package/eslint) with Javascript Standard by default

- Built-in TypeScript Support

  - Using [esbuild](https://github.com/evanw/esbuild) in [rollup](https://github.com/rollup/rollup) (align with vite) to build main process typescript code 

- Github Action with Github Release is out-of-box

  - Auto bump version in package.json and generate CHANGELOG.md if you follow the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0)

  - Detail how this work described in [Release Process](#release-process) section

- Integrate VSCode well

  - Support debug .ts/.vue files in main/renderer process by vscode debugger

  - Detail see [Debug](#debug-in-vscode) section

- Multiple Windows Support

  - Can add a new window for App easily. See [Add a New Window](#new-window) section

- [vue-devtool](https://github.com/vuejs/vue-devtools) support

  - Run npm run postinstall to install extensions

  - Support vue-router-next and vuex 4 with new UI

## Getting Started

Run `npm init electron-vue-next `

Once you have your project, and in the project folder:

```shell

# Install dependencies with linter

npm install

# Will start vite server, rollup devserver, and electron to dev!

npm run dev

# OPTIONAL. Will compile the main and renderer process to javascript and display output size

npm run build

# OPTIONAL. Will compile all and output an unpacked electron app. You can directly 

npm run build:dir

# Will compile all and build all products and ready to release

npm run build:production

```