当前位置：首页 > 技术分析 > 正文内容

Electron学习2 使用Electron-vue和Vuetify UI库

ruisui882个月前 (03-01)技术分析8


一、Electron-vue简介

Electron-Vue 是一个使用 Vue.js 构建跨平台桌面应用程序的框架。它基于 Electron，一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序的开源库。

Electron-Vue 结合了 Vue.js 的灵活性和 Electron 的跨平台能力，使得开发桌面应用程序变得更加简单和高效。以下是一些 Electron-Vue 的主要特点：

  1. 使用 Vue.js 构建应用程序：Electron-Vue 提供了基于 Vue.js 的开发体验，你可以使用 Vue.js 的语法和组件系统来构建桌面应用程序。
  2. 跨平台支持：使用 Electron-Vue 构建的应用程序可以在 macOS、Windows 和 Linux 上运行，无需为每个平台单独构建。
  3. 内置的 Electron 支持：Electron-Vue 内置了 Electron，你可以直接使用 Electron 提供的功能和 API，如窗口管理、本地文件访问等。
  4. 使用 npm/yarn 管理依赖：Electron-Vue 使用 npm 或 yarn 管理依赖，你可以使用熟悉的包管理器来安装和管理应用程序的依赖。
  5. 使用 Vue CLI 进行构建：Electron-Vue 集成了 Vue CLI，你可以使用 Vue CLI 提供的功能来构建和管理应用程序。
  6. 使用 webpack 进行打包：Electron-Vue 使用 webpack 进行打包，你可以使用 webpack 的配置来自定义应用程序的打包过程。

二、安装yarn

本系列将使用yarn作为包管理工具。 安装命令：

npm install -g yarn 
yarn --version

设置源：

yarn config set registry https://registry.npm.taobao.org -g 
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

三、创建Electron-vue项目

1. 关于 electron-builder

electron-builder是一个用于构建和打包Electron应用程序的强大工具。它允许将你的Electron应用程序打包成可执行文件，以便在不同平台上分发和部署。以下是关于electron-builder的详细介绍：

  1. 多平台支持：electron-builder支持将Electron应用程序构建为各种操作系统的本机可执行文件，包括Windows、macOS和Linux。这意味着你可以一次构建适用于多个操作系统的应用程序。
  2. 自动化打包：electron-builder提供了一个自动化的构建过程，使得将你的应用程序打包成可分发的文件变得简单。你只需要准备好你的应用程序代码和一些配置，然后electron-builder将负责执行构建、打包和部署。
  3. 丰富的配置选项：electron-builder允许你通过配置文件来定义构建过程中的各种设置，如应用程序的元数据、文件结构、图标、版本信息、签名等。这使得你可以轻松地定制构建过程以满足你的需求。
  4. 自动更新：electron-builder支持自动更新功能，可以让你的应用程序在用户打开应用时检查并自动下载新版本。这有助于保持用户体验和及时修复错误。
  5. 集成第三方依赖：electron-builder允许你在构建过程中集成第三方依赖，以确保你的应用程序在用户的计算机上能够正常运行。它可以自动安装系统依赖并处理应用程序的依赖关系。
  6. 支持多种格式：electron-builder支持将Electron应用程序打包成多种格式，包括可执行文件、安装程序、归档文件等。这使得你可以根据需要选择不同的分发方式。
  7. 集成于开发工作流：electron-builder可以与常见的开发工作流集成，如npm脚本、CI/CD流程等，使构建和部署过程更加无缝。

下面会使用electron-builder 来构建程序。

2. 安装脚手架

# 安装 vue-cli 和 脚手架样板代码
npm install -g vue-cli
vue create my-electron
# 安装依赖并运行你的程序
cd my-electron
vue add electron-builder

3. 运行

npm run electron:serve
# 或 yarn
yarn # 或者 npm install
yarn run electron:serve

4. 打包应用程序

yarn run electron:build

四、background.js说明


在这里插入图片描述


background.js 是 Electron 应用程序的主要后台脚本，它在应用程序启动时负责创建主窗口和处理应用程序的生命周期事件。

1. 引入模块和依赖：

import { app, protocol, BrowserWindow } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, { VUEJS3_DEVTOOLS } from 'electron-devtools-installer'

这里引入了 Electron 的核心模块以及一些第三方依赖。app 模块用于管理应用程序的生命周期，protocol 模块用于注册 URL 协议，BrowserWindow 用于创建浏览器窗口。
vue-cli-plugin-electron-builder/lib 中的 createProtocol 用于创建自定义协议，而
electron-devtools-installer 则用于安装 Electron 开发工具。

2. 注册协议：

protocol.registerSchemesAsPrivileged([
  { scheme: 'app', privileges: { secure: true, standard: true } }
])

这里注册了一个自定义的协议 'app'，用于在应用程序中加载本地资源。

3. 创建窗口函数：

async function createWindow() {
  // 创建浏览器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !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')
  }
}

这个函数负责创建浏览器窗口，设置窗口的初始大小和 WebPreferences。在开发模式下，会加载开发服务器的 URL，并在需要时打开开发工具。在生产模式下，会通过自定义协议加载应用程序的主页面。

4. 生命周期事件和监听器：

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(VUEJS3_DEVTOOLS)
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
  createWindow()
})

if (isDevelopment) {
  if (process.platform === 'win32') {
    process.on('message', (data) => {
      if (data === 'graceful-exit') {
        app.quit()
      }
    })
  } else {
    process.on('SIGTERM', () => {
      app.quit()
    })
  }
}

这一部分设置了应用程序的生命周期事件和相应的监听器。 - window-all-closed 事件在所有窗口关闭时触发，根据平台决定是否退出应用程序。 - activate 事件在应用程序激活时触发，如果没有窗口存在，则创建一个新窗口。 - ready 事件在应用程序初始化完成时触发，如果是开发模式且不是测试环境，会尝试安装 Vue Devtools 插件。最后，根据开发模式和平台不同，设置退出应用程序的条件。

五、使用UI库 Vuetify

1. 文档地址：

https://vuetifyjs.com/en/getting-started/installation/

2. 安装

yarn add vuetify

3. 设置

（1）修改main.js如下：

import { createApp } from 'vue'
import App from './App.vue'

// Vuetify
import 'vuetify/styles'
import vuetify from './plugins/vuetify'


createApp(App).use(vuetify).mount('#app')

使用示例： HelloWorld.vue

（2) src/plugins/vuetify.js内容

// Styles
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
import { VBtn } from 'vuetify/components/VBtn'
import 'vuetify/dist/vuetify.min.css';

// Vuetify
import { createVuetify } from 'vuetify'


export default createVuetify(
    {
        aliases: {
            VBtnPrimary: VBtn,
        },
        defaults: {
            VBtnPrimary: {
                class: ['v-btn--primary', 'text-none'],
            },
            VBtn: { variant: 'flat' }
        }
    }
)

（3） 运行效果


在这里插入图片描述

扫描二维码推送至手机访问。

版权声明：本文由ruisui88发布，如需转载请注明出处。

本文链接：http://www.ruisui88.com/post/2377.html

标签: electron打包成安装包
分享给朋友：
返回列表

上一篇：「Electron跨平台桌面应用开发 1」第一个Electron应用

下一篇：有时候真的可以考虑放弃，Electron来做简单桌面软件开发了

“Electron学习2 使用Electron-vue和Vuetify UI库” 的相关文章

总结了Vue3的七种组件通信方式，别再说不会组件通信了

写在前面本篇文章是全部采用的<script setup>这种组合式API写法，相对于选项式来说，组合式API这种写法更加自由，具体可以参考Vue文档对两种方式的描述。本篇文章将介绍如下七种组件通信方式：propsemitv-modelrefsprovide/injecteventBusv...

java调用API操作GitLab

最近需要在一个WEB项目中集成GitLab，用到了GitLab的API操作，在网上找了很久都是说直接调用GitLab的Http接口，而且API官方只有javadoc没有其它说明文档，特别记录下，以备查询。这里采用Token的认证方式，因此需要先登陆GitLab新建一个Token,创建方式如下：创建完...

2024年，不断突破的一年

迈凯伦F1车队不久前拿下了2024年度总冠军，距离上一次还是二十几年前。在此期间，另一领域内，一个充满革新活力的腕表品牌——RICHARD MILLE理查米尔，正不断发展，与F1运动、帆船、古董车展等领域，共享着对速度与极限的无尽向往。RICHARD MILLE的发展与F1车手们在赛道上的卓越表现交...

全新斯柯达柯珞克Karoq深度评测:大众替代品

“斯柯达柯珞克是一款出色的全能家庭 SUV，具有许多有用的功能”价格36,605 英镑- 49,190 英镑优点方便的 VarioFlex 后排座椅非常适合家庭入住驾驶乐趣缺点保修期短保守的内饰性格比Yeti少结论——斯柯达柯珞克是一辆好车吗？斯柯达柯珞克是在辉煌的七座 斯柯达柯迪亚克之后推出的，因...

从 Vue2.0 到 React17——React 开发入门

作者：佚名来源：前端大全前言找工作时发现有一些公司是以React作为技术栈的，而且薪资待遇都不错，为了增加生存的筹码，所以还是得去学一下React，增加一项求生技能。因为我用Vue2.0开发项目已经四年了，故用Vue2.0开发项目的思路来学习React。前端项目是由一个个页面组成的，对于Vue来说，...

Vue Router 4 路由操作 - 路由导航

路由导航分为 声明式导航 和 编程式导航。通过 <router-link to="..."> 标签跳转的方式为声明式导航。通过 路由实例对象（router.push(...)）跳转的为编程式导航。导航到不同的位置想要导航到不同的URL，使用 router.push 方法。...

蜀ICP备2024111239号-14