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

news2024/12/27 4:01:33

一、拉取项目 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)
}

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

EasyDarwin搭建直播推流服务

EasyDarwin搭建直播推流服务

学习链接 easydarwin官网 - 这里看介绍 easydarwin软件下载地址 - 百度网盘 easydarwin视频 B站 文章目录 学习链接使用下载EasyDarwin压缩包&#xff0c;并解压到目录启动EasyDarwin点播直播easyplayer.jsapidocffmpeg推流rtsp & ffplay拉流 使用 下载EasyDarwin压缩包…
阅读更多...
【RISC-V CPU debug 专栏 2 -- Debug Module (DM), non-ISA】

【RISC-V CPU debug 专栏 2 -- Debug Module (DM), non-ISA】

文章目录 调试模块（DM）功能必须支持的功能可选支持的功能兼容性要求规模限制Debug Module Interface (DMI)总线类型地址与操作地址空间控制机制Debug Module Interface Signals请求信号响应信号信号流程Reset Control复位控制方法全局复位 (`ndmreset`)Hart 复位 (`hartreset…
阅读更多...
【WRF后处理】WRF模拟效果评价及可视化：MB、RMSE、IOA、R

【WRF后处理】WRF模拟效果评价及可视化：MB、RMSE、IOA、R

【WRF后处理】模拟效果评价及可视化 准备工作模型评价指标Python实现代码Python处理代码：导入站点及WRF模拟结果可视化图形及评价指标参考在气象和环境建模中（如使用 WRF 模型进行模拟），模型性能评价指标是用于定量评估模拟值与观测值之间偏差和拟合程度的重要工具。 本博客…
阅读更多...
基于JSP+MySQL的网上招聘系统的设计与实现

基于JSP+MySQL的网上招聘系统的设计与实现

摘要 在这样一个经济飞速发展的时代&#xff0c;人们的生存与生活问题已成为当代社会需要关注的一个焦点。对于一个刚刚 踏入社会的年轻人来说&#xff0c;他对就业市场和形势了解的不够详细&#xff0c;同时对自己的职业规划也很模糊&#xff0c;这就导致大量的 时间被花费在…
阅读更多...
机器学习——生成对抗网络（GANs）：原理、进展与应用前景分析

机器学习——生成对抗网络（GANs）：原理、进展与应用前景分析

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一. 生成对抗网络的基本原理二. 使用步骤2.1 对抗性训练2.2 损失函数 三. GAN的变种和进展四. 生成对抗网络的应用五. 持续挑战与未来发展方向六. 小结 前言 生…
阅读更多...
vue.js学习(day 14)

vue.js学习(day 14)

目录 综合案例&#xff1a;商品列表 自定义指令 main.js(全局注册) import Vue from vue import App from ./App.vueVue.config.productionTip false// //1.全局注册指令 // Vue.directive(focus,{ // //inserted 会在 指令所在的元素&#xff0c;被插入到页面中时触发 /…
阅读更多...
C++类中多线程的编码方式

C++类中多线程的编码方式

问题 在C++代码中，一般的代码是需要封装在类里面，比如对象，方法等。否则就不能很好的利用C++面向对象的能力了。 但是这个方式在处理线程时会碰到一个问题。 考虑下面一个简单的场景： class demoC { public:std::thread t;int x;void threadFunc(){std::cout<<x&…
阅读更多...
使用 Tkinter 创建一个简单的 GUI 应用程序来合并视频和音频文件

使用 Tkinter 创建一个简单的 GUI 应用程序来合并视频和音频文件

使用 Tkinter 创建一个简单的 GUI 应用程序来合并视频和音频文件 Python 是一门强大的编程语言&#xff0c;它不仅可以用于数据处理、自动化脚本&#xff0c;还可以用于创建图形用户界面 (GUI) 应用程序。在本教程中&#xff0c;我们将使用 Python 的标准库模块 tkinter 创建一…
阅读更多...
LearnOpenGL学习（入门--变换，坐标系统，摄像机）

LearnOpenGL学习（入门--变换，坐标系统，摄像机）

完整代码见&#xff1a;zaizai77/Cherno-OpenGL: OpenGL 小白学习之路 glm::mat4 trans; trans glm::rotate(trans, glm::radians(90.0f), glm::vec3(0.0, 0.0, 1.0)); trans glm::scale(trans, glm::vec3(0.5, 0.5, 0.5)); 我们把箱子在每个轴都缩放到0.5倍&#xff0c;然…
阅读更多...
LLamafactory API部署与使用异步方式 API 调用优化大模型推理效率

LLamafactory API部署与使用异步方式 API 调用优化大模型推理效率

文章目录 背景介绍第三方大模型API 介绍LLamafactory 部署API大模型 API 调用工具类项目开源 背景介绍 第三方大模型API 目前&#xff0c;市面上有许多第三方大模型 API 服务提供商&#xff0c;通过 API 接口向用户提供多样化的服务。这些平台不仅能提供更多类别和类型的模型…
阅读更多...
【Leecode】Leecode刷题之路第66天之加一

【Leecode】Leecode刷题之路第66天之加一

题目出处 66-加一-题目出处 题目描述 个人解法 思路&#xff1a; todo代码示例&#xff1a;&#xff08;Java&#xff09; todo复杂度分析 todo官方解法 66-加一-官方解法 方法1&#xff1a;找出最长的后缀9 思路&#xff1a; 代码示例&#xff1a;&#xff08;Java&#…
阅读更多...
uniapp-vue2引用了vue-inset-loader插件编译小程序报错

uniapp-vue2引用了vue-inset-loader插件编译小程序报错

报错信息 Error: Vue packages version mismatch: - vue3.2.45 (D:\qjy-myApp\admin-app\node_modules\vue\index.js) - vue-template-compiler2.7.16 (D:\qjy-myApp\admin-app\node_modules\vue-template-compiler\package.json) This may cause things to work incorrectly.…
阅读更多...
【人工智能-科普】图神经网络（GNN）：与传统神经网络的区别与优势

【人工智能-科普】图神经网络（GNN）：与传统神经网络的区别与优势

文章目录 图神经网络（GNN）：与传统神经网络的区别与优势什么是图神经网络？图的基本概念GNN的工作原理GNN与传统神经网络的不同1. 数据结构的不同2. 信息传递方式的不同3. 模型的可扩展性4. 局部与全局信息的结合GNN的应用领域总结图神经网络（GNN）：与传统神经网络的区别与…
阅读更多...
【C#设计模式(15)——命令模式(Command Pattern)】

【C#设计模式(15)——命令模式(Command Pattern)】

前言 命令模式的关键通过将请求封装成一个对象&#xff0c;使命令的发送者和接收者解耦。这种方式能更方便地添加新的命令&#xff0c;如执行命令的排队、延迟、撤销和重做等操作。 代码 #region 基础的命令模式 //命令&#xff08;抽象类&#xff09; public abstract class …
阅读更多...
Shell脚本小练习

Shell脚本小练习

学习了这么长时间Shell脚本&#xff0c;总得来一次小小的练习吧&#xff0c;那么请看下文&#xff01; 1.用Shell写一个小计算器。 通过read命令获取用户输入的表达式&#xff0c;表达式的格式设定为操作数1 运算符 操作数2&#xff0c;例如53&#xff0c;然后利用设计的脚本…
阅读更多...
二，[ACTF2020 新生赛]Include1感谢 Y1ng 师傅供题。

二，[ACTF2020 新生赛]Include1感谢 Y1ng 师傅供题。

进入靶场后&#xff0c;发现tips可以点击 点击后进入此页面 猜测此为文件包含漏洞,构造payload&#xff0c;并成功得到base64编码后的源码 详解payload&#xff1a; php://filter/readconvert.base64-encode/resourceflag.php 1.php://filter是PHP中的一个流封装协议&#xf…
阅读更多...
技术实践 | AI 安全：通过大模型解决高危WEB应用识别问题

技术实践 | AI 安全：通过大模型解决高危WEB应用识别问题

一、引言 在日常企业安全能力建设中&#xff0c;收敛企业外网高危资产&#xff0c;以保障公司外部安全是企业安全的重要工作。WEB 高危服务&#xff08;如&#xff1a;管理后台、内部系统等&#xff09;外开是企业所面临的一个重要风险。针对该风险&#xff0c;传统的方式是基…
阅读更多...
【Linux】TCP网络编程

【Linux】TCP网络编程

目录 V1_Echo_Server V2_Echo_Server多进程版本 V3_Echo_Server多线程版本 V3-1_多线程远程命令执行 V4_Echo_Server线程池版本 V1_Echo_Server TcpServer的上层调用如下&#xff0c;和UdpServer几乎一样&#xff1a; 而在InitServer中&#xff0c;大部分也和UDP那里一样&…
阅读更多...
osg、osgearth源码编译（二）

osg、osgearth源码编译（二）

如果比较懒&#xff0c;也可以不看这篇文章&#xff0c;网上应该有很多编译好的库。也可以找我要。 本人还是建议学会编译&#xff0c;因为其他人电脑上编译好的&#xff0c;可能在你的电脑环境上&#xff0c;出现这样那样奇怪的问题&#xff0c;所以&#xff0c;最好还是自己能…
阅读更多...
【QGIS入门实战精品教程】4.11：文本型字段转浮点型

【QGIS入门实战精品教程】4.11：文本型字段转浮点型

《QGIS入门实战精品教程（配套案例数据）》：本专栏以实战案例的形式，深入浅出地介绍了QGIS的基本使用方法，用一个个实例讲解了QGIS基本操作与常见的空间分析方法。订阅专栏，获取专栏内所有文章阅读权限，从私信查收配套实验数据等资料，持续同步更新！ 文章目录 一、加载实…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023