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

	npm install
	npm 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, //默认走session
        paths: ['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'

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

配置代理

  1. 配置文件 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)
}

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

了解HTTPS以及CA在其中的作用

了解HTTPS以及CA在其中的作用

在这个信息爆炸的时代&#xff0c;每一次指尖轻触屏幕&#xff0c;都是一次数据的旅行。但您是否真正了解&#xff0c;这些数据在通往目的地的旅途中&#xff0c;是如何被保护的呢&#xff1f; HTTPS&#xff08;HyperText Transfer Protocol Secure&#xff09;是一种安全的网…
阅读更多...
Spring Boot日志总结

Spring Boot日志总结

文章目录 1.我们的日志2.日志的作用3.使用日志对象打印日志4.日志框架介绍5.深入理解门面模式(外观模式)6.日志格式的说明7.日志级别7.1日志级别分类7.2配置文件添加日志级别 8.日志持久化9.日志文件的拆分9.1官方文档9.2IDEA演示文件分割 10.日志格式的配置11.更简单的日志输入…
阅读更多...
Transformer 模型：序列数据处理的自注意力神经网络架构

Transformer 模型：序列数据处理的自注意力神经网络架构

摘要&#xff1a; 本文全面深入地探讨 Transformer 模型&#xff0c;这一基于自注意力机制的神经网络结构在序列数据处理领域具有开创性意义。详细阐述其架构组成、自注意力机制原理、在自然语言处理等多方面的应用&#xff0c;并提供丰富的代码示例以助力读者深入理解其实现细…
阅读更多...
docker 安装mysql8.4.0

docker 安装mysql8.4.0

1、拉取mysql8.4.0镜像 docker pullmysql:8.4.0-oraclelinux8查看镜像 docker images2、新建宿主机本地目录&#xff1a;用来挂载MySQL容器所产生的数据的目录 mkdir -p /home/admin/data/mysql /home/admin/logs/mysql /home/admin/conf/mysql3、在/home/admin/conf/mysql目…
阅读更多...
Android Studio的AI工具插件使用介绍

Android Studio的AI工具插件使用介绍

Android Studio的AI工具插件使用介绍 一、前言 Android Studio 的 AI 工具插件具有诸多重要作用&#xff0c;以下是一些常见的方面&#xff1a; 代码生成与自动补全 代码优化与重构 代码解读 学习与知识获取 智能搜索与资源推荐实际使用中可以添加注释&#xff0c;解读某段代…
阅读更多...
【Python网络爬虫笔记】2-HTTP协议中网络爬虫需要的请求头和响应头内容

【Python网络爬虫笔记】2-HTTP协议中网络爬虫需要的请求头和响应头内容

1 HTTP 协议整理 HTTP&#xff08;Hyper Text Transfer Protocol&#xff09;即超文本传输协议&#xff0c;是用于从万维网&#xff08;WWW&#xff09;服务器传输超文本到本地浏览器的传送协议&#xff0c;直白点儿&#xff0c;就是浏览器和服务器之间的数据交互就是通过 HTT…
阅读更多...
DroneCAN 最新开发进展，Andrew在Ardupilot开发者大会2024的演讲

DroneCAN 最新开发进展，Andrew在Ardupilot开发者大会2024的演讲

本文是Andrew演讲的中文翻译&#xff0c;你可以直接观看视频了解演讲的全部内容&#xff0c;此演讲视频的中文版本已经发布在Ardupilot社区的Blog板块&#xff0c;你可以在 Arudpilot官网&#xff08;https://ardupilot.org) 获取该视频&#xff1a; 你也可以直接通过Bilibili链…
阅读更多...
前端 vue3 + element-plus + ts 组件通讯，defineEmits，子传父示例

前端 vue3 + element-plus + ts 组件通讯，defineEmits，子传父示例

父组件&#xff1a; 子组件&#xff1a;
阅读更多...
物料理解笔记·蓝白段子线·端子线座子焊接反了怎么处理！！！

物料理解笔记·蓝白段子线·端子线座子焊接反了怎么处理！！！

目录 蓝白端子排线 端子线座子焊接错了怎么办 端子线如何拆线 编写不易&#xff0c;请勿搬运&#xff0c;仅供学习&#xff0c;感谢理解 蓝白端子排线 蓝白端子排线&#xff0c;这种端子线常用与编码电机的接线&#xff0c;或者在板子上通过提供段子线的接口&#xff0c;通…
阅读更多...
BUUCTF—Reverse—GXYCTF2019-luck_guy（9）

BUUCTF—Reverse—GXYCTF2019-luck_guy（9）

下载附件&#xff0c;照例扔入Exeinfo PE查看信息 可执行文件&#xff0c;IDA 64位直接干 进main函数&#xff0c;F5反编译&#xff0c;看主要处理函数&#xff0c;跳转进去 查看&#xff0c;点进patch_me(v4)看看是怎么回事 这里已经相当清楚&#xff0c;逻辑就是如果你输入的…
阅读更多...
jmeter学习（7）命令行控制

jmeter学习（7）命令行控制

jmeter -n -t E:\IOT\test2.jmx -l E:\IOT\output\output.jtl -j E:\IOT\output\jmeter.log -e -o E:\IOT\output\report IOT下创建output 文件夹&#xff0c;jmx文件名避免中文&#xff0c;再次执行output.jtl不能有数据要删除
阅读更多...
OpenCV 图像轮廓查找与绘制全攻略：从函数使用到实战应用详解

OpenCV 图像轮廓查找与绘制全攻略：从函数使用到实战应用详解

摘要&#xff1a;本文详细介绍了 OpenCV 中用于查找图像轮廓的 cv2.findContours() 函数以及绘制轮廓的 cv2.drawContours() 函数的使用方法。涵盖 cv2.findContours() 各参数&#xff08;如 mode 不同取值对应不同轮廓检索模式&#xff09;及返回值的详细解析&#xff0c;搭配…
阅读更多...
智能探针技术：实现可视、可知、可诊的主动网络运维策略

智能探针技术：实现可视、可知、可诊的主动网络运维策略

网络维护的重要性 网络运维是确保网络系统稳定、高效、安全运行的关键活动。在当今这个高度依赖信息技术的时代&#xff0c;网络运维的重要性不仅体现在技术层面&#xff0c;更关乎到企业运营的方方面面。网络运维具有保障网络的稳定性、提升网络运维性能、降低企业运营成本等…
阅读更多...
Elasticsearch集群如何实现高可用和一致性

Elasticsearch集群如何实现高可用和一致性

Elasticsearch集群如何实现高可用和一致性 Elasticsearch (ES) 的高可用性是指集群在部分节点或分片出现故障时&#xff0c;仍能确保数据的持续可用和集群的稳定运行。ES 通过分片机制、主从结构、分配策略、故障恢复和分布式一致性等多种机制实现高可用。 1. 分片机制和副本…
阅读更多...
实现Linux平台自定义协议族

实现Linux平台自定义协议族

一 简介 我们常常在Linux系统中编写socket接收TCP/UDP协议数据&#xff0c;大家有没有想过它怎么实现的&#xff0c;如果我们要实现socket接收自定义的协议数据又该怎么做呢&#xff1f;带着这个疑问&#xff0c;我们一起往下看吧~~ 二 Linux内核函数简介 在Linux系统中要想…
阅读更多...
数组和链表OJ题

数组和链表OJ题

leetcode用编译器调试的技巧 数组和链表练习题 leetcode/reverse_Link/main.c Hera_Yc/bit_C_学习 - 码云 - 开源中国 1、移除元素 ​​​​​​27. 移除元素 - 力扣&#xff08;LeetCode&#xff09; int removeElement(int* nums, int numsSize, int val) {int src 0, …
阅读更多...
VSCode 使用教程：项目使用配置、使用哪些插件、Live Server使用问题及解决方案(你想要的，都在这里)

VSCode 使用教程：项目使用配置、使用哪些插件、Live Server使用问题及解决方案(你想要的，都在这里)

VSCode的配置&#xff1a; Ⅰ、VSCode 可能需要的项目配置&#xff1a;1、项目颜色主题的切换&#xff1a;其一、点击设置 -> 选择主题 -> 选择颜色主题&#xff1a;其二、通过上下键操作&#xff0c;选择想要的主题&#xff1a; 2、项目文件图标主题的切换&#xff1a;其…
阅读更多...
28 基于51单片机的两路电压检测(ADC0808)

28 基于51单片机的两路电压检测(ADC0808)

目录 一、主要功能 二、硬件资源 三、程序编程 四、实现现象 一、主要功能 基于51单片机&#xff0c;通过ADC0808获取两路电压&#xff0c;通过LCD1602显示 二、硬件资源 基于KEIL5编写C代码&#xff0c;PROTEUS8.15进行仿真&#xff0c;全部资源在页尾&#xff0c;提供…
阅读更多...
宠物空气净化器推荐2024超详细测评 希喂VS霍尼韦尔谁能胜出

宠物空气净化器推荐2024超详细测评 希喂VS霍尼韦尔谁能胜出

最近有粉丝一直在评论区和后台探讨宠物空气净化器是不是智商税的问题&#xff0c;有人认为宠物空气净化器肯定不是智商税&#xff0c;有些人认为将其购回家就是个没用的东西&#xff0c;还占地方&#xff0c;双方各有自己的观点。 其实宠物空气净化器和普通的空气净化器是有很大…
阅读更多...
鸿蒙学习笔记：CheckboxGroup组件

鸿蒙学习笔记：CheckboxGroup组件

本次鸿蒙CheckboxGroup组件实战&#xff0c;先创建CheckboxGroupDemoAbility与CheckboxGroupDemo.ets页面&#xff0c;在ets页面以Row、Column布局呈现界面。利用CheckboxGroup管理爱好相关Checkbox&#xff0c;通过状态记录及“确定”按钮实现选择展示。设置页面为首页后启动应…
阅读更多...
最新文章

Copyright @ 2022~2023