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

  • 相关阅读:
    Spring Boot 使用mysql数据库
    Nginx开启Gzip压缩大幅提高页面加载速度
    构建微服务:Spring boot 入门篇
    Python时间戳和日期的相互转换
    【Mongodb】aggregate限制返回字段
    MongoDB的skip,limit,sort执行顺序
    结对-结对四则运算生成器-最终程序
    C# List分页
    c# List的排序
    C#并行编程-Parallel
  • 原文地址:https://www.cnblogs.com/maomao93/p/14037257.html
Copyright © 2011-2022 走看看