Build an electron project based on Vue from scratch

Build from scratch based on vue Of electron project

1. Demand background

• Recently, we are working for electron Prepare for new projects , This article will show you how to build from scratch vue Of electron Project steps .

2. Solution

• 1. take Vue introduce Electron The two schemes commonly used in the project are vue-cli-plugin-electron-builder and electron-vue. In terms of downloads , The download volume of the former is that of the latter 2-3 About times , And from the feedback of many developers, the former has less pit points than the latter , Another important reason is vue-cli-plugin-electron-builder The team is updated in a timely manner , and electron-vue Almost in a stop state , So this tutorial I choose is vue-cli-plugin-electron-builder plug-in unit .
• 2. The steps of creating are as follows ：

// 1. Global installation vue-cli:
npm install -g @vue/cli
// 2. establish vue project （ Pay attention to the choice vue2 perhaps vue3 Fine , Safe choice vue2）：
vue create my-electron
// 3. After creating the project, enter the project to install the plug-in （ Notice that it's not npm）：
cd my-electron
vue add vue-cli-plugin-electron-builder
// 4. Run the project （ After waiting for a moment, a pop-up window will appear ）：
npm run electron:serve
// 5. Packaging project （dist_electron Catalog ）：
npm run electron:build

• 3. At this point, the project is created successfully , Later, it can be developed according to the specific business