我要评论环境介绍
使用vite构建vue项目
1、安装element plus依赖
npm install element-plus --save
2、使用element plus组件及导入样式
// /src/main.js
import { createapp } from 'vue'
import app from './app.vue'
//引入路由器组件
import { router } from './router/index'
//引入样式
import "./styles/index.scss"
//引入windicss
import 'virtual:windi.css'
//引入pinia
import { createpinia } from 'pinia';
const pinia = createpinia();
const app = createapp(app)
app.use(router)
app.use(pinia)
//挂在容器
app.mount('#app')
3、element plus 样式文件
// src/styles/element/light.scss 可以忽略重写 将element的默认样式定义为light
/* 重写 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
$colors: (
'primary': (
'base': green,
),
),
);
// 导入所有样式:
@use "element-plus/theme-chalk/src/index.scss" as *;
// src/styles/element/drak.scss 暗黑模式
@forward 'element-plus/theme-chalk/src/dark/var.scss' with (
$colors: (
'primary': (
'base': green,
),
),
);
@use 'element-plus/theme-chalk/src/dark/css-vars.scss' as *;// src/styles/index.scss 顺序不要错 一定要是先默认主题 再暗黑主题 这里官网有说明
// 参开链接 https://element-plus.org/zh-cn/guide/dark-mode.html
/*
自定义变量
通过 css
直接覆盖对应的 css 变量即可
像这样，新建一个 styles/dark/css-vars.css文件:
css
html.dark {
--el-bg-color: #626aef;
}
在 element plus 的样式之后导入它
ts
// main.ts
*/
@use './element/light.scss' as *;
@use './element/dark.scss' as *;
@use './element/self.scss' as *;
4、安装pinia 用来保存切换模式的状态
npm install pinia
5、配置pinia
// src/store/theme.js
import { definestore } from 'pinia';
import { watcheffect } from 'vue';
export const usethemestore = definestore('theme', {
state: () => ({
isdarktheme: false
}),
actions: {
toggledarkmode() {
this.isdarktheme =!this.isdarktheme;
},
setupthemewatcher() {
const htmlelement = document.documentelement;
watcheffect(() => {
htmlelement.classlist.toggle('dark', this.isdarktheme);
htmlelement.classlist.toggle('light',!this.isdarktheme);
});
}
}
});
6、创建模式切换的组件
//src/pages/components/themeswitch.vue
<template>
<el-switch v-model="themestore.isdarktheme" active-text="普通模式" inactive-text="暗黑模式" inline-prompt />
</template>
<script setup lang='ts'>
import { usethemestore } from '@/store/theme';
const themestore = usethemestore();
themestore.setupthemewatcher();
</script>
<style scoped lang='scss'>
</style>
7、使用
<template>
<div>
<h2>我是登录页面</h2>
<theme-switch></theme-switch>
</div>
</template>
<script setup lang='ts'>
import darkmodeswitch from 'components/themeswitch.vue';
</script>
<style scoped lang='scss'>
</style>
关于vite的配置
/vite.config.js
import { defineconfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// element plus 相关
import autoimport from 'unplugin-auto-import/vite'
import components from 'unplugin-vue-components/vite'
import { elementplusresolver } from 'unplugin-vue-components/resolvers'
import windicss from 'vite-plugin-windicss'
import path from 'path';
// https://vite.dev/config/
export default defineconfig({
plugins: [
autoimport({
resolvers: [elementplusresolver()],
}),
components({
resolvers: [elementplusresolver()],
}),
windicss(),
vue()
],
css: {
preprocessoroptions: {
scss: {
additionaldata: `@use 'src/styles/element/define.scss' as *;`
}
}
},
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
'pages': path.resolve(__dirname, './src/pages'),
'components': path.resolve(__dirname, './src/pages/components'),
},
},
})
其他配置
//jsconfig.json 如果文件不存在 那么就创建该文件即可
{
"compileroptions": {
"baseurl": ".",
"paths": {
"@/*": ["src/*"],
"pages/*": ["src/pages/*"],
"components/*": ["src/pages/components/*"]
}
}
}到此这篇关于element plus暗黑模式及模式自由切换的实现的文章就介绍到这了,更多相关element plus暗黑模式及模式自由切换内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论