zoukankan      html  css  js  c++  java
  • 初尝electron+vue

    想全局装一下vue-cli,已经装过的跳过此步骤

    npm install -g @vue/cli
    或者
    yarn global add @vue/cli
    

    新建一个vue项目

    vue create my-electron
    

    vue需要与electron集成,这里社区已经有比较成熟的vue插件了

    vue add electron-builder
    

    然后你会发现在项目src目录下多出一个background.js文件

    'use strict'
    
    import { app, protocol, BrowserWindow } from 'electron'
    import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
    import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
    const isDevelopment = process.env.NODE_ENV !== 'production'
    
    protocol.registerSchemesAsPrivileged([
      { scheme: 'app', privileges: { secure: true, standard: true } }
    ])
    async function createWindow() {
      const win = new BrowserWindow({//窗口默认大小和一些配置项
         800,
        height: 600,
        webPreferences: { //启用nodejs环境(electron升级到5.0之后默认关闭)
          nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION 
        }
      })
    
      if (process.env.WEBPACK_DEV_SERVER_URL) {
        await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
        if (!process.env.IS_TEST) win.webContents.openDevTools()//是否打开控制台
      } else {
        createProtocol('app')
        win.loadURL('app://./index.html')//打开某个链接或者文件
      }
    }
    app.on('window-all-closed', () => {
      if (process.platform !== 'darwin') {
        app.quit()//杀死进程,也就是关闭窗口
      }
    })
    
    app.on('activate', () => {//激活
      if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
    app.on('ready', async () => {
      if (isDevelopment && !process.env.IS_TEST) {
        try {
          await installExtension(VUEJS_DEVTOOLS)
        } catch (e) {
          console.error('Vue Devtools failed to install:', e.toString())
        }
      }
      createWindow()
    })
    
    // Exit cleanly on request from parent process in development mode.
    if (isDevelopment) {
      if (process.platform === 'win32') {
        process.on('message', (data) => {
          if (data === 'graceful-exit') {
            app.quit()
          }
        })
      } else {
        process.on('SIGTERM', () => {
          app.quit()
        })
      }
    }  

    我使用的是electron 8.0版本,后续版本不一样,可能会存在一定的差异

    具体的请查看https://www.electronjs.org

  • 相关阅读:
    Maven关于web.xml中Servlet和Servlet映射的问题
    intellij idea的Maven项目运行报程序包找不到的错误
    修改Maven项目默认JDK版本
    刷题15. 3Sum
    刷题11. Container With Most Water
    刷题10. Regular Expression Matching
    刷题5. Longest Palindromic Substring
    刷题4. Median of Two Sorted Arrays
    刷题3. Longest Substring Without Repeating Characters
    刷题2. Add Two Numbers
  • 原文地址:https://www.cnblogs.com/maomao93/p/14037257.html
Copyright © 2011-2022 走看看