bobby169/electron-vue-next

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

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. This project is also inspired from it.

You can see the document here.

同样，我们也有中文文档。

Features

• Electron 11
  • Follow the security guide of electron, make renderer process a browser only environment
  • Using electron-builder to build
• Empower vue-next and its eco-system
  • Using vite which means develop renderer process can be blazingly fast!
  • Using vuex 4.0 with strong type state, getters, and commit
  • Using vue-router-next
• Using eslint with Javascript Standard by default
• Built-in TypeScript Support
  • Using esbuild in 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
  • Detail how this work described in Release Process section
• Integrate VSCode well
  • Support debug .ts/.vue files in main/renderer process by vscode debugger
  • Detail see Debug section
• Multiple Windows Support
  • Can add a new window for App easily. See Add a New Window section
• vue-devtool 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 <app-dirname>

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

# 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