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

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

  • 一、Electron-vue简介
  • 二、安装yarn
  • 三、创建Electron-vue项目
    • 1. 关于 electron-builder
    • 2. 安装脚手架
    • 3. 运行
    • 4. 打包应用程序
  • 四、background.js说明
    • 1. 引入模块和依赖：
    • 2. 注册协议：
    • 3. 创建窗口函数：
    • 4. 生命周期事件和监听器：
  • 五、使用UI库 Vuetify
    • 1. 文档地址：
    • 2. 安装
    • 3. 设置
      • （1）修改main.js如下：
      • （2) src/plugins/vuetify.js内容
      • （3） 运行效果

在这里插入图片描述

一、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

<template><v-container><v-row class="text-center"><v-col cols="12"><v-btn>Button</v-btn></v-col></v-row></v-container>
</template><script>export default {name: 'HelloWorld',
}
</script>

（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） 运行效果

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/103712.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

分享好用的翻译软件

分享好用的翻译软件

网易有道翻译→网易有道翻译
阅读更多...
java八股文面试[JVM]——JVM参数

java八股文面试[JVM]——JVM参数

参考&#xff1a;JVM学习笔记&#xff08;一&#xff09;_卷心菜不卷Iris的博客-CSDN博客 堆参数调优入门 jdk1.7&#xff1a; jdk1.8&#xff1a; 面试题&#xff1a;给定-Xms Xmx -Xmn 问 最大的eden区域是多少M。 常用JVM参数 怎么对jvm进行调优&#xff1f;通过参数配…
阅读更多...
Nacos注册中心

Nacos注册中心

环境win11&#xff0c;jdk11&#xff0c;Nacos1.4.1&#xff0c;SpringBoot项目。 除了配置和Eureka不一样&#xff0c;其它都一样。 Nacos安装 GitHub的Release下载页&#xff1a;https://github.com/alibaba/nacos/releases 在bin目录&#xff1a;startup.cmd -m standal…
阅读更多...
基于OpenCV实战（基础知识一）

基于OpenCV实战（基础知识一）

目录 简介 1.计算机眼中的图像 2.图片的读取、显示与保存 3.视频的读取与显示 简介 OpenCV是一个流行的开源计算机视觉库&#xff0c;由英特尔公司发起发展。它提供了超过2500个优化算法和许多工具包&#xff0c;可用于灰度、彩色、深度、基于特征和运动跟踪等的图像处理和…
阅读更多...
Python：逢七拍腿游戏

Python：逢七拍腿游戏

场景模拟&#xff1a; 通过在 for 循环中使用 continue 语句实现计算拍腿次数&#xff0c;即计算从1到100&#xff08;不包括100&#xff09;&#xff0c;一共有多少个尾数为7或7的倍数这样的游戏&#xff0c;代码如下&#xff1a; total 99 # 记…
阅读更多...
“车-路-网”电动汽车充电负荷时空分布预测（matlab）

“车-路-网”电动汽车充电负荷时空分布预测（matlab）

目录 1 主要内容 2 部分代码 3 程序结果 4 下载链接 1 主要内容 该程序参考《基于动态交通信息的电动汽车充电负荷时空分布预测》和《基于动态交通信息的电动汽车充电需求预测模型及其对配网的影响分析》文献模型&#xff0c;考虑私家车、出租车和共用车三类交通工具特性和…
阅读更多...
使用 Amazon Redshift Serverless 和 Toucan 构建数据故事应用程序

使用 Amazon Redshift Serverless 和 Toucan 构建数据故事应用程序

这是由 Toucan 的解决方案工程师 Django Bouchez与亚马逊云科技共同撰写的特约文章。 带有控制面板、报告和分析的商业智能&#xff08;BI&#xff0c;Business Intelligence&#xff09;仍是最受欢迎的数据和分析使用场景之一。它为业务分析师和经理提供企业的过去状态和当前状…
阅读更多...
【ARM AMBA AXI 入门 10 - AXI 总线 DATA信号与 STRB 信号之间的关系 】

【ARM AMBA AXI 入门 10 - AXI 总线 DATA信号与 STRB 信号之间的关系 】

文章目录 AXI STRB 信号 AXI STRB 信号 AXI总线是ARM公司设计的高性能处理器接口&#xff0c;其中STRB和DATA信号在AXI协议中有特殊的含义和关系。 DATA信号&#xff1a;在AXI中&#xff0c;DATA信号用于在读写操作中传输实际的数据。数据的大小可以根据AXI接口的位宽来变化&…
阅读更多...
Java免费自学网站墙裂推荐！！！！

Java免费自学网站墙裂推荐！！！！

最近&#xff0c;常有一些读者问我&#xff1a;“有没有什么推荐的Java学习网站啊&#xff1f;” 因为一直没有时间&#xff0c;所以我之前也是让大家上知乎、搜索引擎搜一下就好了。 但是&#xff0c;我深知不能这样&#xff0c;应该拿出更真诚的态度带来优质的内容。 于是…
阅读更多...
前端技术Vue学习笔记--005

前端技术Vue学习笔记--005

Vue学习笔记 一、非父子通信-event bus 事件总线 作用&#xff1a;非父子组件之间&#xff0c;进行简易消息传递。&#xff08;复杂场景用----Vuex&#xff09; 使用步骤&#xff1a; 创建一个都能访问的事件总线 &#xff08;空Vue实例&#xff09;-----utils/EventBus.js /…
阅读更多...
react-sortable-hoc 拖拽列表上oncick事件失效

react-sortable-hoc 拖拽列表上oncick事件失效

const SortableItem SortableElement(({value, onChangePayment}) > {const onClickItem () > {// todo}return (<View className"-item" onClick{onClickItem}>xxxxxxx</View>) })问题&#xff1a;onClick 无效 解决&#xff1a;添加distance
阅读更多...
java八股文面试[java基础]——接口和抽象类的区别

java八股文面试[java基础]——接口和抽象类的区别

知识来源&#xff1a; 【基础】接口和抽象类_哔哩哔哩_bilibili 【2023年面试】Java中抽象类和接口有什么区别_哔哩哔哩_bilibili 【23版面试突击】抽象类和接口的区别&#xff0c;类可以继承多个类么&#xff0c;接口可以继承多个接口么,类可以实现多个接口么&#xff1f;_…
阅读更多...
中文医学知识语言模型：BenTsao

中文医学知识语言模型：BenTsao

介绍 BenTsao&#xff1a;[原名&#xff1a;华驼(HuaTuo)]: 基于中文医学知识的大语言模型指令微调 本项目开源了经过中文医学指令精调/指令微调(Instruction-tuning) 的大语言模型集&#xff0c;包括LLaMA、Alpaca-Chinese、Bloom、活字模型等。 我们基于医学知识图谱以及医…
阅读更多...
Linux服务——http协议及nginx服务

Linux服务——http协议及nginx服务

目录 一、HTTP协议 1、跨网络的主机间通讯方式 套接字相关的系统调用 2、HTTP协议访问网站的过程 3、http协议状态码分类 常见的http协议状态码 4、MIME 5、URL组成 6、HTTP协议版本 7、系统处理http请求的工作模式 8、apache与nginx的区别 二、I/O模型 I/O模型相关…
阅读更多...
javascript闭包

javascript闭包

javascript闭包 函数getNum想访问内部函数fn中的变量fg&#xff0c;就形成了闭包。 用途&#xff1a; 增加了内部函数变量的寿命 缺点&#xff1a; 会造成内存泄露
阅读更多...
使用VisualStudio制作上位机（二）

使用VisualStudio制作上位机（二）

文章目录 使用VisualStudio制作上位机（二）第三部分：GUI内部函数设计使用VisualStudio制作上位机（二） Author:YAL 第三部分：GUI内部函数设计 事件添加 给窗体或窗体按钮相关的操作添加事件有两种方式，事件的名字直白的表面了这是什么事件。 直接双击界面，自动生成窗…
阅读更多...
微信公众号关注/取消订阅事件一文详解

微信公众号关注/取消订阅事件一文详解

一、背景介绍 这周期的项目需求中需要做一个引导用户关注微信公众号的功能&#xff0c;但是引导用户关注的前提是需要实时获取当前用户是否已经关注微信公众号,如果光看官方文档还是对于一些小伙伴来说比较无从下手&#xff0c;所以我来分享以下我做的过程中遇到的问题以及解决…
阅读更多...
HTTP与RPC的取舍

HTTP与RPC的取舍

HTTP与RPC的取舍 HTTP和RPC都是常用的网络通信协议&#xff0c;它们各有优劣。选择何种协议&#xff0c;主要取决于应用的需求和场景。 HTTP和RPC都有各自的优点和缺点&#xff0c;首先我们对两种协议进行一个总结。 HTTP协议图 HTTP的优点&#xff1a; 广泛的支持&#xff1…
阅读更多...
leetcode:338. 比特位计数(python3解法)

leetcode:338. 比特位计数(python3解法)

难度&#xff1a;简单 给你一个整数 n &#xff0c;对于 0 < i < n 中的每个 i &#xff0c;计算其二进制表示中 1 的个数 &#xff0c;返回一个长度为 n 1 的数组 ans 作为答案。 示例 1&#xff1a; 输入&#xff1a;n 2 输出&#xff1a;[0,1,1] 解释&#xff1a; 0…
阅读更多...
在自定义数据集上使用 Detectron2 和 PyTorch 进行人脸检测

在自定义数据集上使用 Detectron2 和 PyTorch 进行人脸检测

本文讲讲述如何使用Python在自定义人脸检测数据集上微调预训练的目标检测模型。学习如何为Detectron2和PyTorch准备自定义人脸检测数据集&#xff0c;微调预训练模型以在图像中找到人脸边界。 人脸检测是在图像中找到&#xff08;边界的&#xff09;人脸的任务。这在以下情况下…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023