Build the Electron+Vue3 development environment – Zun small station

I wrote a semi-finished desktop application using electron vue, but based on Vue2. Recently, I wanted to rewrite the desktop application, and wanted to run on Vue3+TypeScript, so this article summarizes the specific construction process.

Vue Cli

Vue CLI has a plug-in called VUe-cli-plugin-electron – Builder, which can be very convenient to build the electron environment.

npm i @vue/cli -g
Copy the code
vue create my-app
Copy the code

Select dependencies based on your project’s requirements (e.g. Babel, TS, Vuex, etc.)

Vue CLI v5.0.3? Please pick a preset: Manually select features ? Check the features neededfor your project: Babel, TS, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? No


Vue CLI v5.0.3
✨  Creating project in F:\Electron\my-app.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while.Copy the code

Install the vue – cli – plugin – electron – builder

Vue CLI Plugin Electron Builder (nklayman.github.io)

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

You will be prompted to select the latest version of Electron during installation

Start the project

npm run electron:serve
Copy the code

Reference article: Electron + Vue3 Developing a cross-platform desktop application [from project setup to packaging] – Juejin (cn)

pit

error  in ./src/background.ts

Module build failed (from ./node_modules/ts-loader/index.js):
TypeError: loaderContext.getOptions is not a function
Copy the code

When I tested the @vue/cli-plugin-typescript version of ~5.0.0, it caused a compilation type error and changed package.json to “@vue/cli-plugin-typescript”: “~4.5.15”, will run normally (but will still have a DeprecationWarning)

Vite

The above is developed using Vue Cli scaffolding. If you want to use Vite, you need to build your project using Vite and then install the electron dependencies.

This is not as the focus, because a lot of big guys have written ready-made templates, can learn by themselves, paste a few read a few articles

Vite + Vue 3 + electron + TypeScript – DEV Community

The most cutting-edge cross-platform development option of 2021! Vue3 + Vite + Electron – Zhihu (zhihu.com)

Ready-made templates

All are searchable on Github

  • Viet-React-electron

  • Electron – vue-Vite (recommended)

  • vite-electron-builder

Electron – Vite scaffolding (recommended)

You can also use scaffolding, like React and Vue, which essentially create the first two templates above

npm create electron-vite
Copy the code

conclusion

Since Electron is essentially a browser, whether it is Vue or React development, there is a corresponding debugging address in traditional web development, such as http://127.0.0.1:3000. However, Electron simply opens a browser and performs the same operations as normal web development. It also provides the desktop API for use.

At present, the two major Vue+Electron scaffolding in the community are mainly electric-Vue and vuE-cli-plugin-electric-Builder. More Electron open source projects follow the project structure of the former, such as the template above.

The above is the process I used Vue3 to develop Electron environment construction. Generally speaking, except for the large application volume, Electron is very friendly for front-end developers. Now that the environment is configured, we can start to write desktop applications.