首页 > 其他分享 >Electron学习2 使用Electron-vue和Vuetify UI库

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

时间:2023-11-10 12:36:27浏览次数:46  
标签:Vue electron 应用程序 Electron vue UI yarn



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学习2 使用Electron-vue和Vuetify UI库_electron

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

Electron学习2 使用Electron-vue和Vuetify UI库_应用程序_02

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

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


标签:Vue,electron,应用程序,Electron,vue,UI,yarn
From: https://blog.51cto.com/u_4029519/8295550

相关文章

  • Electron学习3 使用serialport操作串口
    Electron学习3使用serialport操作串口一、准备工作二、SerialPort介绍1.核心软件包(1)serialport(2)@serialport/stream(3)@serialport/bindings-cpp(4)@serialport/binding-mock(5)@serialport/bindings-interface2.解析器包3.命令行工具三、创建一个demo程序1.创建......
  • 【RuoYi移动端】HBuild工具插件安装和系统配置manifest.json
    一、点【工具】-【插件安装】安装如下工具  二、点【manifest.json】......
  • vue兄弟组件共享数据
    1、vue2.x中,兄弟组件共享数据的方式EventBus。一、A组件importeventBusfrom"@/components/eventBus";exportdefault{methods:{send(){eventBus.$emit('share',this.str)}}}</script>二、eventBus.jsimportVuefrom"vue";......
  • vue3 Suspense
    在Vue.js3中,Suspense是一个用于处理异步组件的特殊组件,它允许你在等待异步组件加载时展示备用内容。这对于优化用户体验、处理懒加载组件或异步数据获取时非常有用。Suspense的主要目标是简化异步操作的状态管理和展示。下面是一个简单的例子,演示了如何在Vue.js3中使用Suspe......
  • 解决Vue中使用wangEditor富文本编辑器复制粘贴word文档携带内容样式文本问题
    前言:本文记录作者在vue项目中使用到wangEditor富文本编辑器复制粘贴功能所遇到的bug,故此把自己所遇到的坑及问题详细的记录下来。如果觉得作者写的不错,希望得到您的点赞/收藏/支持,如果有不同意见,欢迎下方评论区留言。一、自定义处理粘贴的文本内容1、配置自定义处理粘贴的文本内......
  • vue3 KeepAlive
    在Vue.js3中,<keep-alive>是一个抽象组件,用于保留其子组件状态,防止在切换组件时销毁它们。这对于在页面间切换时保留组件的状态或避免重复渲染特定组件非常有用。<keep-alive>主要用于缓存组件,以提高性能和用户体验。以下是一个简单的例子,演示了如何在Vue.js3中使用<keep-ali......
  • layui弹框提示按回车事件一直不停弹窗
    如下界面,敲回车后一直不停弹窗,确定的事件也不执行 解决问题方法:在确认事件前面加上$(':focus').blur();如下所示,问题得到解决$(':focus').blur();layer.confirm(msg,{icon:3,title:'提示',success:function(){this.enterEsc=function......
  • vue3 Teleport
    在Vue.js3中,Teleport是一种特殊的组件,用于在DOM树中的任何地方渲染其内容,而不受父组件的约束。这对于需要将组件的内容移动到DOM树的其他部分时非常有用,例如在模态框或弹出窗口中使用。Teleport提供了两个名为teleport和teleport-to的指令,用于定义内容的来源和目标位......
  • 评估APP网页小程序代码UI开发H5估价师怎么评估精确研发价格?
    大家好,我是咕噜签名分发可爱多。今天跟大家分享点不一样的。作为一名应用程序开发评估师,可能涉及到的主要任务是为特定的应用程序提供估算开发成本和所需时间预测。为了为一个应用程序更准确地评估价格。整理了以下方面。1、如何让一个App更好、更精确地评估出价格?以下是一个可能的......
  • vuejs3.0 从入门到精通——动态组件
    动态组件一、App.vue<template><ul><!--使用ul标签替代了错误的url标签,用于展示列表--><liv-for='(item,index)intabList':key='index'@click="()=>{currentComponent.com=tabList[index].com}"><!--......