Electron: how to start application with Vue.js, Vuetify

Posted Jun 28, 20206 min read

  • Electron:A framework for creating native programs using web technologies such as JavaScript, HTML and CSS
  • Vue.js:A progressive framework for building user interfaces on the web front end
  • Vuetify:Vue.js Material Design component framework

After reading the above introduction, I also understand what this article is going to do:use Vue.js and Vuetify components to create native desktop applications based on Electron.

  • Environmental preparation

    • Visual Studio Code
    • Node.js
    • Yarn
    • Vue CLI
  • Create Vue.js application

  • Add Vuetify component

  • Add Electron build

  • Publish Electron application

  • Reference

  • Conclusion

Environmental preparation

Visual Studio Code

The recommended VS Code editing code, download address: https://code.visualstudio.com/ .

At the same time, the following extensions can be installed:

  • ESLint:code inspection
  • Prettier-Code formatter:Code formatter
  • Vetur:Vue code tool
  • Vue 2 Snippets:Vue code hints(optional)

Check the VS Code version:

$code -v
1.46.1
cd9ea6488829f560dc949a8b2fb789f3cdc05f5d
x64

Node.js

Node.js development environment, download address: https://nodejs.org/en/download/ .

It is recommended to choose Latest LTS Version because Electron v9 still uses Node.js v12.

Check the Node, NPM version:

$node -v
v12.18.1

$npm -v
6.14.5

Yarn

Yarn package management tool, compared to NPM:Fast, Reliable, Secure.

GitHub: https://github.com/yarnpkg/yarn

Install Yarn globally:

npm config set registry https://registry.npm.taobao.org
npm install -g yarn

Check the Yarn version:

$yarn -v
1.22.4

Vue CLI

Vue CLI is a standard tool developed by Vue.js.

GitHub: https://github.com/vuejs/vue-cli

Install Vue CLI globally:

yarn global add @vue/cli

Check the Vue CLI version:

$vue -V
@vue/cli 4.4.6

Create Vue.js application

vue create my-app

Follow the guide to configure the project as follows:

Vue CLI v4.4.6
? Please pick a preset:Manually select features
? Check the features needed for your project:Babel, TS, Router, Vuex, Linter
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript(required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router?(Requires proper server setup for index fallback in production) Yes
? Pick a linter/formatter config:Prettier
? Pick additional lint features:Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
? Pick the package manager to use when installing dependencies:Yarn

~/.vuerc will save some reusable presets:

$cat ~/.vuerc
{
  "useTaobaoRegistry":true,
  "packageManager":"yarn"
}

Run the application:

cd my-app
yarn serve

The browser opens http://localhost:8080/:

my_app.png

Add Vuetify component

Vuetify is the Material Design component library for Vue.js. You can also use other ones, such as Element.

GitHub: https://github.com/vuetifyjs/...

Add Vuetify:

cd my-app
vue add vuetify

preset select Default:

? Choose a preset:Default(recommended)

After adding, edit tsconfig.json:

{
  "compilerOptions":{
    ...
    "types":[
-"webpack-env"
+ "webpack-env",
+ "vuetify"
   ],
    ...
  },
  ...
}

Run the application:

yarn serve

The browser opens http://localhost:8080/:

my_app_vuetify.png

Editing tsconfig.json is to fix the following errors

ERROR in /Users/John/Codes/ikuokuo/start-electron/my-app/src/plugins/vuetify.ts(2,21):
2:21 Could not find a declaration file for module'vuetify/lib'.'/Users/John/Codes/ikuokuo/start-electron/my-app/node_modules/vuetify/lib/index.js' implicitly has an'any 'type.
  Try `npm install @types/vuetify` if it exists or add a new declaration(.d.ts) file containing `declare module'vuetify/lib';`
    1 | import Vue from "vue";
  > 2 | import Vuetify from "vuetify/lib";
      | ^
    3 |
    4 | Vue.use(Vuetify);
    5 |

Add Electron build

If you can build a website, you can build a desktop application. Electron is responsible for building the Web into a native desktop application.

To build the Vue.js application into an Electron application, now Vue CLI Plugin Electron Builder is enough.

First, specify the following node version:

yarn add @types/node@12 --dev

After that, add Electron Builder:

cd my-app
vue add electron-builder

Electron version selection 9.0.0:

? Choose Electron Version ^9.0.0

After adding, edit src/router/index.ts:

...
const router = new VueRouter({
-mode:"history",
+ mode:process.env.IS_ELECTRON? "hash":"history",
  base:process.env.BASE_URL,
  routes
});

export default router;

Run the application:

yarn electron:serve

It is now the desktop window:

my_app_electron.png

The command is defined in package.json:

{
  ...
  "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"
  },
  ...
}

yarn can be executed as follows:

$yarn lint
yarn run v1.22.4
$vue-cli-service lint
 DONE No lint errors found!
  Done in 3.17s.

yarn add @types/node@12 --dev is to fix the following errors

ERROR in /Users/John/Codes/ikuokuo/start-electron/my-app/node_modules/electron/electron.d.ts(1659,31):
1659:31 Cannot extend an interface'NodeJS.EventEmitter'. Did you mean'implements'?
...

Edit src/router/index.ts to correct the following warning

 WARN It is detected that you are using Vue Router. If you are using history mode, you must push the default route when the root component is loaded. Learn more at https://goo.gl/GM1xZG.

Launch Electron app

Vue uses the Electron Builder plug-in, so use this tool directly.

GitHub: https://github.com/electron-u...

yarn electron:build compile and release:

# Taobao mirror, domestic download Electron is faster
export ELECTRON_MIRROR="https://cdn.npm.taobao.org/dist/electron/"

# Disable signatures under macOS. To sign, see last reference
export CSC_IDENTITY_AUTO_DISCOVERY=false

cd my-app
yarn electron:build

The content is published under dist_electron/.

For example, macOS can see the packaged dmg:

my_app_dmg.png

Double-click dmg to try or install:

image

To modify the publishing format or content, see the Electron Builder documentation: https://www.electron.build/ .

export CSC_IDENTITY_AUTO_DISCOVERY=false is to avoid the following errors

...
    signing file=dist_electron/mac/my-app.app identityName=gdb_codesign identityHash=BC899AF362F80B3FDB39F966A1601E2AFAFA100B provisioningProfile=none

(node:10223) UnhandledPromiseRejectionWarning:Error:Command failed:codesign --sign BC899AF362F80B3FDB39F966A1601E2AFAFA100B --force --timestamp --options runtime --entitlements /Users/John/Workspace/Codes/start-electron/my-app/node_modules/app -builder-lib/templates/entitlements.mac.plist /Users/John/Workspace/Codes/start-electron/my-app/dist_electron/mac/my-app.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Helpers/chrome_crashpad_handler
error:The specified item could not be found in the keychain.
...
(node:10223) UnhandledPromiseRejectionWarning:Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict(see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode ).(rejection id:1)
(node:10223) [DEP0018]DeprecationWarning:Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

reference

Conclusion

Go coding!


Share practical tips and knowledge in Coding! Welcome attention and grow together!

GoCoding_WeChat.png