1、壁纸集起步

基础配置

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

安全策略

配置允许各种请求，https、http、file:// 等，其余配置可问ai，我也不太懂，有啥问题都是现场查找===

// index.html
 <meta http-equiv="Content-Security-Policy"
    content="default-src 'self'; font-src 'self' data:;script-src 'self'; style-src 'self' 'unsafe-inline'; connect-src * blob:;img-src 'self' http://* https://* file://*;">

路由配置注意事项

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

主题配置

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

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

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'])
        }
    },
})

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

// 我是在 App.vue里面调用的
<template>
  <router-view></router-view>
</template>

<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 配置文件中配置

 // 渲染进程配置
 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接口配置

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

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类型。