当前位置：首页 > news >正文

【electron-vite】搭建electron+vue3框架基础

news 来源：原创 2025/5/14 19:27:11

一、拉取项目 electron-vite

中文文档地址： https://cn-evite.netlify.app/guide/

官网网址：https://evite.netlify.app/

版本

vue版本：vue3
构建工具：vite
框架类型：Electron
JS语法：TypeScript （目前未使用，TS限制太麻烦，我没有采用，当前版本JavaScript）

使用包管理器（如 NPM、Yarn 或 pnpm）安装 ，如果你的网络环境不佳，推荐使用 cnpm 或使用 npmmirror

安装

前提条件

electron-vite 需要 Node.js 版本 18+，20+ 和 Vite 版本 4.0+

npm i electron-vite -D

搭建第一个 electron-vite 项目

npm create @quick-start/electron@latest

在这里插入图片描述

运行项目：

	cd electron-appnpm installnpm run dev

二、安装路由和二次封装

路由vue-router

npm install vue-router -S

在这里插入图片描述

二次封装路由

二次封装路由：为了方便后期维护和管理

1.在新建 electron-app\src\renderer\src目录下新增文件夹 views，存放vue页面。

2.在views目录下新增Login.vue,Home.vue文件用于测试。

<script setup></script><template><div>首页/登录</div>
</template>

在这里插入图片描述

3.清理App.vue里面的无关的代码，添加router-view 标签

<template><router-view></router-view>
</template>

4.electron-app\src\renderer\src 下新增router目录，存放路由相关配置文件

在这里插入图片描述

5.router目录下新增 index.js （配置入口）

import { createRouter, createWebHashHistory } from 'vue-router'//引入路由表
import { AppRoutes } from './routes'
//引入导航守卫
import { beforeEach, afterEach } from './guards'const router = createRouter({history: createWebHashHistory(), //hash模式routes: AppRoutes
})//全局前置导航守卫
router.beforeEach(beforeEach)//全局后置导航守卫
router.afterEach(afterEach)export default router

6.router目录下新增routes.js （路由表）

/*** 路由表*/export const AppRoutes = [{path: '/',name: '登录',component: () => import('../views/Login.vue')},{path: '/',name: '首页',component: () => import('../views/Home.vue')}
]

7.router目录下新增 guards.js （导航守卫）

/****导航守卫*///前置
export const beforeEach = () => {console.log('前置')return true
}//后置
export const afterEach = () => {console.log('后置')
}

8.在src\renderer\src\main.js 中引入路由

//import './assets/main.css'import { createApp } from 'vue'
import App from './App.vue'import router from './router'createApp(App).use(router).mount('#app')

9.测试路由是否正常访问

npm run dev 启动项目，访问是否正常显示内容。

三、安装store (pinia) 和持久化存储

安装插件pinia

pinia的优点

更好的支持vue3和Ts
vuedevtools更好的支持pinia
支持服务端渲染
支持插件扩展功能

1.下载安装pinia

npm install pinia -S

在这里插入图片描述

安装插件pinnia-plugin-persist

2.下载安装pinnia-plugin-persist 用于持久化存储

pinnia-plugin-persist 是一个用于 Vue.js 应用的状态管理库 Pinnia 的一个插件，它用于在浏览器中持久化状态。有时候我们需要持久化state数据，vue2我们采用localstorage多一点，这里我们推荐使用pinia-plugin-persist，安装 pinia-plugin-persist。

npm i pinia-plugin-persist

在这里插入图片描述

持久化存储

3.src目录下新增store目录，新增modules目录，这里存放模块的store文件。

举例新增useUserStore.js文件，配置persist

import { defineStore } from 'pinia'// useStore 可以是 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的唯一 id
export const useUserStore = defineStore('userStore', {// 推荐使用 完整类型推断的箭头函数state: () => {return {token: 'xxxxxxxxxxxxxxxxxxabcd'}},actions: {},getters: {},persist: {// 开启持久化enabled: true,// 选择存储方式和内容strategies: [{storage: localStorage, //默认走sessionpaths: ['token']}]}
})

增加全局store ：新建index.js文件，存放公共配置，引入useUserStore。模块少的话其实可以不用写，可以忽略这个。

import { defineStore } from 'pinia'import { useUserStore } from './modules/useUserStore'export const useStore = defineStore('storeId', {// 推荐使用 完整类型推断的箭头函数state: () => {return {user: useUserStore() //用户}},actions: {},getters: {},
})

在这里插入图片描述

4.在mian.js中引入并use 引入注册

// 使用持久化插件
import piniaPluginPersist from 'pinia-plugin-persist'
const store = createPinia()
store.use(piniaPluginPersist)createApp(App).use(router).use(store).mount('#app')

5.测试，修改Login.vue文件如下。npm run dev 运行后，在浏览器打开，控制台调试模式，点击按钮，查看浏览器的Local storage是否生效

<script setup name="">
import { useUserStore } from '../store/modules/useUserStore'
const userStore = useUserStore()const getToken =()=>{userStore.token = '测试'
}
</script><template><div>首页</div><button @click="getToken">token</button><div>{{ userStore.token}}</div>
</template>

测试运行如下：

在这里插入图片描述

四、路径别名

配置文件 electron.vite.config.mjs

import { resolve } from 'path'
import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({main: {plugins: [externalizeDepsPlugin()]},preload: {plugins: [externalizeDepsPlugin()]},renderer: {resolve: {alias: {'@renderer': resolve('src/renderer/src'),//增加路径别名'@store': resolve('src/renderer/src/store'),'@views': resolve('src/renderer/src/views'),'@router': resolve('src/renderer/src/router'),'@components': resolve('src/renderer/src/components')}},plugins: [vue()]}
})

在这里插入图片描述

之前文件的引入都可以修改为别名的形式

export const AppRoutes = [{path: '/',name: '登录',component: () =>import ('@views/Login.vue')},{path: '/',name: '首页',component: () =>import ('@views/Home.vue')}
]import { useUserStore } from '@store/modules/useUserStore'//引入路由表
import { AppRoutes } from '@router/routes'
//引入导航守卫
import { beforeEach, afterEach } from '@router/guards'

五、配置代理和请求二次封装

配置代理

配置文件 electron.vite.config.mjs中 renderer下面的

resolve:同级新增配置

 server: {proxy: {'/api': {target: 'http://127.0.0.1:3000', //访问地址changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')}}},

安装插件axious

1.下载安装 axious

npm install axios

在这里插入图片描述

请求二次封装

2.src目录下新增 utils/request.js文件

配置请求拦截器，响应拦截器

import axios from 'axios'//创建axious对象
const request = axios.create({baseURL: '/api'
})// 添加请求拦截器
request.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config},function (error) {// 对请求错误做些什么return Promise.reject(error)}
)// 添加响应拦截器
request.interceptors.response.use(function (response) {// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么return response},function (error) {// 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么return Promise.reject(error)}
)export default request

3.electron.vite.config.mjs文件内配置api目录和utils目录的路径别名。

alias: {'@renderer': resolve('src/renderer/src'),//增加路径别名'@store': resolve('src/renderer/src/store'),'@views': resolve('src/renderer/src/views'),'@router': resolve('src/renderer/src/router'),'@components': resolve('src/renderer/src/components'),'@utils': resolve('src/renderer/src/utils'),'@api': resolve('src/renderer/src/api'),}

4.src目录下新增 api目录，存放api请求文件。举例新增login.js

import request from '../utils/request'
export const loginByJson = (data) => {return request({url: '/u/loginByJson',method: 'post',data})
}

5.测试

六、安装使用Element Plus

官网：一个 Vue 3 UI 框架 | Element Plus

安装element-plus

1.安装element-plus

npm install element-plus --save

在这里插入图片描述

完整引入

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'const app = createApp(App)app.use(ElementPlus)
app.mount('#app')

按需引入

按需导入：您需要使用额外的插件来导入要使用的组件。

自动导入推荐

2.首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

3.配置你的 Vite 的配置文件，即electron.vite.config.mjs 文件中，引入

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({// ...plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})

所有代码如下 electron.vite.config.mjs

import { resolve } from 'path'
import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import vue from '@vitejs/plugin-vue'//引入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({main: {plugins: [externalizeDepsPlugin()]},preload: {plugins: [externalizeDepsPlugin()]},renderer: {resolve: {alias: {'@renderer': resolve('src/renderer/src'),//增加路径别名'@store': resolve('src/renderer/src/store'),'@views': resolve('src/renderer/src/views'),'@router': resolve('src/renderer/src/router'),'@components': resolve('src/renderer/src/components'),'@utils': resolve('src/renderer/src/utils'),'@api': resolve('src/renderer/src/api')}},server: {proxy: {'/api': {target: 'http://127.0.0.1:3000',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')}}},plugins: [AutoImport({resolvers: [ElementPlusResolver()]}),Components({resolvers: [ElementPlusResolver()]}),vue()]}
})

4.测试，Login.vue中添加组件，运行查看页面效果

<script setup name="">
import { useUserStore } from '@store/modules/useUserStore'const userStore = useUserStore()const getToken =()=>{userStore.token = '测试'
}import { loginByJson } from '@api/login';
const getLogin = async()=>{
let res = await loginByJson({"password": "Admin",//密码"username": "Admin",//用户名}
)
}
</script><template><div>首页</div><button @click="getToken">token</button><button @click="getLogin">登录</button><el-button type="primary" >Primary</el-button><div>{{ userStore.token}}</div>
</template>

下载引入icon

1.安装

npm install @element-plus/icons-vue

在这里插入图片描述

2.main.js中引入

// main.js// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}

【electron-vite】搭建electron+vue3框架基础

一、拉取项目 electron-vite 中文文档地址： https://cn-evite.netlify.app/guide/ 官网网址：https://evite.netlify.app/ 版本 vue版本：vue3 构建工具：vite 框架类型：Electron JS语法：TypeScript &…...

编程日记 2025/5/14 19:27:11

第三方Express 路由和路由中间件

文章目录 1、Express 应用使用回调函数的参数： request 和 response 对象来处理请求和响应的数据。2、Express路由1.路由方法2.路由路径3.路由处理程序 3. 模块化路由4. Express中间件1.中间件简介2.中间件分类3.自定义中间件 1、Express 应用使用回调函数的参数&am…...

编程日记 2025/5/14 18:32:26

WPF 常用的5个布局容器控件介绍

1. Grid Grid 是最常用的布局容器之一，它允许开发者以表格的方式对控件进行组织和布局。Grid 使用行和列来划分区域，可以精确控制控件的位置和大小。特点： 行列定义：Grid 使用 RowDefinitions 和 ColumnDefinitions 来定义行和…...

编程日记 2025/5/12 21:59:00

【JAVA] 杂谈： java中的拷贝（克隆方法）

这篇文章我们来介绍什么是拷贝，并且实现浅拷贝到深拷贝。目录一、浅拷贝 1.1 clone 方法 1.2 实现浅拷贝： 1.2.1 重写 clone方法 1.2.2 实现接口 Cloneable 1.2.3 调用克隆方法 1.2.4 原理图： 1.3 浅拷贝的不足 1.3.1 增加引用…...

编程日记 2025/5/10 11:27:46

同时多平台git配置：GitHub和Gitee生成不同的SSH Key

文章目录 GitHub和Gitee生成不同的SSH Key步骤1：生成SSH Key步骤2：配置SSH配置文件步骤3：查看SSH公钥步骤4：将SSH公钥添加到GitHub和Gitee步骤5：测试SSH连接步骤6：添加remote远程库 GitHub和Gitee生成不同的…...

编程日记 2025/5/14 18:29:44

flink1.6集成doris，并从mysql同步数据到doris

使用 Apache Flink 1.6 集成 Doris，并从 MySQL 同步数据到 Doris 是一个复杂的任务，但可以通过以下步骤实现。Doris 是一个现代化的 MPP（大规模并行处理）SQL 数据库，支持实时分析和交互式查询。Flink 可以作为实时数据…...

编程日记 2025/5/14 18:29:44

手搓一个不用中间件的分表策略

场景：针对一些特别的项目，不用中间件，以月为维度进行分表，代码详细设计方案 1. 定义分片策略首先，定义一个分片策略类，用于决定数据存储在哪个分表中 import java.time.LocalDate; import java.time.fo…...

编程日记 2025/5/14 18:14:05

AI前景分析展望——GPTo1 SoraAI

引言人工智能（AI）领域的飞速发展已不仅仅局限于学术研究，它已渗透到各个行业，影响着从生产制造到创意产业的方方面面。在这场技术革新的浪潮中，一些领先的AI模型，像Sora和OpenAI的O1，凭借其强大…...

编程日记 2025/5/14 18:34:43

损失函数Hinge Loss介绍

Hinge Loss 是一种损失函数，广泛用于支持向量机（SVM, Support Vector Machine）和一些分类问题中。它特别适合用于二分类问题，主要目标是让模型的预测值（通常是经过线性变换的原始分数）与真实标签之间的间隔尽可能大，从而提高分类的鲁棒性。 Hinge Loss 的定义 Hinge…...

编程日记 2025/5/14 11:57:57

多维高斯分布（Multivariate Gaussian Distribution）以及协方差矩阵：解析与应用

多维高斯分布：全面解析及其应用 1. 什么是多维高斯分布？ 多维高斯分布（Multivariate Gaussian Distribution），也称多元正态分布，是高斯分布在高维空间中的推广。它描述了随机向量 ( x ( x 1 , x 2 , … ,…...

编程日记 2025/5/10 20:14:45

前端开发常用快捷键

浏览器 ctrl e 光标定位在搜索框ctrl r 刷新ctrl t 新打开tabctrl tab 向右切换tabctrl shift tab 向左切换tab vscode ctrl p 全局搜索文件ctrl f 当前文件搜索alt 光标左键向下拖动：竖向选中多行文本ctrl b 切换侧边栏显示隐藏ctrl shift p 显示命…...

编程日记 2025/5/14 19:20:45

用MATLAB符号工具建立机器人的动力学模型

目录介绍代码功能演示拉格朗日方法回顾求解符号表达式数值求解介绍开发机器人过程中经常需要用牛顿-拉格朗日法建立机器人的动力学模型，表示为二阶微分方程组。本文以一个二杆系统为例，介绍如何用MATLAB符号工具得到微分方程表达式，只需要…...

编程日记 2025/5/14 10:47:59

全面解析 MySQL 常见问题的排查与解决方法

目录前言1. 查看 MySQL 日志信息1.1 日志文件的种类与路径1.2 查看日志内容的方法1.3 日志分析的关键点 2. 查看 MySQL 服务状态2.1 查看服务状态2.2 检查进程运行情况2.3 常见启动失败问题与解决 3. 检查 MySQL 配置信息3.1 配置文件的路径与内容3.2 验证配置文件的正确性 4.…...

编程日记 2025/5/14 18:51:40

泷羽Sec-星河飞雪-BurpSuite之解码、日志、对比模块基础使用

免责声明学习视频来自 B 站up主泷羽sec，如涉及侵权马上删除文章。笔记的只是方便各位师傅学习知识，以下代码、网站只涉及学习内容，其他的都与本人无关，切莫逾越法律红线，否则后果自负。泷羽sec官网：http…...

编程日记 2025/5/12 23:08:42

【小白学机器学习34】基础统计2种方法：用numpy的方法np().mean()等进行统计，pd.DataFrame.groupby() 分组统计

目录 1 用 numpy 快速求数组的各种统计量：mean, var, std 1.1 数据准备 1.2 直接用np的公式求解 1.3 注意问题 1.4 用print() 输出内容，显示效果 2 为了验证公式的背后的理解，下面是详细的展开公式的求法 2.1 均值mean的详细 2.2 方差…...

编程日记 2025/5/3 15:17:20

【C++】stack和queue

目录 1. stack的介绍和使用 1.1 stack的介绍 1.2 stack的使用 2. queue的介绍和使用 2.1 queue的介绍 2.2 queue的使用 3. 容器适配器 3.1 什么是适配器 3.2 STL标准库中stack和queue的底层结构 3.3 deque的简单介绍(了解) 3.3.1 deque的原理介绍 3.3.2 deque优势与…...

编程日记 2025/5/6 3:13:39

向量的内积和外积为什么这样定义

向量的内积和外积为什么这样定义 flyfish 定义、公理与证明的区别定义： 定义是人为规定的，用于描述概念的含义。例如，内积和外积是根据实际需求定义的，目的是描述几何和代数性质。定义不需要证明。公理： 公理是数…...

编程日记 2025/5/14 6:22:40

简述循环神经网络RNN

1.why RNN CNN：处理图像之间没有时间/先后关系 RNN：对于录像，图像之间也许有时间/先后顺序，此时使用CNN效果不会很好，同理和人类的语言相关的方面时间顺序就更为重要了 2.RNN和CNN之间的关联 RNN和CNN本质上其实一…...

编程日记 2025/5/7 10:56:27

【Electron学习笔记（四）】进程通信（IPC）

进程通信（IPC） 进程通信（IPC）前言正文1、渲染进程→主进程（单向）2、渲染进程⇌主进程（双向）3、主进程→渲染进程进程通信（IPC） 前言在Electron框架中&…...

编程日记 2025/5/12 12:19:45

APP自动化测试框架的开发

基于appium的APP自动化测试框架的开发流程概览 1. 环境搭建安装Appium Server 下载与安装：可以从Appium官方网站（Redirecting）下载安装包。对于Windows系统，下载.exe文件后双击安装；对于Mac系统，下载.dmg…...

编程日记 2025/5/12 17:35:19

【深度学习】各种卷积—卷积、反卷积、空洞卷积、可分离卷积、分组卷积

在全连接神经网络中，每个神经元都和上一层的所有神经元彼此连接，这会导致网络的参数量非常大，难以实现复杂数据的处理。为了改善这种情况，卷积神经网络应运而生。一、卷积在信号处理中，卷积被定义为一个函数经过翻转…...

编程日记 2025/5/7 13:34:17

pytorch 融合 fuse 学习笔记

目录 fuse_lora 作用是什么 fuse_modules源码解读 fuse_lora 作用是什么在深度学习模型微调场景下（与 LoRA 相关） 参数融合功能在使用 LoRA（Low - Rank Adaptation）对预训练模型进行微调后，fuse_lora函数的主要作…...

编程日记 2025/5/12 6:10:27

41 基于单片机的小车行走加温湿度检测系统

目录一、主要功能二、硬件资源三、程序编程四、实现现象一、主要功能基于51单片机，采样DHT11温湿度传感器检测温湿度，滑动变阻器连接数码转换器模拟电量采集传感器， 电机采样L298N驱动，各项参数通过LCD1602显示&#x…...

编程日记 2025/5/4 17:48:17

GitLab: You cannot create a branch with a SHA-1 or SHA-256 branch name

最近在迁移git库，把代码从gerrit迁移到gitlab，有几个库报错如下： GitLab: You cannot create a branch with a SHA-1 or SHA-256 branch name ! [remote rejected] refs/users/73/373/edit-95276/1 -> refs/users/73/373/edit-95276/1 (p…...

编程日记 2025/5/11 3:48:46

YOLOv9改进，YOLOv9引入TransNeXt中的ConvolutionalGLU模块，CVPR2024，二次创新RepNCSPELAN4结构

摘要由于残差连接中的深度退化效应，许多依赖堆叠层进行信息交换的高效视觉Transformer模型往往无法形成足够的信息混合，导致视觉感知不自然。为了解决这个问题，作者提出了一种聚合注意力（Aggregated Attention），这是一种基于仿生设计的token混合器，模拟了生物的中央凹…...

编程日记 2025/5/14 8:19:30

TorchMoji使用教程/环境配置（2024）

TorchMoji使用教程/环境配置（2024） TorchMoji简介这是一个基于pytorch库，用于将文本分类成不同的多种emoji表情的库，适用于文本的情感分析配置流程从Anaconda官网根据提示安装conda git拉取TorchMoji git clone https://gi…...

编程日记 2025/5/11 17:38:55

uniapp运行时，同步资源失败，未得到同步资源的授权，请停止运行后重新运行，并注意手机上的授权提示。

遇到自定义基座调试时安装无效或无反应？本文教你用 ADB 工具快速解决：打开 USB 调试，连接设备，找到应用包名，一键卸载问题包，清理干净后重新运行调试基座，轻松搞定！ 问题场景&#…...

编程日记 2025/5/13 0:58:54

uniapp中父组件调用子组件方法

实现过程（setup语法糖形式下） 在子组件完成方法逻辑，并封装。在子组件中使用defineExpose暴露子组件的该方法。在父组件完成子组件ref的绑定。通过ref调用子组件暴露的方法。子组件示例 <template> </template><script se…...

编程日记 2025/5/12 7:33:31

腾讯云 AI 代码助手：单元测试应用实践

引言在软件开发这一充满创造性的领域中，开发人员不仅要构建功能强大的软件，还要确保这些软件的稳定性和可靠性。然而，开发过程中并非所有任务都能激发创造力，有些甚至是重复且乏味的。其中，编写单元测试无疑是最令人…...

编程日记 2025/5/11 21:03:23

ArcGIS栅格影像裁剪工具

1、前言在最近的栅格转矢量处理过程中，发现二值化栅格规模太大，3601*3601，并且其中的面元太过细碎，通过arcgis直接栅格转面有将近几十万的要素，拿这样的栅格数据直接运行代码，发现速度很慢还难以执行出来结…...

编程日记 2025/5/11 6:17:24

VueWordCloud标签云初实现

文章目录 VueWordCloud学习总结安装初使用在组件中注册该组件简单使用项目中实现最终实现效果 VueWordCloud学习总结本次小组官网的项目中自己要负责标签模块，想要实现一个标签云的效果，搜索了很多，发现vue有一个VueWordCloud库&#xff0c…...

编程日记 2025/5/9 13:24:09

AI数据分析工具（二）

豆包-免费优点强大的数据处理能力： 豆包能够与Excel无缝集成，支持多种数据类型的导入，包括文本、数字、日期等，使得数据整理和分析变得更加便捷。豆包提供了丰富的数据处理功能，如数据去重、填充缺失值、转换格式等…...

编程日记 2025/5/3 19:41:06

sizeof和strlen区分，（好多例子）

sizeof算字节大小带\0 strlen算字符串长度 \0之前...

编程日记 2025/5/3 15:05:14

求100之内的素数-多语言

目录 C 语言实现方法 1: 使用 for 循环方法 2: 使用埃拉托斯特尼筛法方法 3: 使用自定义判断素数 Python 实现方法 1: 使用自定义函数判断素数方法 2: 使用埃拉托斯特尼筛法（Sieve of Eratosthenes） 方法 3: 使用递归方法 Java 实现方法…...

编程日记 2025/5/13 13:03:10

0.shell 脚本执行方式

1.脚本格式要求 🥑脚本以 #!/bin/bash 开头 🥦 脚本要有可执行权限 2.执行脚本的两种方式 🥬 方式1：赋予x执行权限 🥒 方式2： sh执行 ...

编程日记 2025/4/15 10:57:11

Web实时通信@microsoft/signalr

概要说明 signalr 是微软对 websocket技术的封装; build() 与后端signalR服务建立链接；使用 on 方法监听后端定义的函数；ps：由后端发起，后端向前端发送数据使用 invoke 主动触发后端的函数；ps：由前端发起&a…...

编程日记 2025/5/9 21:10:32

智截违规，稳保安全 | 聚铭视频专网违规外联治理系统新品正式发布

“千里之堤，毁于蚁穴”。违规外联作为网络安全的一大隐患， 加强防护已刻不容缓。这一次， 我们带着全新的解决方案来了 ——聚铭视频专网违规外联治理系统， 重磅登场！...

编程日记 2025/5/13 12:20:23

博弈论算法详解与Python实现

目录博弈论算法详解与Python实现第一部分：博弈论简介与算法概述1.1 博弈论概述1.2 博弈论算法概述第二部分：纳什均衡算法2.1 纳什均衡的定义2.2 纳什均衡算法的实现2.2.1 算法思路2.2.2 Python实现2.2.3 设计模式分析第三部分：囚徒困境问题的博弈论算法3.1 囚徒困境的定义3…...

编程日记 2025/5/11 8:35:01

Python学习笔记之IP监控及告警

一、需求说明作为一名运维工程师，监控系统必不可少。不过我们的监控系统往往都是部署在内网的，如果互联网出口故障，监控系统即使发现了问题，也会告警不出来，这个时候我们就需要补充监控措施，增加从外到内的…...

编程日记 2025/4/10 9:04:56

2024/11/30 RocketMQ本机安装与SpringBoot整合

目录一、RocketMQ简介 1.1、核心概念 1.2、应用场景 1.3、架构设计 2、RocketMQ Server安装 3、RocketMQ可视化控制台安装与使用 4、SpringBoot整合RocketMQ实现消息发送和接收 4.1、添加maven依赖 4.2、yaml配置 4.3、生产者 4.4、消费者 4.5、接口 4.6、接口测试一、R…...

编程日记 2025/5/11 14:23:21

解决“磁盘已插上,但Windows系统无法识别“问题

电脑上有2块硬盘，一块是500GB的固态硬盘，另一块是1000GB的机械硬盘，按下开机键，发现500G的固态硬盘识别了，但1000GB的机械硬盘却无法识别。后面为了描述方便，将"500GB的固态硬盘"称为X盘&#xf…...

编程日记 2025/5/14 6:25:18

解决vue3，动态添加路由，刷新页面出现白屏或者404

解决vue3，动态添加路由，刷新页面出现白屏或者404 1.解决出现刷新页面，出现404的情况 1.问题的出现在做毕设的时候，在权限路由得到时候，我问通过router**.**addRoute(item)的方式，在路由守卫动态添加路由…...

编程日记 2025/5/4 10:46:53

大数据新视界 -- 大数据大厂之 Hive 数据质量监控：实时监测异常数据（下）（18/ 30）

💖💖💖亲爱的朋友们，热烈欢迎你们来到青云交的博客！能与你们在此邂逅，我满心欢喜，深感无比荣幸。在这个瞬息万变的时代，我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而我的…...

编程日记 2025/5/14 5:39:00

可视化建模以及UML期末复习篇----相关软件安装

作为一个过来人，我的建议是别过来。一、可视化建模 <1>定义: 官方：一种使用图形符号来表示系统结构和行为的建模技术。我：其实说白了就是把工作流程用图形画出来。懂不？ <2>作用: 提高理解和分析复杂系统的能力。促…...

编程日记 2025/5/11 18:21:19

Flask项目入门—request以及Response

导入 request（请求）以及Response（响应）通过flask导入，如下： from flask import Blueprint, request, render_template, \jsonify, make_response, Response, redirect, url_for, abort request&#xff…...

编程日记 2025/5/6 5:18:11

【VUE3】【Naive UI】＜n-button＞标签

【VUE3】【Naive UI】＜n-button＞ 标签 **type**- 定义按钮的类型，这会影响按钮的颜色和样式。**size**- 设置按钮的大小。**disabled**- 布尔值，控制按钮是否处于禁用状态。**loading**- 布尔值，表示按钮是否处于加载状…...

编程日记 2025/5/8 17:06:26

接口测试工具：reqable

背景在众多接口测试工具中挑选出一个比较好用的接口测试工具。使用过很多工具，如Postman、Apifox、ApiPost等，基本上是同类产品，一般主要使用到的功能就是API接口和cURL，其他的功能目前还暂未使用到。对比性能方面&#xff…...

编程日记 2025/5/12 9:01:02

autoware.universe源码略读(3.20)--perception:radar_tracks_msgs_converter

autoware.universe源码略读3.20--perception:radar_tracks_msgs_converter Overviewradar_tracks_msgs_converter_node Overview 这里看起来是非常简单的一个模块，作用就是把radar_msgs/msg/RadarTracks类型的消息数据转换到autoware_auto_perception_msgs/msg/Tra…...

编程日记 2025/5/13 17:12:11

【论文阅读】Multi-level Semantic Feature Augmentation for One-shot Learning

用于单样本学习的多层语义特征增强引用：Chen, Zitian, et al. “Multi-level semantic feature augmentation for one-shot learning.” IEEE Transactions on Image Processing 28.9 (2019): 4594-4605. 论文地址：下载地址论文代码：https:…...

编程日记 2025/5/14 13:52:37

说说Elasticsearch查询语句如何提升权重？

大家好，我是锋哥。今天分享关于【说说Elasticsearch查询语句如何提升权重？】面试题。希望对大家有帮助； 说说Elasticsearch查询语句如何提升权重？ 1000道互联网大厂Java工程师精选面试题-Java资源分享网在 Elasticsearch 中&…...

编程日记 2025/5/13 7:11:10

一、拉取项目 electron-vite

版本

安装

前提条件

搭建第一个 electron-vite 项目

二、安装路由和二次封装

路由vue-router

二次封装路由

三、安装store (pinia) 和持久化存储

安装插件pinia

安装插件pinnia-plugin-persist

持久化存储

四、路径别名

五、配置代理 和请求二次封装

配置代理

安装插件axious

请求二次封装

六、安装使用Element Plus

安装element-plus

完整引入

按需引入

自动导入推荐

下载引入icon

相关文章：

五、配置代理和请求二次封装