Continuing from the above, we can now build and package desktop applications. Now that the foundation work is complete, let’s happily start to fake a desktop wechat.

1. Understand the directory structure

├─ public // ├─ SRC // source directory │ ├─ assets // Public Resources Directory │ ├─ SRC // source directory │ ├─ assets // │ │ ├ ─ ─ the components / / component ├ ─ ─ the router / / routing │ │ │ └ ─ ─ index. The js / / routing configuration file │ ├ ─ ─ store / / vuex │ │ │ └ ─ ─ index. The js / / │ ├─ ├─ ├─ vue │ │ ├─ ├─ vue │ │ ├─ ├─ vue │ │ ├─ ├─ vue │ │ │ └ ─ ─ the Load. The vue login / / entrance master file │ │ └ ─ ─ App. Vue / / vue entry documents │ │ └ ─ ─ background. The js / / main process │ │ └ ─ ─ the main, js / / entry documents ├ ─ ─ Package. json // Config file ├─ Vue.config.js // Vue config file ├─ babel.config.js // Don't do itCopy the code

2. About the main process and rendering process

In this project, background.js is the main process, and all. Vue pages are called renderers

3. Introduce electron into vUE

4. Main process description

// Initialize app.on('ready', async () => {createWindow()}) After initializing the application, execute createWindow(). Most of the operations on the application should be placed in createWindow.'window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if(process.platform ! = ='darwin') {
    app.quit()
  }
})
Copy the code

5. For more information about the ELECTRON API, please refer to my other article:

Vue – electron: juejin. Cn/post / 684490…

Build your own desktop wechat using Vue + Electron from 0 to 1

Juejin. Cn/post / 684490…

vue-electron(API)

Juejin. Cn/post / 684490…

Making project

Github.com/cgq001/vue-…