基于 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让箭头只有上半部…

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…

FPGA JTAG最小系统 EP2C5T144C8N

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

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使用基础 ‍ 实…

【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 …

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

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

C++学习笔记-operator关键字:重载与自定义操作符

在C编程中&#xff0c;operator关键字扮演着极其重要且独特的角色。它允许开发者为内置类型或自定义类型重载或定义新的操作符行为。这一特性极大地增强了C的表达能力&#xff0c;使得代码更加直观、易于理解和维护。本文将深入探讨C中operator关键字的使用&#xff0c;包括操作…

Interesting bug caused by getattr

题意&#xff1a;由 getattr 引起的有趣的 bug 问题背景&#xff1a; I try to train 8 CNN models with the same structures simultaneously. After training a model on a batch, I need to synchronize the weights of the feature extraction layers in other 7 models. …

Elasticsearch:Golang ECS 日志记录 - zap

ECS 记录器是你最喜欢的日志库的格式化程序/编码器插件。它们可让你轻松地将日志格式化为与 ECS 兼容的 JSON。 编码器以 JSON 格式记录日志&#xff0c;并在可能的情况下依赖默认的 zapcore/json_encoder。它还处理 ECS 错误格式的错误字段记录。 默认情况下&#xff0c;会添…

OpenWrt 为软件包和docker空间扩容

参考资料 【openwrt折腾日记】解决openwrt固件刷入后磁盘空间默认小的问题&#xff0c;关联openwrt磁盘扩容空间扩容【openwrt分区扩容】轻松解决空间可用不足的尴尬丨老李一瓶奶油的YouTube 划分空间 参考一瓶奶油的YouTube 系统 -> 磁盘管理 -> 磁盘 -> 修改 格…

【机器学习】不同操作系统下如何安装Jupyter Notebook和Anaconda

引言 Jupyter Notebook 是一个非常流行的开源Web应用程序&#xff0c;允许你创建和共享包含代码、方程、可视化和解释性文本的文档 文章目录 引言一、如何安装Jupyter Notebook1.1 对于Windows用户1.2 对于macOS用户1.3 对于Linux用户&#xff1a; 二、如何安装Anaconda2.1 对于…

基于Element UI内置的Select下拉和Tree树形组件,组合封装的树状下拉选择器

目录 简述 效果 功能描述 代码实现 总结 简述 基于Element UI内置的Select下拉和Tree树形组件&#xff0c;组合封装的树状下拉选择器。 效果 先看效果&#xff1a; 下拉状态&#xff1a; 选择后状态&#xff1a; 选择的数据&#xff1a; 功能描述 1、加载树结构&…

Linux云计算 |【第一阶段】SERVICES-DAY2

主要内容&#xff1a; DNS服务基础及搭建、特殊解析(针对地址库文件&#xff1a;DNS轮询 DNS泛域名解析 DNS别名&#xff09;、缓存DNS&#xff08;全局转发forwarders&#xff09;、DNS递归迭代&#xff08;子域授权&#xff09;、DNS主从架构搭建、DNS主从数据同步 一、DNS工…

【技术升级】Docker环境下Nacos平滑升级攻略,安全配置一步到位

目前项目当中使用的Nacos版本为2.0.2&#xff0c;该版本可能存在一定的安全风险。软件的安全性是一个持续关注的问题&#xff0c;尤其是对于像Nacos这样的服务发现与配置管理平台&#xff0c;它在微服务架构中扮演着核心角色。随着新版本的发布&#xff0c;开发团队会修复已知的…