How to gracefully create an Electron + Vue3 + Vite project

Dec 7, 2023#Node.js #Vue #Electron100

AI Translation

This post is translated from Chinese into English through AI.View Original

AI-generated summary

The text discusses the process of creating an Electron project using Vite. It mentions that there are two approaches, one of which results in numerous errors while the other is more successful. The correct approach involves using the command "yarn create @quick-start/electron" and selecting options such as TypeScript, Electron updater plugin, and enabling Electron download mirror proxy. It also suggests configuring the Electron mirror for better performance in a Chinese network environment. The text concludes by recommending the use of "@quick-start/electron" for faster project creation.

Incorrect Example#

First, create a Vite project

yarn create vite

Then add Electron dependencies

yarn add --dev electron concurrently cross-env electron-builder wait-on

After that, there will be endless errors.

Correct Example#

yarn create @quick-start/electron

There will be several options in the middle.

? Add TypeScript? » No / Yes   
Do you want to use TypeScript? If you prefer TypeScript, choose Yes.
? Add Electron updater plugin? » No / Yes 
Do you want to add the Electron updater plugin? Choose Yes.
? Enable Electron download mirror proxy? » No / Yes
Do you want to enable the Electron download mirror proxy? In the Chinese network environment, it is strongly recommended to choose Yes.

Of course, in the Chinese environment, you can set the Electron mirror through the configuration file.

touch .npmrc && echo "electron.mirror=https://npm.taobao.org/mirrors/electron/" > .npmrc

After creating it, just run yarn to install the dependencies and yarn dev to run it.

Conclusion#

It was really a roller coaster to create this project, and in the end, it was concluded that using @quick-start/electron to create the project is indeed fast.