Electron: How do YOU start with vue.js, Vuetify

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

After reading the above, you know what this article is about: using vue.js and Vuetify components to create a native desktop application based on Electron.

Environment to prepare
- Visual Studio Code
- Node.js
- Yarn
- Vue CLI
Create the vue.js application
Add a Vuetify component
Add Electron build
Release Electron application
reference
conclusion

Environment to prepare

Visual Studio Code

It is recommended to use THE VS Code editing Code, download: code.visualStudio.com/.

The following extensions can also be installed:

ESLint: Code checking
Prettier – Code formatter: Code formatting
Vetur: Vue code tool
Vue 2 Snippets: Vue Code Tips (optional)

View VS Code version:

1.46.1 $code - vcd9ea6488829f560dc949a8b2fb789f3cdc05f5d
x64
Copy the code

Node.js

The Node.js development environment can be downloaded from nodejs.org/en/download… .

It is recommended to select Latest LTS Version because the Node.js V12 is still used in Electron V9.

View Node, NPM version:

$node -v v12.18.1 $NPM -v 6.14.5Copy the code

Yarn

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

Making: github.com/yarnpkg/yar…

Install Yarn globally:

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

Viewing the Yarn version:

1.22.4 $yarn - vCopy the code

Vue CLI

Vue CLI is a standard tool developed in vue.js.

Making: github.com/vuejs/vue-c…

Install Vue CLI globally:

yarn global add @vue/cli
Copy the code

Check the Vue CLI version:

$vue -v @vue/cli 4.4.6Copy the code

Create the vue.js application

vue create my-app
Copy the code

Follow the instructions to perform project configuration as follows:

Vue CLI v4.4.6? Please pick a preset: Manually select features ? Check the features neededfor 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
Copy the code

~/. Vuerc will save some reusable preset:

$ cat ~/.vuerc
{
  "useTaobaoRegistry": true."packageManager": "yarn"
}
Copy the code

To run the application:

cd my-app
yarn serve
Copy the code

Open your browser to http://localhost:8080/ :

Add a Vuetify component

Vuetify is a Material Design component library for Vue.js. You can also use other alternatives, such as Element, etc.

Making: github.com/vuetifyjs/v…

Add Vuetify:

cd my-app
vue add vuetify
Copy the code

Preset select Default:

? Choose a preset: Default (recommended)
Copy the code

After the addition, edit tsconfig.json:

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

To run the application:

yarn serve
Copy the code

Open your browser to http://localhost:8080/ :

The editor`tsconfig.json`To correct the following error

ERROR in/ Users/John/Codes/ikuokuo/start - electron/my - app/SRC/plugins/vuetify ts, 21 (2) : so she Could not find a declaration filefor 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 |
Copy the code

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 the Electron application, now use the Vue CLI Plugin Electron Builder.

First, specify the node version:

yarn add @types/node@12 --dev
Copy the code

After that, add the Electron Builder:

cd my-app
vue add electron-builder
Copy the code

Select Electron version 9.0.0:

? Choose Electron Version ^ 9.0.0Copy the code

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;
Copy the code

To run the application:

yarn electron:serve
Copy the code

Now it’s the desktop window:

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" }, ... }Copy the code

Yarn Run the following command:

$yarn lint yarn run v1.22.4 $vue-cli-service lint DONE No lint errors found! ✨ Donein3.17 s.Copy the code

`yarn add @types/node@12 --dev`To correct the following error

ERROR in/ Users/John/Codes/ikuokuo/start - electron/my - app/node_modules/electron/electron, which s, 1659, 31: 1659:31 Cannot extend an interface'NodeJS.EventEmitter'. Did you mean 'implements'? .Copy the code

The editor`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 .
Copy the code

Release Electron application

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

Making: github.com/electron-us…

Yarn electron:build

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

# Disable signature under macOS. For a signature, see the end
export CSC_IDENTITY_AUTO_DISCOVERY=false

cd my-app
yarn electron:build
Copy the code

Dist_electron/is the content to be published.

For example, macOS can see packaged DMG:

Double-click DMG to try or install:

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

`export CSC_IDENTITY_AUTO_DISCOVERY=false`To avoid the following mistakes

. • signing file = dist_electron/MAC/my - app. The 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 foundin 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.
Copy the code

reference

electron-app
start-electron
Electron
- Application Distribution
Electron Builder
- Code Signing
- Notarize app for macOS

conclusion

Go coding!

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

Electron: How do YOU start with vue.js, Vuetify

Environment to prepare

Visual Studio Code

Node.js

Yarn

Vue CLI

Create the vue.js application

Add a Vuetify component

The editortsconfig.jsonTo correct the following error

Add Electron build

yarn add @types/node@12 --devTo correct the following error

The editorsrc/router/index.tsTo correct the following warning

Release Electron application

export CSC_IDENTITY_AUTO_DISCOVERY=falseTo avoid the following mistakes

reference

conclusion

Related Posts

GitHub + CircleCI sustainable build blog

HTTP caching (never learn to forget)

How to determine the data type of a variable in js?

The editor`tsconfig.json`To correct the following error

`yarn add @types/node@12 --dev`To correct the following error

The editor`src/router/index.ts`To correct the following warning

`export CSC_IDENTITY_AUTO_DISCOVERY=false`To avoid the following mistakes