Set up a simple electron desktop application with Vue

1. The introduction of electron

2. Tool Introduction

3. Practical effect and steps

1) A simple Electron desktop application is directed at Hello World! The start of the

Above is the Electron desktop application made super fast using electron- Vue.

2) Installed components

vue init simulatedgreg/electron-vue white-electron-first
Copy the code

3) Build Tool Choice?

The more advanced construction tool of choice is the electron builder

In fact, debugging, development can directly choose the electron builder, it supports hot update, like most of the vue-CLI built projects currently in use save and update.

If it is a simple packaging application, just choose the electron packager, which is relatively simple.

Reference links: electron.org.cn/vue/buildin…

4. The next step

> NPM I // package installation > NPM run dev // The test environment is runningCopy the code

You’re ready for a preliminary Electron desktop application

4. How to make the website into ELectron app only?

1) Website page

To Desktop Applications

2) If you’re familiar with Node, start a Node application, usually nodeapp.js

Converting the Node application to a Electron application is also very simple, we just replace the Node runtime with the Electron runtime. Package. The json as follows

{
    "script": {
        "electron": "electron build/electron.js",}}Copy the code

How should this file be written? This file is basically a reference to the mature project, generally simple like:

// electron.js"
const {app, BrowserWindow} = require('electron')
  
  // Keep a global reference of the window object, if you don't, the window will
  // be closed automatically when the JavaScript object is garbage collected.
  let win
  
  function createWindow () {
    // Create a browser window.
    win = new BrowserWindow({width: 800.height: 600})
  
    // Then load the app's index.html.
    win.loadFile('index.html')
  
    // Open the developer tool
    win.webContents.openDevTools()
  
    // This event is raised when the window is closed.
    win.on('closed', () = > {// Unreference the window object. If your application supports multiple Windows,
      // It is common to store multiple window objects in an array,
      // In the meantime, you should delete the corresponding element.
      win = null})}// Electron will be initialized and ready
  // This function is called when the browser window is created.
  // Parts of the API can only be used after the ready event is triggered.
  app.on('ready', createWindow)
  
  Exit when all Windows are closed.
  app.on('window-all-closed', () = > {// On macOS, unless the user explicitly exits with Cmd + Q,
    // Otherwise, most apps and their menu bar remain active.
    if(process.platform ! = ='darwin') {
      app.quit()
    }
  })
  
  app.on('activate', () = > {// On macOS, when you click the Dock icon and no other Windows open,
    // Usually a window is recreated in the application.
    if (win === null) {
      createWindow()
    }
  })
  
  // In this file, you can write the rest of the application's main process code.
  // It can also be split into several files and imported with require.

Copy the code

There’s a bit of win.loadfile (‘index.html’) in the code above, which means your entry page is index.html, just like hello World we launched with the electron vue template.

3. Our View application is essentially a SPA page, packaged with the entry index.html file.

After the dist file is first built by NPM run build, the index.html file in the electron. Js directory is replaced by the HTML file in the dist directory. The following problem occurs: The packed CSS and JS files cannot be accessed.

According to the document is solvable blog.csdn.net/m0_37604745…

The webpack used in our project could not find the above configuration due to different application versions, so we directly changed the CSS and JS reference paths in index.html.

Since we must visit and log in the system before loading the service, it is not possible to run a static front-end project without HA.

Yet it was done.

It’s actually quite simple: just change this code to

// Then load the app's index.html.
win.loadFile('index.html')


// To the address of the local service

win.loadUrl('http://localhost:4000')
Copy the code

So far this is the easiest way to package an already applied electron should. (smile)

---

References:

www.qcode.in/convert-vue…

Electronjs.org/docs/tutori…

Newsn.net/say/electro…– From Uncle Su NanThe program is so clever”The blog

www.jianshu.com/p/6b3276319…

www.qcode.in/convert-vue…