Vue3+ElementPlus+axios+暗黑模式
目录
1：新建Vue3的项目
2：导入element-plus库
(1)：安装
(2)：配置main.js
(3)：查看引入效果
3：全局注册element-plus图标库
(1)：安装
(2)：配置 main.js
4：集成Less
(1)：安装
(2)：配置vue.config.js
(3)：创建less全局变量文件
(4)：使用全局变量
5：css全局基础配置
(1)：创建一个基础配置文件src/assets/less/reset.less
(2)：引入css全局基础配置
6：集成axios
(1)：安装
(2)：配置axios全局实例
(3)：新建 http 请求封装类 src/api/http.js
(4)：配置main.js
(5)：使用 http 调用接口请求后端真实数据
7：配置 element-plus 暗黑主题动态切换
1：新建Vue3的项目
Vue3项目创建教程
2：导入element-plus库
element-plus官网：https://element-plus.gitee.io/
(1)：安装
npm install element-plus --save // --save 表示生产环境也需要
(2)：配置main.js
以完整引入的方式
(3)：查看引入效果
在组件中引入一个按钮，确认是否引入成功
上图可以看到引入成功
3：全局注册element-plus图标库
// 不全局注册的话，使用的话就要一个一个的 import 很麻烦
(1)：安装
npm install @element-plus/icons-vue
(2)：配置 main.js
import * as ElementPlusIconsVue from '@element-plus/icons-vue'const app = createApp(App)for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}4：集成Less
(1)：安装
npm install less less-loader style-resources-loader vue-cli-plugin-style-resources-loader -S
(2)：配置vue.config.js
const { defineConfig } = require('@vue/cli-service')
const path = require("path"); // 引入pathmodule.exports = defineConfig({transpileDependencies: true,pluginOptions: {"style-resources-loader": {preProcessor: "less",patterns: [path.resolve(__dirname, "./src/assets/less/_variable.less")], // 指定全局变量的配置文件},}
})(3)：创建less全局变量文件
(4)：使用全局变量
5：css全局基础配置
(1)：创建一个基础配置文件src/assets/less/reset.less
* {margin: 0;padding: 0;border: 0;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {font-size: 100%;font: inherit;vertical-align: baseline;box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {display: block;
}
body {line-height: 1;
}
ol,
ul {list-style: none;
}
blockquote,
q {quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {content: "";content: none;
}
a,
a:hover {color: inherit;text-decoration: none;
}
table {border-collapse: collapse;border-spacing: 0;
}
html,
body {width: 100%;height: 100%;background-color: #f5f5f5;font-family: "PingFangSC-Light", "PingFang SC", "STHeitiSC-Light","Helvetica-Light", "Arial", "sans-serif";
}// 公共样式
.fl {float: left;
}
.fr {float: right;.button-group-item {padding-left: 3px;}
}
//清除浮动
.clearfix {zoom: 1;&:after {display: block;clear: both;content: "";visibility: hidden;height: 0;}
}
(2)：引入css全局基础配置
// main.js 中引入
import "./assets/less/reset.less"
6：集成axios
(1)：安装
npm install axios
(2)：配置axios全局实例
新建文件 src/api/request.js
import axios from "axios"; // 引入 axios// 创建一个 axios 实例对象
const service = axios.create({// 请求超时事件，单位毫秒timeout: 3000
});// 添加一个请求拦截器，接收两个函数，第一个成功函数，第二个失败函数
// 作用，可以在请求接口之前添加一些公共的请求参数，例如token
service.interceptors.request.use(config => {console.log("请求拦截器");return config;},err => {console.log("请求失败：", err);}
)// 添加一个响应拦截器，接收两个函数，第一个成功函数，第二个失败函数
// 作用，拦截响应的操作
service.interceptors.response.use(response => {console.log("响应拦截器");let res = {};res.status = response.status;res.data = response.data;return res;},err => {console.log("响应失败：", err);}
)export default service;(3)：新建 http 请求封装类 src/api/http.js
import request from '@/api/request.js'let http = {// 这里定义 post json 请求postJson: (url, data) => {return new Promise((resolve, reject) => {request({method: 'post',url: url,data: data,}).then((response) => {resolve(response.data);}).catch((error) => {reject(error);})});},// 下面可以定义 get、post、put、patch、delete、download等请求
}export default http;(4)：配置main.js
import http from '@/api/http.js' // 导入 http 全局实例const app = createApp(App)app.config.globalProperties.$http = http; // 把 http 配置到vue的全局属性上，$符号是为了防止重名app.mount('#app')(5)：使用 http 调用接口请求后端真实数据
import { reactive, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();let url = "http://localhost:8080/test";
// 调用
function postTest() {proxy.$http.postJson(url).then((res) => {console.log("res = ", res);}, (e) => {console.log(e);})
}7：配置 element-plus 暗黑主题动态切换
(1)：添加个开关按钮用于动态切换
<template> <el-switch v-model="theme" inline-prompt :active-icon="MySun" :inactive-icon="MyMoon" style="--el-switch-on-color: #f2f2f2; --el-switch-off-color: #2c2c2c" @change="toggleDark()" />
</template>(2)：js 代码
<script setup>
import { ref } from "vue";
import { useDark, useToggle, useStorage } from '@vueuse/core';const isDark = ref(useDark())// 如果需要更细粒度的指定样式，可以这样写
/* const isDark = ref(useDark({selector: 'body',attribute: 'color-scheme',valueDark: 'dark',valueLight: 'light',
}))*/const toggleDark = useToggle(isDark)// 切换按钮 localStorage 中的值，保证刷新不重置
const vueuseColorScheme = useStorage('vueuse-color-scheme')
const theme = vueuseColorScheme.value === 'dark' ? ref(false) : ref(true);
</script>(3)：查看效果
(4)：自定义 css 样式
可以看到上图中的 header 部分的蓝色背景没有改变，这里就需要自定义样式了。新建一个文件，然后导入到全局
效果如下
源码已上传，需要的童鞋自取
https://download.csdn.net/download/a1053765496/86594847
Vue3+ElementPlus+axios+暗黑模式相关推荐
- 基于 vue3 element-plus 的暗黑模式
前言 element-plus@2.2.0 已经开始支持暗黑模式了 通过在html标签上添加一个名为 dark 的类来启用 基于 vue3 & element-plus 的项目现在可以方便的添 ...
- 用tailwindcss适配暗黑模式竟如此简单
接着上面一篇<从Nuxt文档里发现色彩的配搭诀窍>的内容,本文是我继续对 Nuxt/Content 的探索.当我研究它的色彩系统的时候,我还发现它还提供了暗黑模式,这也算是色彩系统的一种吧 ...
- 使用TS+vue3封装axios时编译报错，提示You may need an additional loader to handle the result of these loaders.
基于vue3+TS构建的商城后台管理系统 根据coderwhy老师指导搭建的项目为PC端商品后台管理系统. 报错: 使用TS+vue3封装axios时编译报错,提示You may need an ad ...
- Vue-vben-admin Vue3+TS Axios的封装源码分析
Vue-vben-admin Vue3+TS Axios的封装源码分析 前言 一.近期再用Vue3+TS 重构之前Vue2的项目,因此想着借鉴一下业界较为优秀的代码,在Git上面找了好久,经过同事推荐 ...
- 逆天神经网络绘制神器！还有暗黑模式
点击上方↑↑↑"视学算法"关注我 来源:公众号 机器之心 授权 机器学习从业者,从此不再愁如何画神经网络图了. 论文.博客写好了,里面的图可怎么画?对于很多研究人员和开发者来说,内 ...
- ubuntu 如何关闭离线模式_如何在macOS中打开或关闭Mac暗黑模式
苹果在macOS Mojave中为Mac引入了暗模式.暗模式是系统级别的设置,可与Mac随附的所有应用一起使用.第三方应用也可以选择使用暗黑模式.暗黑模式使您更轻松地专注于工作,并且对眼睛也很容易.装 ...
- 藏青色在html页面怎么写,Html页面支持暗黑模式的实现
自19年开始,Android和IOS平台,都开始玩暗黑模式.当然这没什么不好,但是当我们的页面被用户在暗黑模式打开之后,会被那传统大白色瞬间闪瞎双眼. 下面会简单的说一下如何让页面支持暗黑模式. 准备 ...
- ios开发 多人语音聊天_微信“暗黑模式”正式上线！语音界面大改，新增贴心“群工具”...
微必知科技资讯(winbz.com):3月9日,微信团队对外预热:"为了优化用户体验,微信与苹果达成合作,共同探索微信在iOS系统的暗黑模式体验,目前该功能已完成开发,将有望在下一个新版本中 ...
- 为什么 APP 纷纷开发“暗黑模式”？优酷最佳实践总结
简介: < 优酷 APP 全量支持"暗黑模式" 设计与技术完整总结>正式发布-- 一.缘起 随着iOS 13和Android 10的正式发布,一个名词"暗 ...
最新文章
- vba保存文件为xlsx格式_Vba把Excel某个范围保存为XLS工作薄文件
- android 开发中的常见问题
- React开发（170）:ant design datapicker限制选择时间
- OpenCL 第8课:旋转变换(2)
- Java Formatter locale（）方法与示例
- 轻量级的Canvas类库zrender使用笔记 ：简单自定义图件开发
- 本地wordpress博客系统安装搭建实践
- AndroidStudio安卓原生开发_UI控件_SeekBar_ProgressBar_DataPicker---Android原生开发工作笔记99
- JDK8-废弃永久代（PermGen）迎来元空间（Metaspace）
- python批量图片转pdf,将TIFF图像批量转换为PDF ImageMagick Python
- 登录验证时第一次帐号密码错误，第二次提交出现错误404，Could not find action or result: /zyf_shop/user_login.action
- 局域网上网流量监控_NAT下网络流量监控解决方案
- linux系统的python版本_Linux系统下多版本Python管理
- [转] 网卡超时实现机制 watchdog_timeo／ndo_tx_timeout
- 牛客oj 习题11.1 找出直系亲属（前驱记录）
- 关于数字IC设计中分频后的慢速时钟和以快时钟触发的信号的关系处理
- php1106打印机怎么使用,1106打印机驱动使用说明
- Opencv图像处理——水平线和垂直线的提取
- [论文阅读笔记15]Recognizing Complex Entity Mentions：A Review and Future Directions
- 【优化模型】图论与TSP模型结合