【electron-vite】搭建electron+vue3框架基础
一、拉取项目 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 &…...

05《存储器层次结构与接口》计算机组成与体系结构 系列课
目录 存储器层次结构概述 层次结构的定义 存储器的排名 存储器接口 处理器与存储器的速度匹配 存储器接口的定义 存储器访问命中率 两种接口 第1种方式:并行 命中率的计算 存储器访问时间 第2种方式:逐级 结语 大家好,欢迎回来。…...
elasticsearch报错fully-formed single-node cluster with cluster UUID
1.问题描述 k8s集群内部署的es中间件起不来,查看日志发现如下警告,节点发现功能开启,但是目前我是单节点服务,所以尝试编辑sts将节点发现功能去掉或者在部署时将你的sts的yaml文件和chart文件修改重新部署以去掉该功能 {"t…...

Milvus×Florence:一文读懂如何构建多任务视觉模型
近两年来多任务学习(Multi-task learning)正取代传统的单任务学习(single-task learning),逐渐成为人工智能领域的主流研究方向。其原因在于,多任务学习可以让我们以最少的人力投入,获得尽可能多…...
DAPP
02-DAPP 1 啥是 DApp? DApp,部署在链上的去中心化的应用。 DApp 是开放源代码,能运行在分布式网络上,通过网络中不同对等节点相互通信进行去中心化操作的应用。 DAPP 开放源代码,才能获得人的信任。如比特币ÿ…...
生产环境中,nginx 最多可以代理多少台服务器,这个应该考虑哪些参数 ?怎么计算呢
生产环境中,nginx 最多可以代理多少台服务器,这个应该考虑哪些参数 ?怎么计算呢 关键参数计算方法评估步骤总结 在生产环境中,Nginx最多可以代理的服务器数量并没有一个固定的限制,它取决于多个因素,包括Ng…...

【深度学习|目标跟踪】StrongSORT 详解(以及StrongSORT++)
StrongSort详解 1、论文及源码2、DeepSORT回顾3、StrongSORT的EMA4、StrongSORT的NSA Kalman5、StrongSORT的MC6、StrongSORT的BOT特征提取器7、StrongSORT的AFLink8、StrongSORT的GSI模块 1、论文及源码 论文地址:https://arxiv.org/pdf/2202.13514 源码地址&#…...

23种设计模式-原型(Prototype)设计模式
文章目录 一.什么是原型设计模式?二.原型模式的特点三.原型模式的结构四.原型模式的优缺点五.原型模式的 C 实现六.原型模式的 Java 实现七. 代码解析八.总结 类图: 原型设计模式类图 一.什么是原型设计模式? 原型模式(Prototype…...
Qt—QLineEdit 使用总结
文章参考:Qt—QLineEdit 使用总结 一、简述 QLineEdit是一个单行文本编辑控件。 使用者可以通过很多函数,输入和编辑单行文本,比如撤销、恢复、剪切、粘贴以及拖放等。 通过改变 QLineEdit 的 echoMode() ,可以设置其属性,比如以密码的形式输入。 文本的长度可以由 m…...

go-zero使用自定义模板实现统一格式的 body 响应
前提 go环境的配置、goctl的安装、go-zero的基本使用默认都会 需求 go-zero框架中,默认使用goctl命令生成的代码并没有统一响应格式,现在使用自定义模板实现统一响应格式: {"code": 0,"msg": "OK","d…...
BUGKU printf
整体思路 实现循环-->获取libc版本和system函数地址->将strcpy的got表项修改为system并获得shell 第一步:实现循环 从汇编语句可以看出,在每次循环结束时若0x201700处的值是否大于1则会继续循环。 encode1会将编码后的结果保存至0x2015c0处&am…...

深度学习:梯度下降法
损失函数 L:衡量单一训练样例的效果。 成本函数 J:用于衡量 w 和 b 的效果。 如何使用梯度下降法来训练或学习训练集上的参数w和b ? 成本函数J是参数w和b的函数,它被定义为平均值; 损失函数L可以衡量你的算法效果&a…...

`console.log`调试完全指南
大家好,这里是 Geek技术前线。 今天我们来探讨 Console.log() 的一些优点。并分析一些基本概念和实践,这些可以让我们的调试工作变得更加高效。 理解前端 log 与后端 log 的区别 前端 log 与后端 log 有着显著的不同,理解这一点至关重要。…...

ROS VSCode调试方法
VSCode 调试 Ros文档 1.编译参数设置 cd catkin_ws catkin_make -DCMAKE_BUILD_TYPEDebug2.vscode 调试插件安装 可在扩展中安装(Ctrl Shift X): 1.ROS 2.C/C 3.C Intelliense 4.Msg Language Support 5.Txt Syntax 3.导入已有或者新建ROS工作空间 3.1 导入工作…...

16 —— Webpack多页面打包
需求:把 黑马头条登陆页面-内容页面 一起引入打包使用 步骤: 准备源码(html、css、js)放入相应位置,并改用模块化语法导出 原始content.html代码 <!DOCTYPE html> <html lang"en"><head&…...

微服务即时通讯系统的实现(服务端)----(3)
目录 1. 消息存储子服务的实现1.1 功能设计1.2 模块划分1.3 模块功能示意图1.4 数据管理1.4.1 数据库消息管理1.4.2 ES文本消息管理 1.5 接口的实现1.5.1 消息存储子服务所用到的protobuf接口实现1.5.2 最近N条消息获取接口实现1.5.3 指定时间段消息搜索接口实现1.5.4 关键字消…...
.net6.0 mvc 传递 model 实体参数(无法对 null 引用执行运行时绑定)
说一下情况: 代码没问题,能成功从数据库里查到数据,能将数据丢给ViewBag.XXXX, 在View页面也能获取到 ViewBag.XXXX的值,但是发布到线上后报这个错: Microsoft.CSharp.RuntimeBinder.RuntimeBinderException: 无法对 …...
VUE 入门级教程:开启 Vue.js 编程之旅
一、Vue.js 简介 Vue.js 是一套构建用户界面的渐进式 JavaScript 框架。它专注于视图层的开发,能够轻松地与其他库或现有项目进行整合。Vue.js 的核心库只关注视图层,通过简洁的 API 实现数据绑定和 DOM 操作的响应式更新,让开发者可以高效地…...

Ubantu系统docker运行成功拉取失败【成功解决】
解决docker运行成功拉取失败 失败报错 skysky-Legion-Y7000-IRX9:~$ docker run hello-world docker: permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Head “http://%2Fvar%2Frun%2Fdocker.sock/_ping”: dial uni…...

mvn-mac操作小记
1.安装brew 如果报错,Warning: /opt/homebrew/bin is not in your PATH. vim ~/.zshrc,最后一行追加 export PATH“/opt/homebrew/bin:$PATH” source ~/.zshrc 2.安装brew install maven mvn -version查看路径 Maven home: /opt/homebrew/Cellar/mav…...

3.3.1_1 检错编码(奇偶校验码)
从这节课开始,我们会探讨数据链路层的差错控制功能,差错控制功能的主要目标是要发现并且解决一个帧内部的位错误,我们需要使用特殊的编码技术去发现帧内部的位错误,当我们发现位错误之后,通常来说有两种解决方案。第一…...

Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)
概述 在 Swift 开发语言中,各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过,在涉及到多个子类派生于基类进行多态模拟的场景下,…...
《Playwright:微软的自动化测试工具详解》
Playwright 简介:声明内容来自网络,将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具,支持 Chrome、Firefox、Safari 等主流浏览器,提供多语言 API(Python、JavaScript、Java、.NET)。它的特点包括&a…...
java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别
UnsatisfiedLinkError 在对接硬件设备中,我们会遇到使用 java 调用 dll文件 的情况,此时大概率出现UnsatisfiedLinkError链接错误,原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用,结果 dll 未实现 JNI 协…...

基于当前项目通过npm包形式暴露公共组件
1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹,并新增内容 3.创建package文件夹...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

【Java_EE】Spring MVC
目录 Spring Web MVC 编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 编辑参数重命名 RequestParam 编辑编辑传递集合 RequestParam 传递JSON数据 编辑RequestBody …...

如何在网页里填写 PDF 表格?
有时候,你可能希望用户能在你的网站上填写 PDF 表单。然而,这件事并不简单,因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件,但原生并不支持编辑或填写它们。更糟的是,如果你想收集表单数据ÿ…...

九天毕昇深度学习平台 | 如何安装库?
pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子: 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

HarmonyOS运动开发:如何用mpchart绘制运动配速图表
##鸿蒙核心技术##运动开发##Sensor Service Kit(传感器服务)# 前言 在运动类应用中,运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据,如配速、距离、卡路里消耗等,用户可以更清晰…...