Electronic + Vue desktop gadget (I)

Suddenly interested in desktop applications, I learned that a small thing was written on the following electron. Let's see the effect first:

Effect on desktop:

Can freely adjust the position and zoom in and out:

At present, only the clock plug-in is implemented. Other plug-ins will be updated later when free. It will never be fixed next time! You see, I've written the plus sign ovo
The desired effect is that you can freely add small components to the main panel, and the position of small components can be adjusted freely
(the black frame of the clock can be dragged to adjust the position)

Components that may be added later

1. todolist
2. calendar
3. music player
4. A proverb every day
5. weather forecast
6. Meitu rotation
7. The comment area tells me ~, the functions mentioned in the comment area will be implemented first (if implemented)

Installation package

At present, electronic package is used for application packaging without installation. The exe file can be opened directly in window

Technical realization

Technology used

1. vue.js
2. electron

Project construction

1. vue2 project construction, this is just fine~

npm i -g @vue/cli
vue create demo

1. Reconstruction project

npm i electron -S
npm i electron-package -g

Create a new main. In the project root directory js:

// main.js

const { app, BrowserWindow, screen, ipcMain, Menu, Tray } = require('electron')
const path = require('path')
let mainWindow
function createWindow () {
  const width = screen.getPrimaryDisplay().workAreaSize.width
  const height = screen.getPrimaryDisplay().workAreaSize.height
  mainWindow = new BrowserWindow({
    width: 700,
    height: 300,
    x: width - 700,
    y: height - 300,
    alwaysOnTop: true,
    maximizable: false,
    // transparent: true,
    skipTaskbar: true,
    minHeight: 200,
    minWidth: 300,
    frame: false,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      webSecurity: false,
      enableRemoteModule: true
    }
  })
  //   mainWindow.loadURL('http://127.0.0.1:8080')
  mainWindow.loadFile('dist/index.html')
}
let tray = null
app.whenReady().then(() => {
  createWindow()
  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
  tray = new Tray(path.join(__dirname, '/logo.ico'))
  const contextMenu = Menu.buildFromTemplate([
    { label: 'Item1', type: 'radio' },
    { label: 'Item2', type: 'radio' },
    { label: 'Item3', type: 'radio', checked: true },
    { label: 'Item4', type: 'radio' }
  ])
  tray.on('click', () => {
    mainWindow.show()
  })
  tray.setToolTip('This is my application.')
  tray.setContextMenu(contextMenu)
})
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

ipcMain.on('min', e => {
  mainWindow.hide()
})
ipcMain.on('close', e => app.exit())

Then modify the package json:

{
  "name": "mx_panel",
  "version": "0.1.0",
  "private": true,
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "eb": "electron-packager . ming --platform=win32 --arch=x64 --overwrite"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "electron": "^13.1.7",
    "electron-builder": "^22.11.7",
    "is-electron": "^2.2.0",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vue-electron": "^1.0.6",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^6.2.2",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.0.1",
    "vue-template-compiler": "^2.6.11"
  }
}

Mainly refer to script and main

Then create a new Vue. Exe in the root directory config. js:

module.exports = {
  publicPath: './'
}

At this stage, the project structure is as follows:

How to run

development environment

The development environment puts main JS content:

  //   mainWindow.loadURL('http://127.0.0.1:8080')
  mainWindow.loadFile('dist/index.html')
Change to -> 
  mainWindow.loadURL('http://127.0.0.1:8080')
  // mainWindow.loadFile('dist/index.html')

In fact, you can use environment variables to distinguish them. You can modify them next time~
Then send and execute scripts respectively:

npm run build  // This step is to package vue projects as static files
npm start // Just run it directly

production environment

1. Package vue project npm run build first
2. Run npm run eb
3. The generated folder is the folder mentioned earlier, and then double-click Ming Exe to run

PS: the content in src is the content of a normal vue project, only a few API s provided by electron have been adjusted

The rest must be done next time~~
If I like it, I can pay more attention and comment ~ I may be lazy if no one urges me

If you need code and compressed packages, please also comment. If someone wants me to put them on git or alicloud ~ I'm lazy if there's no one