基础配置
- electron-vite地址:cn.electron-vite.org/guide/ , electron-vite已经写的很详细了,可以前往官方查看。
- 项目其它配置和vue3配置基本完全一致。配置sass,路由,pinia仓库等都基本一致,自行配置即可。
路由配置注意事项
必须使用createWebHashHistory模式,不然后续打包无法实现路由跳转。
主题配置
- 为什么使用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里面调用的
<router-view>router-view>
<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类型。
评论记录:
回复评论: