Electron is a technology framework for building cross-platform applications using HTML, CSS, and JavaScript based on Chromium and Node.js, compatible with Mac, Windows, and Linux. Although B/S is the mainstream of current development, C/S still has a large market demand. Limited by the sandbox of the browser, Web applications cannot meet the requirements in some scenarios, while desktop applications can read and write local files and invoke more system resources. In addition, with the advantages of low cost and high efficiency of Web development, this method is becoming more and more popular among developers.

This article teaches you how to use Electron11 and VUE-CLI3 step by step to build desktop applications while keeping the habit of developing Web applications completely with VUE.

This article does not cover the development of Electron and VUE tutorial, only for the purpose of realizing the combination of the two. For in-depth study of Electron and VUE, please visit the official website:

Electron: electronjs.org/

vue: cn.vuejs.org/

vue-cli: cli.vuejs.org/zh/

stylus: stylus-lang.com/

1 Creating a Project

1.1 Using CNPM to speed up download Sometimes the download speed of NPM is very slow. You can install CNPM and download it from domestic Taobao image. Run the following command:

npm install -g cnpm --registry=https://registry.npm.taobao.org
Copy the code

In the future, NPM is directly replaced with CNPM.

1.2 Why not use SimulatedGREG/ electronic-vue

SimulatedGREG/ electric-Vue has not been updated for a long time, and the resulting engineering structure is not vuE-CLI3. So give it up.

1.3 Installing or Upgrading VUE-CLI3

Run the following command to check the vue-CLI version:

vue -V
Copy the code

For this article, I used version 4.5.0.

If you are using vuE-CLI2.x or earlier, uninstall:

cnpm uninstall vue-cli -g
Copy the code

※ Note: VuE-CLI3 uses a new NPM package name, which is different from the old version. If vuE-CLI3 has not been installed, run the following command to install it:

cnpm install @vue/cli -g
Copy the code

If you have vuE-CLI3 installed, but not the latest version, you can run the following command to upgrade:

(I used CNPM here and did not complete the upgrade, so I used NPM)

npm update @vue/cli -g
Copy the code

1.4 Creating a VUE Project Run the following command to create a VUE project in your favorite directory:

(Name the project here as electronic-vue)

Vue create electron- Vue presents the following options (skip this section if you are familiar with this step) :

Vue CLI v4.5.0? Please pick a preset: (Use arrow keys) default (babel, eslint) > Manually select featuresCopy the code

Select Manually select features (for custom installation, select vue3.0).

? Check the features needed for your project: (Press <space> to select, <a> to t oggle all, < I > to Invert Selection) ❯◉ Babel Infection infection TypeScript infection Progressive Web App (PWA) Support ◉ Router ◉ Vuex ◉ CSS pre-processors ◉ Linter/Formatter Infection Unit Testing infection of E2E TestingCopy the code

Common modules are selected here. Select them based on actual requirements. (Optionally typescript)

? Use history mode for router? (Requires proper server setup for index fallback 
in production) (Y/n)  n
Copy the code

If router is selected, the history mode is asked to be used.

Vue-router uses hash mode by default. The router uses the HASH of a URL to simulate a complete URL. When the URL changes, the page does not reload. If you use history, the URL looks better as a normal URL, such as yoursite.com/user/id. But it also needs background configuration support.

Here we choose n.

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
by default): (Use arrow keys)
  Sass/SCSS (with dart-sass) 
  Sass/SCSS (with node-sass) 
❯ Stylus
Copy the code

Select the CSS preprocessor module; here we use “Stylus”.

? Pick a linter / formatter config: (Use arrow keys)
  ESLint with error prevention only 
  ESLint + Airbnb config 
❯ ESLint + Standard config 
  ESLint + Prettier
Copy the code

Select the configuration of the ESLint code format checker and select ESLint + Standard Config for Standard configuration.

? Pick additional lint features: (Press <space> to Select, <a> to Toggle all, < I > to Invert selection) ❯◉ Lint on save infection of Lint and fix on commitCopy the code

Line on save means that when saving code, a formatting check is performed.

Lint and fix on commit means that formatting is automatically corrected at Git commit time.

Select only “Lint on Save” here.

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? 
  In dedicated config files 
❯ In package.json
Copy the code

Where do I put configuration files like Babel, postCSS, esLint?

In dedicated Config files indicates an independent file

In package.json means to put it In package.json

Select “In package.json” here.

	? Save this as a preset for future projects? (y/N) N
Copy the code

Do you reserve these Settings for future projects? Choose “N”.

Then wait patiently for the project installation to complete.

1.5 Automatically Installing the Electron sensor

※ Note: This process may require scientific Internet access. Since downloading directly from foreign images is slow, it may take a long time to enter the project root directory and execute:

vue add electron-builder
Copy the code

Next comes the configuration options:

? Choose Electron Version (Use arrow keys)
❯ ^11.0.0
Copy the code

Select the Electron version. Select the “^ 11.0.0”.

Then wait patiently for the installation to complete. If an error interrupts, repeat this step.

After installation, background.js is automatically generated in the SRC directory and package.json is modified.

{"name": "electron-vue", "version": "0.1.0", "private": true, "scripts": {"serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "electron:build": "vue-cli-service electron:build", "electron:serve": "vue-cli-service electron:serve", "postinstall": "electron-builder install-app-deps", "postuninstall": "electron-builder install-app-deps" }, "main": "Background. Js", "dependencies" : {" core - js ":" ^ 3.6.5 ", "vue" : "^ 3.0.0", "vue - the router" : "^ 4.0.0-0" and "vuex" : "^4.0.0-0"}, "devDependencies": {"@types/ electronic-devtools-installer ": "^2.2.0", "@typescript /eslint-plugin": "^ 2.33.0", "@ typescript eslint/parser" : "^ 2.33.0", "@ vue/cli - plugin - Babel" : "~ 4.5.0", "@ vue/cli - plugin - eslint" : "~ 4.5.0 @", "vue/cli - plugin - the router" : "~ 4.5.0", "@ vue/cli - plugin - typescript" : "~ 4.5.0", "@ vue/cli - plugin - vuex" : "~ 4.5.0 @", "vue/cli - service" : "~ 4.5.0", "@ vue/compiler - SFC" : "^ 3.0.0", "@ vue/eslint - config - standard" : "^ 5.1.2," "@ vue/eslint - config - typescript" : "^ 5.0.2", "electron" : "^ 11.0.0", "electron - devtools - installer" : "^ 3.1.0 eslint", ""," ^ 6.7.2 ", "eslint - plugin - import" : "^ 2.20.2", "eslint - plugin - node" : "^ 11.1.0 eslint - plugin -", "promise", "^ 2", "eslint - plugin - standard" : "^ 4.0.0", "eslint - plugin - vue" : "^ 7.0.0-0", "node - sass" : "^ 4.12.0", "sass - loader" : "^ 8.0.2", "typescript" : "~ 3.9.3", "vue - cli - plugin - electron - builder" : "~ 2.0.0 - rc. 6"}}Copy the code

SRC generates background.js or background.ts

1.6 Compile and Start the APP

Run the following command to start compiling the APP and start the development environment APP:

npm run electron:serve
Copy the code

Once compiled successfully, the APP for the development environment will appear.

Then according to the electron document related development www.electronjs.org/