Electron + vue build project

statement

I am also constantly learning and accumulating, please forgive me if there are deficiencies and misleading places in the article, and you can leave me a message to correct me. Hope to make progress together with you and build a harmonious learning environment.

background

Recently, the company wanted to develop a desktop application. Among the many cross-platform desktop frameworks, I chose electron. The main reason is that electron uses JavaScript, HTML and CSS to build cross-platform desktop applications. Compared with other desktop application frameworks, electron is easier to get started than the front end. Because most of the previous technology stack used Vue.js, I wanted to use vue + electron to quickly migrate the previous project.

method

After consulting a lot of information, I have summarized the following ways to "integrate".

• 1、electron-quick-start + vue
• 2、vue cli + electron
• 3、vue-electron
• 4、quasar + electron
• 5、vue-cli + vue-cli-plugin-electron-builder

一、electron-quick-start + vuecli

Provide a template electron-quick-start for quickly creating electron projects on the official website of electron

electron-quick-start

1. Clone the template to the local
2. Use npm install to install the package (electron installation is slow, follow-up update tutorial)
3. Use npm run start to start the project and test whether the installation is successful

4. Use vue-cli to create a vue project, and then pack it into the dist directory
5. Modify the path of the page loaded in main.js mainWindow.loadFile('dist/index.html')

Two, vue cli + electron

This method is actually very similar to the first method, which is to use the first method in reverse.
1. Use vue cli to create a vue project
2. Use npm install --save-dev electron electron-packager to install the package
3. In the root directory Add a render.js in
4. Modify the entry main of package.json: "render.js"
5. Add the startup command "electron:serve": "vue-cli-service electron:serve"
6. Load in render.js Change the path to mainWindow.loadURL(" http://localhost:8080")

Three, vue-electron

1. First, you need to install npm install -g vue-cli
  If you have installed vue-cli3.0+, please use npm install -g @vue/cli-init to pull the old template
2. Use vue init simulatedgreg/electron-vue my-project, configure relevant information

3. cd my-project to enter the project
4. yarn installation package
5. yarn run dev to start the project

4. quasar + electron

This method uses the quasar framework
1, npm install -g @quasar/cli to install quasar scaffolding
2, quasar create <folder_name> to create a project
3, quasar mode add electron to add electron mode
4, quasar build -m electron to package

5. vue-cli + vue-cli-plugin-electron-builder

This method uses the vue-cli framework
1. Use vue cli to create a vue project vue create project
2. After creating the project, use vue ui to add the plug-in vue-cli-plugin-electron-builder, and the project will be automatically generated as an electron project
3. Use npm run electron:serve to start the project