electron-vue-next icon indicating copy to clipboard operation
electron-vue-next copied to clipboard

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