首页 最新 热门 推荐

  • 首页
  • 最新
  • 热门
  • 推荐

  • 24-11-26 09:05
  • 3985
  • 11494
juejin.cn

基础配置

  1. electron-vite地址:cn.electron-vite.org/guide/ , electron-vite已经写的很详细了,可以前往官方查看。
  2. 项目其它配置和vue3配置基本完全一致。配置sass,路由,pinia仓库等都基本一致,自行配置即可。

路由配置注意事项

必须使用createWebHashHistory模式,不然后续打包无法实现路由跳转。 image.png

主题配置

  • 为什么使用element-plus,原因就是因为容易配置暗黑模式、图片组件可以直接使用懒加载,因为懒得用其它插件就采用element-plus。
  • 创建主题仓库,用于存储主题相关配置

在渲染进程下面创建renderer/src/store/theme.ts

js
代码解读
复制代码
import { defineStore } from 'pinia' export const themeStore = defineStore('theme', { state: (): any => ({ theme: 'light', // 当前主题 '--back': '#ffffff', // 背景颜色 '--text': '#1e1e1e' // 字体颜色 }), persist: true, actions: { changeTheme() { // 点击按钮时 动态切换主题 if (this.theme === 'dark') { this.theme = 'light' this['--text'] = '#1e1e1e' this['--back'] = '#ffffff' } else { this.theme = 'dark' this['--back'] = '#1e1e1e' this['--text'] = '#ffffff' } this.setGlobal() }, setGlobal() { const htmlDom: any = document.querySelector('html') // 设置element-plus暗黑主题,参考element-plus if (this.theme == 'dark') { htmlDom.className = 'dark' } else { htmlDom.className = '' } // 设置全局变量 document.documentElement.style.setProperty('--back', this['--back']) document.documentElement.style.setProperty('--text', this['--text']) } }, })

在合适的地方导入,执行一次即可。

js
代码解读
复制代码
// 我是在 App.vue里面调用的 <script setup lang="ts"> import { onMounted } from 'vue' import { themeStore } from '@renderer/store/theme' const themes = themeStore() onMounted(() => { themes.setGlobal() }) script> <style lang="scss"> * { padding: 0; margin: 0; box-sizing: border-box; } html, body { background-color: var(--back); color: var(--text); } style>

在需要调用的地方直接使用:var(--back) 调用即可。--back和--text发生变化时就会动态改变主题了。

代理跨域

  • 主要介绍代理跨域,axios二次封装可自行百度。
  • 代理跨域在 electron.vite.config.ts 配置文件中配置
js
代码解读
复制代码
// 渲染进程配置 renderer: { publicDir, envDir, //环境变量前缀自定义,默认 VITE_ envPrefix: 'RENDERER_', resolve: { alias: { '@renderer': resolve('src/renderer/src') } }, server: { // 代理跨域 'proxy': { '/mohu': { target: 'https://img.moehu.org', changeOrigin: true, rewrite: (path) => path.replace(/^\/mohu/, '') }··· }, plugins: [ vue(), AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], css: { // sass 配置 preprocessorOptions: { scss: { javascriptEnabled: true, additionalData: "@use '@renderer/styles/mixin.scss';@use '@renderer/styles/main.scss' as *;", } } } }

api接口配置

开发环境使用代理路径,生产环境使用完整路径。因为壁纸源来自不同的接口,无法做统一配置,只能在接口定义时同时兼顾开发环境和生产环境

js
代码解读
复制代码
import request from "@renderer/utils/request" // 判断是开发环境还是生产环境 const isDev = process.env.NODE_ENV === 'development' // 开发环境使用代理路径 生产环境使用完整路径 export const getMoHuList = (params: any): any => request({ url: isDev === true ? '/mohu/pic.php' : 'https://img.moehu.org/pic.php', method: 'GET', params })

最后,基础配置基本完成,项目虽然用了ts,但是因为懒,还是大量使用any,可自行书写ts类型。

注:本文转载自juejin.cn的Zsnoin能的文章"https://juejin.cn/post/7441023096248139787"。版权归原作者所有,此博客不拥有其著作权,亦不承担相应法律责任。如有侵权,请联系我们删除。
复制链接
复制链接
相关推荐
发表评论
登录后才能发表评论和回复 注册

/ 登录

评论记录:

未查询到任何数据!
回复评论:

分类栏目

后端 (14832) 前端 (14280) 移动开发 (3760) 编程语言 (3851) Java (3904) Python (3298) 人工智能 (10119) AIGC (2810) 大数据 (3499) 数据库 (3945) 数据结构与算法 (3757) 音视频 (2669) 云原生 (3145) 云平台 (2965) 前沿技术 (2993) 开源 (2160) 小程序 (2860) 运维 (2533) 服务器 (2698) 操作系统 (2325) 硬件开发 (2492) 嵌入式 (2955) 微软技术 (2769) 软件工程 (2056) 测试 (2865) 网络空间安全 (2948) 网络与通信 (2797) 用户体验设计 (2592) 学习和成长 (2593) 搜索 (2744) 开发工具 (7108) 游戏 (2829) HarmonyOS (2935) 区块链 (2782) 数学 (3112) 3C硬件 (2759) 资讯 (2909) Android (4709) iOS (1850) 代码人生 (3043) 阅读 (2841)

热门文章

104
前端
关于我们 隐私政策 免责声明 联系我们
Copyright © 2020-2025 蚁人论坛 (iYenn.com) All Rights Reserved.
Scroll to Top