基于 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.mzph.cn/bicheng/49523.shtml

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

相关文章

PlantUML 语法、图标和示例

基本语法 关键字 声明参与者的几个关键字 actor、boundary、control、entity、database、collections、participant 箭头样式 我们可以通过&#xff0c;修改箭头样式&#xff0c;来表达不一样的意思&#xff1a; 表示一条丢失的消息&#xff1a;末尾加 x让箭头只有上半部…

Redis在SpringBoot中遇到的问题:预热,雪崩,击穿,穿透

缓存预热 预热即在产品上线前&#xff0c;先对产品进行访问或者对产品的Redis中存储数据。 原因&#xff1a; 1. 请求数量较高 2. 主从之间数据吞吐量较大&#xff0c;数据同步操作频度较高,因为刚刚启动时&#xff0c;缓存中没有任何数据 解决方法&#xff1a; 1. 使用脚…

Kafka - 生产者

生产者消息对象 public class ProducerRecord<K, V> {private final String topic; // 主题private final Integer partition; //分区号private final Headers headers; //消息头部private final K key; //键private final V value; //值private final Long timestamp; …

opencv 按键开启连续截图,并加载提示图片

背景图小图 键盘监听使用的是pynput 库 保存图片时使用了年月日时分秒命名 原图&#xff1a; from pynput import keyboard import cv2 import time# 键盘监听 def on_press(key):global jieglobal guanif key.char a:jie Trueelif key.char d:jie Falseelif key.char…

配置三个Spring Boot应用并通过Nginx进行反向代理 讨论中

要配置三个Spring Boot应用并通过Nginx进行反向代理&#xff0c;你可以按照以下步骤操作&#xff1a; 步骤 1: 准备Spring Boot应用 确保每个Spring Boot应用都有不同的端口号。例如&#xff0c;你可以设置第一个应用监听8080端口&#xff0c;第二个监听8081端口&#xff0c;…

FPGA JTAG最小系统 EP2C5T144C8N

FPGA的文档没有相应的基础还真不容易看懂&#xff0c;下面是B站上对FPGA文档的解读(本文非对文档解读&#xff0c;只是为个人记录第三期&#xff1a;CycloneIV E最小系统板设计&#xff08;一&#xff09;从Datasheet上获取FPGA的基本参数_哔哩哔哩_bilibili 电源部份 核心电…

TS config

moduleResolution 是 TypeScript 编译器中的一个选项&#xff0c;用于控制如何解析模块导入。这个选项影响着 TypeScript 如何查找和解析 import 和 export 声明中指定的模块。 {"compilerOptions": {"moduleResolution": "Node"//小写也没问题…

SELinux的 getenforce setenforce 配置文件/etc/selinux/config的 SELINUX和SELINUXTYPE

SELinux&#xff08;Security-Enhanced Linux&#xff09;是一个为Linux系统提供访问控制安全策略的安全模块。它是Linux内核的一个功能强大的安全子系统&#xff0c;旨在提供访问控制安全策略机制&#xff0c;以限制程序中特定代码段的权限。SELinux超越了传统的UNIX权限模型&…

AI学习记录 -使用react开发一个网页,对接chatgpt接口,附带一些英语的学习prompt

实现了如下功能&#xff08;使用react实现&#xff0c;原创&#xff09; 实现功能&#xff1a; 1、对接gpt35模型问答&#xff0c;并实现了流式传输&#xff08;在java端&#xff09; 2、在实际使用中&#xff0c;我们的问答历史会经常分享给他人&#xff0c;所以下图的 copy …

Python酷库之旅-第三方库Pandas(042)

目录 一、用法精讲 141、pandas.Series.agg(regate)方法 141-1、语法 141-2、参数 141-3、功能 141-4、返回值 141-5、说明 141-6、用法 141-6-1、数据准备 141-6-2、代码示例 141-6-3、结果输出 142、pandas.Series.transform方法 142-1、语法 142-2、参数 142…

1196. 拐角I

问题描述 输入整数 &#x1d441;N &#xff0c;输出相应方阵。 输入一个整数 &#x1d441;N 。&#xff08; 0<&#x1d441;≤100) 输出一个方阵&#xff0c;每个数字的场宽为 3 附代码&#xff1a; #include<iostream> using namespace std; int main() { …

大屏数据看板一般是用什么技术实现的?

我们看到过很多企业都会使用数据看板&#xff0c;那么大屏看板的真正意义是什么呢&#xff1f;难道只是为了好看&#xff1f;答案当然不仅仅是。 大屏看板不仅可以提升公司形象&#xff0c;还可以提升企业的管理层次。对于客户&#xff0c;体现公司实力和品牌形象&#xff0c;…

域名解析到ipv6,并用CF隐藏端口

要求&#xff1a;域名解析到 IPv6 地址并隐藏端口 ‍ 效果&#xff1a;用域名 https://myhalo.soulio.top​ 访问http://[2409:8a62:867:4f12:56c7:5508:f7x6:8]:8080​。唯一缺点是延迟有点高。 ​​ ‍ 难度&#xff1a;需要有一定域名解析、cloudflare使用基础 ‍ 实…

org.springframework.context.annotation.DeferredImportSelector如何使用?

DeferredImportSelector 是 Spring 框架中一个比较高级的功能&#xff0c;主要用于在 Spring 应用上下文的配置阶段延迟导入某些组件或配置。这个功能特别有用&#xff0c;比如在处理依赖于其他自动配置的场景&#xff0c;或者当你想基于某些条件来决定是否导入特定的配置类时。…

一个简单的UAF/HeapOverflow fuzz demo学习

前言 偶然逛到的一篇&#xff0c;UAF_overflow_check | Note (gitbook.io) 最近正好也在初学fuzz&#xff0c;学习下对一些漏洞的检测fuzz思路。 刚好这个也指了一条学习方法&#xff1a;看成熟的fuzz工具的源码是如何处理的。 https://github.com/google/sanitizers/tree/m…

【Django+Vue3 线上教育平台项目实战】Elasticsearch实战指南:从基础到构建课程搜索与数据同步接口

文章目录 前言一、Elasticsearch倒排索引 二、Docker 搭建 ESDocker 安装Docker 搭建 ES 三、ES基础语法创建索引查看索引删除索引添加数据查询数据修改数据删除数据条件查询分页查询排序 多条件查询andor 范围查询 四、ES在项目中的应用示例 前言 在数据驱动的时代&#xff0c…

c#Action委托和Func委托

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;namespace Action委托 {internal class Program{static void PrintString(){Console.WriteLine("hello world.");}static void PrintInt(int …

vue3页面编写-导入导出excel、展开查询项等

数据保持 <router-view v-slot"{ Component, route }"><keep-alive><component :is"Component" :key"route.name" v-if"route.meta.keepAlive" /></keep-alive><component :is"Component" :key…

HarmonyOS应用开发者高级认证,Next版本发布后最新题库 - 多选题序号4

基础认证题库请移步&#xff1a;HarmonyOS应用开发者基础认证题库 注&#xff1a;有读者反馈&#xff0c;题库的代码块比较多&#xff0c;打开文章时会卡死。所以笔者将题库拆分&#xff0c;单选题20个为一组&#xff0c;多选题10个为一组&#xff0c;题库目录如下&#xff0c;…

大语言模型-RetroMAE-检索预训练模型

一、背景信息&#xff1a; RetroMAE是2022年10月由北邮和华为提出的一种密集检索预训练策略。 RetroMAE主要应用于检索模型的预训练&#xff0c;模型架构为非对称的Encoder-Decode结构。 二、整体结构&#xff1a; RetroMAE的模型架构为非对称的Encoder-Decode结构。 Encod…