基于 Electron+Vite+Vue3+Sass 框架搭建

技术参考

技术描述
Electron一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入 Chromium 和 Node.js
Electron Forge用于打包和分发 Electron 应用程序的一体化工具。英文地址在此
Vite前端构建工具
Vue3用于构建用户界面的 JavaScript 框架
@vitejs/plugin-vueVite 插件,提供 Vue 单文件组件支持
Element Plus基于 Vue3 的 UI组件库
SassCSS 预处理语言

实现

第一步:创建 Electron + Vite 模板

使用官方推荐 Electron Vite 模板命令

npm init electron-app@latest my-new-app -- --template=vite

安装过程提示

> npm init electron-app@latest my-new-app -- --template=vite
✔ Locating custom template: "vite"
✔ Initializing directory
✔ Preparing template
✔ Initializing template
✔ Installing template dependencies

安装完后的目录

# 目录结构
.
├─ src                      # 主代码
|   ├─ index.css            # 样式文件 renderer.js 文件中引入
|   ├─ main.js              # 主进程脚本,初始化应用
|   ├─ preload.js           # 预加载脚本 
|   └─ renderer.js          # 渲染进程脚本
├─ forge.config.js          # forge 配置
├─ forge.env.d.ts           # forge 环境 
├─ package-lock.json        # lock 
├─ package.json             # 插件依赖
├─ vite.base.config.mjs     # vite 基础配置 
├─ vite.main.config.mjs     # vite 主配置 
├─ vite.preload.config.mjs  # vite 预加载配置
└─ vite.renderer.config.mjs # vite 渲染配置

查看 package.json 默认安装了如下插件

{"dependencies": {"@element-plus/icons-vue": "2.3.1","electron-squirrel-startup": "1.0.1","element-plus": "2.7.7","vue": "3.4.33"},  "devDependencies": {"@electron-forge/cli": "7.4.0","@electron-forge/maker-deb": "7.4.0","@electron-forge/maker-rpm": "7.4.0","@electron-forge/maker-squirrel": "7.4.0","@electron-forge/maker-zip": "7.4.0","@electron-forge/plugin-auto-unpack-natives": "7.4.0","@electron-forge/plugin-fuses": "7.4.0","@electron-forge/plugin-vite": "7.4.0","@electron/fuses": "1.8.0","electron": "31.2.1","vite": "5.3.4"}
}

启动效果如下

npm run start

在这里插入图片描述

第二步:融合 Vue3

参考官方指南中文/英文,安装 Vue3 相关插件

# vue3 插件
npm i vue# vite vue3 插件
npm i @vitejs/plugin-vue -D

修改文件 src/index.html ,加上 id="app"<body> 标签中仅有两行代码,如下

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Hello World!</title></head><body><div id="app"></div><script type="module" src="/src/renderer.js"></script></body>
</html>

新建文件 src/App.vue

<script setup>
console.log("👋 该日志由 App.vue 记录。")
</script><template><h1>💖 你好!世界! 💖</h1><p>欢迎使用你的 Electron 程序。</p>
</template>

修改文件 src/renderer.js

import { createApp } from 'vue'
import App from './App.vue'const app = createApp(App)
app.mount('#app')

文件 vite.renderer.config.mjs 中配置 Vue 插件

import vue from '@vitejs/plugin-vue'export default defineConfig((env) => {return {plugins: [vue(),],};
});

第三步:配置 Sass

安装 sasssass-loader 插件

npm i sass sass-loader -D

然后就可在 *.vue 组件中直接使用

<style lang="scss" >
.main {width: 300px;height: 250px;
}
</style>

第四步:配置 ElementPlus

安装 element plus 和 Icon 图标(需要单独安装)

npm i element-plusnpm i @element-plus/icons-vue

新建文件 src/utils/elements.js

import * as ElementPlusIconsVue from '@element-plus/icons-vue'export const registerElIcon = (app) => {// 全局注册图标 会牺牲一点性能 ElIconXxxxfor (let i in ElementPlusIconsVue) {let name = `ElIcon${i}`;app.component(name, ElementPlusIconsVue[i])console.log(name, ElementPlusIconsVue[i]);}
}

App.vue 中设置 svg 高宽

<style>
svg {width: 1rem;height: 1rem;
}
</style>

src/remderer.js 全局引入

  • 代码第5-6行,引入所有图标和转行方法;

  • 代码第12行,全局注册图标组件,且****使用方式有改变****;

  • 代码 4, 10 行,可配置成中文;

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs' // 配置中文
import 'element-plus/dist/index.css'
import { registerElIcon } from './utils/elements'const app = createApp(App)app.use(ElementPlus, { locale: zhCn }) // 使用中文
// 全局注册 el-icon
registerElIcon(app);
app.mount('#app')

同样,有两种使用方式:

  1. 结合 el-icon 使用,提供了额外的属性,如:is-loading等;
  2. 直接使用 SVG 图标,当做一般的 svg 使用;
<!-- 使用 el-icon 为 SVG 图标提供属性 -->
<el-icon :size="size" :color="color"><ElIconEdit  />
</el-icon>
<!-- 或者独立使用它,不从父级获取属性 -->
<ElIconEdit />

第五步:测试

新建文件 src/components/Btns.vue。此文件可测试 ElementPlusIcon 功能是否可用

<template><div><el-button>Default</el-button><el-button type="primary" icon="el-icon-folder-add">Primary</el-button><el-button type="success" icon="ElIconFolderAdd">Success</el-button><el-button type="info"><el-icon :color="color"><ElIconEdit  /></el-icon>Info</el-button><el-button type="warning"><ElIconEdit />Warning</el-button><el-button type="danger">Danger</el-button></div>
</template>

放入主页 src/App.vue

<script setup>
import Btns from './components/Btns.vue'console.log("👋 该日志由 App.vue 记录。")
</script><template><h1>💖 你好! </h1><h2>💖 Electron + Vite + Vue3 + Sass</h2><!-- 测试 组件 --><Btns />
</template><style lang="scss" >
svg {width: 1rem;height: 1rem;
}
</style>

启动

npm run start

效果如下

在这里插入图片描述

打包

暂无时间研究,可参考:

  • Squirrel.Windows

  • Zip

最后

还在学习中,作为一名资深前端(哈哈哈…自诩…),发现 Electron 越来越有趣~

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

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

相关文章

java基础-String

之前有很长时间没进行更新了&#xff0c;现在开始会重新进行java基础的学习&#xff0c;所以会开始进行java基础方面的更新&#xff0c;今天会进行string字符串的学习。 String在底层被final(声明的变量或者对象不可以扩展/改变)修饰&#xff0c;故其不可变。其底层采用的是字符…

springboot集成redis之字典缓存

什么是redis的字典缓存&#xff1f; Redis的缓存是Redis内部用于存储键值对数据结构的一种基础数据结构。在Redis中&#xff0c;所有的键值对都是通过字典这种数据结构来存储的。字典在Redis中扮演着核心角色&#xff0c;因为它不仅用于数据库中的键值对存储&#xff0c;还用于…

Postman设置全部请求都携带请求头,Postman如何一次性设置请求头、不需要一个请求一个请求去添加请求头

文章目录 一、问题描述二、解决办法三、应用场景 一、问题描述 现在我有 n 个接口测试&#xff0c;其中 n 个都需要携带一致的请求头&#xff08;其实一般都是携带 JWT 令牌&#xff09;&#xff0c;怎么办&#xff1f;我要一个一个写&#xff1f;如图&#xff1a; 二、解决办…

go语言Gin框架的学习路线(十)

目录 GORM的CRUD教程 查询 普通查询 定义 User 结构体 查询所有用户 查询第一个用户 总结 条件查询 内联条件 额外查询选项 高级查询 链式操作 Scopes 多个立即执行方法 GORM的CRUD教程 CRUD 是 "Create, Read, Update, Delete"&#xff08;创建、查询…

[经验] 驰这个汉字的拼音是什么 #学习方法#其他#媒体

驰这个汉字的拼音是什么 驰&#xff0c;是一个常见的汉字&#xff0c;其拼音为“ch”&#xff0c;音调为第四声。它既可以表示动词&#xff0c;也可以表示形容词或副词&#xff0c;意义广泛&#xff0c;经常出现在生活和工作中。下面就让我们一起来了解一下“驰”的含义和用法。…

以Zookeeper为例 浅谈脑裂与奇数节点问题

一、脑裂现象的定义与影响 脑裂&#xff08;split-brain&#xff09;是指在分布式系统中&#xff0c;因网络分区或其他故障导致系统被切割成两个或多个相互独立的子系统&#xff0c;每个子系统可能独立选举出自己的领导节点。这一现象在依赖中心领导节点&#xff08;如Elastic…

【Qt 】JSON 数据格式详解

文章目录 1. JSON 有什么作用?2. JSON 的特点3. JSON 的两种数据格式3.1 JSON 数组3.2 JSON 对象 4. Qt 中如何使用 JSON 呢&#xff1f;4.1 QJsonObject4.2 QJsonArray4.3 QJsonValue4.4 QJsonDocument 5. 构建 JSON 字符串6. 解析 JSON 字符串 1. JSON 有什么作用? &#x…

【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第三篇 嵌入式Linux驱动开发篇-第三十九章 Linux MISC驱动

i.MX8MM处理器采用了先进的14LPCFinFET工艺&#xff0c;提供更快的速度和更高的电源效率;四核Cortex-A53&#xff0c;单核Cortex-M4&#xff0c;多达五个内核 &#xff0c;主频高达1.8GHz&#xff0c;2G DDR4内存、8G EMMC存储。千兆工业级以太网、MIPI-DSI、USB HOST、WIFI/BT…

5.Fabric的共识机制

在Fabric中,有以下3中典型共识机制。 Solo共识 solo共识机制只能用于单节点模式,即只能有一个Orderer节点,因此,其共识过程很简单,每接收到一个交易信息,就在共识模块的控制下产生区块并广播给节点存储到账本中。 Solo 模式下的共识只适用于一个Orderer节点,所以可以在…

CTF-Web习题:2019强网杯 UPLOAD

题目链接&#xff1a;2019强网杯 UPLOAD 解题思路 打开靶场如下图所示&#xff0c;是一个注册和登录界面 那就注册登录一下&#xff0c;发现是一个提交头像的页面&#xff1a; 试了一下只有能正确显示的png图片才能提交成功&#xff0c;同时F12拿到cookie&#xff0c;base6…

便宜多域名SSL证书申请平台推荐

随着互联网的深入发展&#xff0c;网络安全问题愈发受到重视。SSL证书作为保障网站和用户数据安全的重要工具&#xff0c;其重要性不言而喻。在众多SSL证书类型中&#xff0c;多域名SSL证书因其独特的功能和优势&#xff0c;逐渐成为企业和个人保护网站安全的首选。 申请便宜S…

Django视图与URLs路由详解

在Django Web框架中&#xff0c;视图&#xff08;Views&#xff09;和URLs路由&#xff08;URL routing&#xff09;是Web应用开发的核心概念。它们共同负责将用户的请求映射到相应的Python函数&#xff0c;并返回适当的响应。本篇博客将深入探讨Django的视图和URLs路由系统&am…

全国区块链职业技能大赛国赛考题区块链产品需求分析与方案设计

任务1-1:区块链产品需求分析与方案设计 本任务需要依据项目背景完成需求分析与方案设计,具体要求如下: 依据给定区块链食品溯源系统的业务架构图,对考题进行业务分析,尽可能多的去考虑一个业务系统所需要的模块,使用Visio或思维导图工具展现本系统的基本设计概念和处理流…

科研绘图系列:R语言热图(heatmap)

介绍 热图是一种数据可视化技术,通常用于展示数据的分布情况。它通过颜色的变化来表示数据的大小或密度,使得观察者能够直观地理解数据集中的模式和趋势。以下是热图的一些关键特点和应用场景: 数据分布:热图可以显示数据在不同区域的分布情况,比如在地图上显示不同地区的…

Go基础编程 - 12 -流程控制

流程控制 1. 条件语句1.1. if...else 语句1.2. switch 语句1.3. select 语句1.3.1. select 语句的通信表达式1.3.2. select 的基特性1.3.3. select 的实现原理1.3.4. 经典用法1.3.4.1 超时控制1.3.4.2 多任务并发控制1.3.4.3 监听多通道消息1.3.4.4 default 实现非堵塞读写 2. …

GPT-4o mini是什么?

今天&#xff0c;全网都知道 OpenAI 发现货了&#xff01; GPT-4o mini 取代 GPT 3.5&#xff0c;从此坐上正主之位。 从官网信息来看&#xff0c;OpenAI 最新推出的 GPT-4o mini 重新定义了 AI 成本效益的标准&#xff0c;其性能优于前代模型 GPT-3.5 Turbo&#xff0c;且成本…

查看公网IP的网络出口

文章目录 背景 背景 有时候在各种交易或其他时候&#xff0c;会被问到给我一个公网IP&#xff0c;我来帮你加白名单。 这个怎么怎么获取公网IP呢&#xff0c;在自己本机查看ipconfig或者ifconfig ip a 等命令查到的一般都是局域网的IP&#xff0c;每台机器都需要一个IP来进行对…

数学建模学习(111):改进遗传算法(引入模拟退火、轮盘赌和网格搜索)求解JSP问题

文章目录 一、车间调度问题1.1目前处理方法1.2简单案例 二、基于改进遗传算法求解车间调度2.1车间调度背景介绍2.2遗传算法介绍2.2.1基本流程2.2.2遗传算法的基本操作和公式2.2.3遗传算法的优势2.2.4遗传算法的不足 2.3讲解本文思路及代码2.4算法执行结果&#xff1a; 三、本文…

基于MobileNetv2的垃圾分类函数式自动微分-昇思25天打卡

基于MobileNetv2的垃圾分类 本文档主要介绍垃圾分类代码开发的方法。通过读取本地图像数据作为输入&#xff0c;对图像中的垃圾物体进行检测&#xff0c;并且将检测结果图片保存到文件中。 1、实验目的 了解熟悉垃圾分类应用代码的编写&#xff08;Python语言&#xff09;&a…