Out of the box, electron + Vue element admin desktop client

Time:2020-9-24

Recently, there is the demand of C-terminal of background management system, so a set of open-end projects for out of the box are assembled according to the relatively good open source projects in the market

  • The front end is fully integratedvue-element-admin
  • Vue related

    • Vue:v2.6.11
    • Vue Router:v3.4.3
    • Vuex:v3.5.1
    • element-ui:v2.13.1
  • Client and server

    • electron:v10.1.2
    • node:v12.18.2

      • The node version of the native environment, which can be developed and packaged normally, is for reference only
  • Build and debug tools

    • electron-builder:v22.4.1
    • electron-devtools-installer:v3.0.0
  • Source address gate

Dependent installation

usenpmOrcnpmAs well as the mirror mode, there may be some problems in the dependent package, which may lead to package failure. See the following common problems

npm i
or
npm i --registry https://registry.npm.taobao.org
or 
cnpm i

Effect display

  • Run development mode start commandnpm run devOryarn dev 

Out of the box, electron + Vue element admin desktop client

  • usemockThe mode of local simulation data, login successfully and enterDashboardPage, effect on lineSite preview versionagreement

Out of the box, electron + Vue element admin desktop client

Package output

Windows and MacOS dual platform

Out of the box, electron + Vue element admin desktop client

Utilities

Vue Devtools

In the development mode, thesrc/main/index.dev.jsUse inelectron-devtools-installerInstallationvue-devtools, configured as follows:

// Install `vue-devtools`
require('electron').app.on('ready', () => {
  let installExtension = require('electron-devtools-installer');
  installExtension
    .default(installExtension.VUEJS_DEVTOOLS)
    .then(() => {})
    .catch(err => {
    console.log('Unable to install `vue-devtools`: \n', err);
  });
});

Out of the box, electron + Vue element admin desktop client

Code beautification

usevscodeRecommended plug-insprettier, common editor settingssettings.json 

{
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
}
  • Using shortcut keys to format code
Windows   
Shift + Alt + F

macOS   
Shift + Option + F

Save automatic format verification

  • installeslintRelated dependencies: the following dependencies are used in this project. They are not necessary. If you use them in daily life, you can choose them on demand
{
  "eslint": "^6.8.0",
  "eslint-config-standard": "^14.1.1",
  "eslint-friendly-formatter": "^4.0.1",
  "eslint-loader": "^4.0.0",
  "eslint-plugin-html": "^6.0.2",
  "eslint-plugin-import": "^2.20.2",
  "eslint-plugin-node": "^11.1.0",
  "eslint-plugin-promise": "^4.2.1",
  "eslint-plugin-standard": "^4.0.1",
  "eslint-plugin-vue": "^6.2.2"
}
  • eslintSimple configuration
module.exports = {
  "root": true,
  "env": {
    "node": true,
    "browser": true,
    "es6": true
  },
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "sourceType": "module",
    "parser": "babel-eslint",
    "allowImportExportEverywhere": true
  },
  "extends": ['plugin:vue/recommended', "eslint:recommended"],
  "plugins": [
    "vue"
  ],
  "rules": {
    "vue/max-attributes-per-line": ["error", {
      "singleline": 100
    }],
    "vue/html-self-closing": "off",
    "vue/singleline-html-element-content-newline": "off",
    "vue/no-v-html": "off",
    "vue/multiline-html-element-content-newline": "off",
    "no-unused-vars": "off",
    "no-async-promise-executor": "off",
    "no-useless-escape": "off",
    "no-prototype-builtins": "off",
    "no-undef": "off"
  }
}
  • vscodeThe editor sets the automatic format verification when saving
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true,
  "source.fixAll": true
}

common problem

Build failed

  • Build failed, dependent on moduleJSVMedium package.json OfdependenciesThe field content is[], change to{}, or remove this field directly

Mirroring Configuration

  • The download speed of electron is slow in the process of packaging. The download speed is improved by configuring the image. It has been added in the project
"build": {
  "electronDownload": {
   "mirror": "https://npm.taobao.org/mirrors/electron/"
 }
}

Installation package configuration

  • Under the windows platform, the installation fails due to the conflict of registry information when the installation package is repeatedly installed. It is recommended to add the package configurationguidCan solve this problem simply and roughly
"nsis": {
  "oneClick": false,
  "perMachine": false,
  "allowElevation": true,
  "allowToChangeInstallationDirectory": true,
  "runAfterFinish": false,
  "Guid": '', // avoid registry information conflict
  "deleteAppDataOnUninstall": true
},

summary

  • The project focuses on the front end,electronIt’s just packaging
  • Data adoptionmock, mainly simulate the interaction with the server
  • If it is in the form of a local service, you canelectronAdd your own during startupnodeService, shutting downelectronIn the process,nodeServices will also be killed, exception handling should be done well