Comprehensive Guide to Building Cross‑Platform Desktop Applications with Electron

Although B/S architecture dominates web development, C/S applications still have a large market because they can access local files and system resources beyond the browser sandbox. Electron, built on Chromium and Node.js, enables developers to create cross‑platform desktop apps using HTML, CSS, and JavaScript.

Environment Setup

Before creating an Electron app, install the required tools:

npm config set registry http://registry.npm.taobao.org/
# or
npm install -g cnpm --registry=https://registry.npm.taobao.org

Check Vue‑CLI version:

vue -V

If Vue‑CLI is missing or outdated, install/upgrade it:

npm install @vue/cli -g

Install Electron globally:

npm install -g electron
# or
cnpm install -g electron

Verify installation:

electron --version

Create and Run a Project

Clone the official quick‑start template and start it:

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start

Alternatively, use the electron‑vue scaffolding:

vue init simulatedgreg/electron-vue
# follow the prompts to generate the project

Install dependencies and run the app:

npm install
npm run dev   # development mode
npm run build # package for distribution

Electron Source Directory

The source tree follows Chromium’s multi‑process architecture. Key folders include atom/app (system entry), atom/browser (main process code), atom/renderer (renderer process code), and shared atom/common . The src directory contains main (e.g., index.js , index.dev.js ) and renderer (assets, components, router, store, etc.).

Process Model

The main process runs the script defined in package.json (usually background.js ) and creates BrowserWindow instances. Each window runs in its own renderer process, which can access Node.js APIs, allowing deeper OS interaction than a regular browser.

Real‑World Examples

1. Electron‑Vue Cloud Music – a cross‑platform desktop music player built with Electron, Vue, and Ant Design Vue. Features include drag‑play, desktop lyrics, mini mode, custom tray menu, audio visualisation, auto‑update, Nedb persistence, and more. Repository: https://github.com/xiaozhu188/electron-vue-cloud-music

2. QQ Music Player – another Electron‑Vue project mimicking the QQ Music UI. Build and run with:

git clone https://github.com/SmallRuralDog/electron-vue-music.git
cd electron-vue-music
npm install
# development mode
npm run dev
# package for distribution
npm run build

Both examples include screenshots of the running applications.

Source article: http://segmentfault.com/a/119000002137693