Vite+Electron快速构建一个VUE3桌面应用(一)

一. 简介

首先,介绍下viteElectron

  • Vite是一种新型前端构建工具,能够显著提升前端开发体验。
  • Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入Chromium和Node.js到二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。

当开始想用vue去开发一个桌面应用时,首先去搜索下,了解到当前如下两种现成方案:

  • electron-vue: 该项目集成度较好,封装较为完整,中文搜索下来文章较多也是该方案,可以直接上手去使用。但是,问题在于其内置electron的版本太低,写文章时看到的版本是2.0.4,而最新的electron版本是15.1.2。
  • Vue CLI Plugin Electron Builder: 该方案是集成到到vue-cli中使用,使用vue add electron-builder后可直接上手,免去了基础配置的步骤。但是其只能在vue-cli下使用,无法配合vite来使用。

因此,若要使用viteelectron,还需要自己来配置。


二. 创建一个Vite项目

1. 安装 vite

yarn create vite

2. 创建项目

创建命令如下:

yarn create vite <your-vue-app-name> --template vue

此处创建一个项目,名为kuari。

yarn create vite kuari --template vue

3. 进入且运行

进入项目,在运行前需要先安装下依赖。

cd kuari
yarn install
yarn dev

在运行命令敲下的一瞬间,几乎是已经在运行了,不愧是vite。此时按照输出,打开地址预览,即可看到初始化页面。

至此一个基础的vite项目创建完成。


三. 配置Electron

1. 官方文档

在Electron官网的快速入门文档中,有官方给出的利用html、javascript、css来创建一个electron应用的案例,vite+electron的方案也借鉴其中。

2. 安装

首先安装electron至vite应用。目前electron的版本为^15.1.2,

yarn add --dev electron

3. 配置文件

1)vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path' 										// 新增

// https://vitejs.dev/config/
export default defineConfig({
  base: path.resolve(__dirname, './dist/'),	// 新增
  plugins: [vue()]
})

2)main.js

创建一个新的文件main.js,需要注意的是,该内容中index.html的加载路径跟electron官网给的配置不同。

// main.js

// 控制应用生命周期和创建原生浏览器窗口的模组
const { app, BrowserWindow } = require('electron')
const path = require('path')

function createWindow () {
  // 创建浏览器窗口
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // 加载 index.html
  mainWindow.loadFile('dist/index.html') // 此处跟electron官网路径不同,需要注意

  // 打开开发工具
  // mainWindow.webContents.openDevTools()
}

// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
  createWindow()

  app.on('activate', function () {
    // 通常在 macOS 上,当点击 dock 中的应用程序图标时,如果没有其他
    // 打开的窗口,那么程序会重新创建一个窗口。
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// 除了 macOS 外,当所有窗口都被关闭的时候退出程序。 因此,通常对程序和它们在
// 任务栏上的图标来说,应当保持活跃状态,直到用户使用 Cmd + Q 退出。
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

// 在这个文件中,你可以包含应用程序剩余的所有部分的代码,
// 也可以拆分成几个文件,然后用 require 导入。

3)preload.js

创建一个新的文件preload.js

// preload.js

// 所有Node.js API都可以在预加载过程中使用。
// 它拥有与Chrome扩展一样的沙盒。
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }
})

4)package.json

为了确保能够运行相关electron的命令,需要修改package.json文件。

首先需要去设置main属性,electron默认会去在开始时寻找项目根目录下的index.js文件,此处我们使用的是main.js,所以需要去定义下。

// package.json

{
  "name": "kuari",
  "version": "0.0.0",
  "main": "main.js", 			// 新增
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.16"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.9.3",
    "electron": "^15.1.2",
    "vite": "^2.6.4"
  }
}

最后我们需要新增electron的运行命令。

// package.json

{
  "name": "kuari",
  "version": "0.0.0",
  "main": "main.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "electron:serve": "electron ." // 新增
  },
  "dependencies": {
    "vue": "^3.2.16"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.9.3",
    "electron": "^15.1.2",
    "vite": "^2.6.4"
  }
}

四. 运行

直接在终端输入如下命令:

yarn electron:serve

接着我们就可以看到我们桌面应用就出来咯!


五. 最后

之前做项目一直用的Vue CLI Plugin Electron Builder,这次有个项目先用electron开发一下,推一波看看,后期看情况swift重新开发一个mac的桌面应用。也刚好尝尝鲜,一直没有机会试试vite。

electron这个东东确实很方便,就是打包出来的应用体积太大,真的是硬伤啊。这次目标人群首先是windows用户,所以上electron吧!

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Java 魔法类 Unsafe 详解

&#x1f345;文末获取联系&#x1f345; &#x1f447;&#x1f3fb; 精彩项目推荐订阅&#x1f447;&#x1f3fb; 不然下次找不到哟 感兴趣的可以先收藏起来&#xff0c;还有大家在毕设选题&#xff0c;项目以及论文编写等相关问题都可以给我留言咨询&#xff0c;希望帮助更…

短视频矩阵系统软件/电脑pc企业版/手机端双开发~~源头

短视频矩阵系统软件开发的属性主要包含以下几个方面&#xff1a; 开发属性&#xff1a; 1. 功能属性&#xff1a;功能是短视频矩阵系统的核心属性&#xff0c;包括短视频的采集、编辑、发布、推广、互动等功能。此外&#xff0c;系统的个性化定制也是考虑的重要因素&#xff0…

商品库存管理系统(C语言)

1 设计目的 让商家能够更方便地管理商品库存。 2 需求分析 用户能够实现对商品的入库、出库、删除、修改和查询等功能。 3 总体设计 商品库存管理系统存在以下模块&#xff0c;商品入库模块、商品出库模块、删除商品模块、修改商品模块、查询商品模块、显示商品模块。 4 详细…

linux中安装tomcat并启动运行web项目

在 Linux 中安装 Tomcat 并启动运行 Web 项目,您可以按照以下步骤进行操作: 1.下载和解压 Tomcat: 打开终端(Terminal)。 使用 wget 命令下载 Tomcat 压缩包。例如: wget https://downloads.apache.org/tomcat/tomcat-<version>/bin/apache-tomcat-<version&g…

ZK鉴权设计以及相关探讨

文章目录 1. zk的鉴权设计2. zk鉴权应用范围3. zk鉴权的常用方法4. 推荐配置5. 参考文档 鉴权&#xff0c;分别由鉴和权组成 鉴&#xff1a; 表示身份认证&#xff0c;认证相关用户是否存在以及相关的用户名和密码是否一致权&#xff1a; 完成身份的鉴后&#xff0c;还需要判断…

嵌入式培训机构四个月实训课程笔记(完整版)-Linux ARM平台编程第六天-Linux文件系统(物联技术666)

链接&#xff1a;https://pan.baidu.com/s/1VUc8cGI7bTtXuGepZZY3Ng?pwd1688 提取码&#xff1a;1688 上午&#xff1a;文件系统介绍 下午&#xff1a;文件系统的制作 教学内容&#xff1a; 在linux中文件分为二种&#xff1a; 根文件和普通文件&#xff1b; Linux以树状…

2024河南省公务员报名确认缴费流程

1、抢考点&#xff01;及时的报名确认以及缴费&#xff01; 2024年1月31日9∶00至2月40日17∶00前进行上传照片、选择考区和网上缴费。需要提醒各位考生的是&#xff0c;各个城市考点容量有限&#xff0c;需要尽早进行确认缴费选考点。每年都有因为报名确认较晚&#xff0c;未能…

云流量回溯在网络管理中的关键应用

云流量回溯是一种在云计算环境下的网络流量分析技术&#xff0c;它能够追踪和还原网络中的流量&#xff0c;为网络管理和安全监控提供了强大的支持。在本文中&#xff0c;我们将探讨云流量回溯的原理&#xff0c;并探讨其在实际网络管理中的关键应用。 1. 云流量回溯概述 云流量…

Docker数据卷挂载(以容器化Mysql为例)

数据卷 数据卷是一个虚拟目录&#xff0c;是容器内目录与****之间映射的桥梁 在执行docker run命令时&#xff0c;使用**-v 本地目录&#xff1a;容器目录**可以完成本地目录挂载 eg.Mysql容器的数据挂载 1.在根目录root下创建目录mysql及三个子目录&#xff1a; cd ~ pwd m…

嵌入式学习第十一天

1.数组和指针的关系: 1.一维数组和指针的关系: int a[5] {1, 2, 3, 4, 5}; int *p NULL; p &a[0]; p a; 数组的数组名a是指向数组第一个元素的一个指针常量 a &a[0] a 的类型可以理解为 int * 有两种情况除…

常见の算法链表问题

时间复杂度 1.链表逆序 package class04;import java.util.ArrayList; import java.util.List;public class Code01_ReverseList {public static class Node {public int value;public Node next;public Node(int data) {value data;}}public static class DoubleNode {publi…

React16源码: React中commitAllHostEffects内部的commitDeletion的源码实现

commitDeletion 1 &#xff09;概述 在 react commit 阶段的 commitRoot 第二个while循环中调用了 commitAllHostEffects&#xff0c;这个函数不仅仅处理了新增节点&#xff0c;更新节点最后一个操作&#xff0c;就是删除节点&#xff0c;就需要调用 commitDeletion&#xff0…

行业应用 | Sophon AutoCV推动AI应用从模型生产到高效落地

随着技术市场和应用方向的逐渐成熟&#xff0c;人工智能与各行各业的结合和落地逐渐进入了深水区。 虽然由于行业规模化和应用普及度的限制&#xff0c;人工智能在“传统”行业的落地不如消费互联网行业&#xff0c;但是借助人工智能为“传统”行业的发展注入新能量一直是相关…

大文件传输之以太网UDP传输延迟解决方案

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业最宝贵的资产之一。随着企业规模的扩大和业务的全球化&#xff0c;大文件传输的需求日益增长&#xff0c;它不仅关系到企业内部数据的高效管理&#xff0c;也是与外部合作伙伴进行有效沟通的关键。然而&#xff0c;大文件…

STM32——创建HAL库工程

第一步 新建工程文件夹 所有文件夹存放的内容&#xff1a; 第二步 拷贝/新建工程相关文件 1、Drivers&#xff08;创建如下文件夹&#xff0c;除readme.txt&#xff09; 文件夹存放的内容&#xff1a; 2、Middlewares和output暂时不需要创建&#xff08;目前用不到&#x…

幻兽帕鲁一键开私服?超简单小白教程一看就会!

如何自建幻兽帕鲁服务器&#xff1f;基于阿里云服务器搭建幻兽帕鲁palworld服务器教程来了&#xff0c;一看就懂系列。本文是利用OOS中幻兽帕鲁扩展程序来一键部署幻兽帕鲁服务器&#xff0c;阿里云服务器网aliyunfuwuqi.com分享官方基于阿里云服务器快速创建幻兽帕鲁服务器教程…

ARM常用汇编指令

文章目录 前言一、处理器内部数据传输指令MOV&#xff1a; 将数据从一个寄存器复制到另一个寄存器。MRS&#xff1a; 将特殊寄存器(CPSR,SPSR)中的数据传给通用寄存器。MSR&#xff1a; 将通用寄存器中的数据传给特殊寄存器(CPSR,SPSR)。 二、存储器访问指令LDR:用于从内存中加…

Shell脚本——函数的使用

一、函数 1.函数的作用 定义较为复杂的但是需要重复使用的内容&#xff0c;以便再次使用可以直接调用函数节约时间&#xff0c;提高效率 在编写脚本时&#xff0c;有些脚本可以反复使用&#xff0c;可以调用函数来解决&#xff0c;语句块定义成函数约等于别名 函数定义&…

51-17 视频理解串讲— MViT 论文精读

继TimeSformer模型之后&#xff0c;咱们再介绍两篇来自Facebook AI的论文&#xff0c;即Multiscale Vision Transformers以及改进版MViTv2: Improved Multiscale Vision Transformers for Classification and Detection。 由于本司大模型组最近组织阅读的论文较多&#xff0c;…

【iOS ARKit】同时开启前后摄像头BlendShapes

在上一节中已经了解了 iOS ARkit 进行BlendShapes的基本操作&#xff0c;这一小节继续实践同时开启前后摄像头进行人脸捕捉和世界追踪。 iOS设备配备了前后两个摄像头&#xff0c;在运行AR 应用时&#xff0c;需要选择使用哪个摄像头作为图像输人。最常见的AR 体验使用设备后置…