Guide to Setting Up and Developing Cross‑Platform Desktop Applications with Electron

Introduction While B/S architecture dominates web development, C/S desktop applications still have a large market because they can access local files and system resources. Electron, built on Chromium and Node.js, enables cross‑platform desktop apps using HTML, CSS, and JavaScript, and powers popular tools such as VS Code and Atom.

Environment Setup

Before creating an Electron app you need to install Node, Vue, and Electron.

Install Node

Download the stable version from the official site (http://nodejs.cn/download/) or use Homebrew. If using Homebrew, switch the npm registry to the Taobao mirror:

npm config set registry http://registry.npm.taobao.org/<br/>或者<br/>npm install -g cnpm --registry=https://registry.npm.taobao.org

Install/Upgrade vue‑cli

Check the installed version: vue -V If vue‑cli is missing or outdated, install/upgrade it globally: npm install @vue/cli -g Install Electron

Install the Electron package globally (or via cnpm):

npm install -g electron<br/>或者<br/>cnpm install -g electron

Verify the installation: electron --version Create and Run a Project

The official quick‑start repository can be cloned and run:

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

The project launches a window showing the sample UI.

Alternatively, use the vue‑cli template: vue init simulatedgreg/electron-vue Follow the prompts to generate the project, then install dependencies and run: npm install<br/>npm run dev // or npm run build Electron Source Directory

The source tree follows Chromium’s multi‑process layout. Important top‑level directories include src, package.json, and appveyor.yml. Additional directories such as script, tools, vendor, node_modules, out, dist, and external_binaries support building, testing, and packaging.

Application Project Structure

An Electron‑Vue project contains directories similar to a front‑end project: electron-vue: template configuration build: build scripts config: project configuration (e.g., port forwarding) node_modules: third‑party dependencies src: source code (the main development area) static: static assets index.html: the sole HTML entry page package.json: defines all dependencies

Within src there are two sub‑folders: main and renderer.

Main Process

The main folder contains index.js (the entry point for the Electron runtime and Webpack production build) and index.dev.js (used during development to load debugging tools). The main process creates BrowserWindow instances, each of which runs a separate renderer process.

Renderer Process

The renderer folder holds the front‑end code: assets (JS/CSS), components (custom Vue components), router (Vue‑router style routing), store/modules (Vuex modules), as well as App.vue and main.js. These files are bundled into the final distribution.

Process Communication

The main process communicates with each renderer via Electron’s IPC mechanisms. Each BrowserWindow runs in its own renderer process; destroying a window terminates its renderer.

Related Examples

electron‑vue‑cloud‑music

electron‑vue‑music

These repositories demonstrate real‑world Electron‑Vue applications.