• 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

    1. import * as ElementPlusIconsVue from '@element-plus/icons-vue'
    2.  
    3. const app = createApp(App)
    4.  
    5. for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    6.     app.component(key, component)
    7. }

    4：集成Less

            (1)：安装

    npm install less less-loader style-resources-loader vue-cli-plugin-style-resources-loader -S

            (2)：配置vue.config.js

    1. const { defineConfig } = require('@vue/cli-service')
    2. const path = require("path"); // 引入path
    3.  
    4. module.exports = defineConfig({
    5.     transpileDependencies: true,
    6.     pluginOptions: {
    7.         "style-resources-loader": {
    8.             preProcessor: "less",
    9.             patterns: [path.resolve(__dirname, "./src/assets/less/_variable.less")], // 指定全局变量的配置文件
    10.         },
    11.     }
    12. })

            (3)：创建less全局变量文件

            (4)：使用全局变量

    5：css全局基础配置

            (1)：创建一个基础配置文件src/assets/less/reset.less

    1. * {
    2.     margin: 0;
    3.     padding: 0;
    4.     border: 0;
    5. }
    6. html,
    7. body,
    8. div,
    9. span,
    10. applet,
    11. object,
    12. iframe,
    13. h1,
    14. h2,
    15. h3,
    16. h4,
    17. h5,
    18. h6,
    19. p,
    20. blockquote,
    21. pre,
    22. a,
    23. abbr,
    24. acronym,
    25. address,
    26. big,
    27. cite,
    28. code,
    29. del,
    30. dfn,
    31. em,
    32. img,
    33. ins,
    34. kbd,
    35. q,
    36. s,
    37. samp,
    38. small,
    39. strike,
    40. strong,
    41. sub,
    42. sup,
    43. tt,
    44. var,
    45. b,
    46. u,
    47. i,
    48. center,
    49. dl,
    50. dt,
    51. dd,
    52. ol,
    53. ul,
    54. li,
    55. fieldset,
    56. form,
    57. label,
    58. legend,
    59. table,
    60. caption,
    61. tbody,
    62. tfoot,
    63. thead,
    64. tr,
    65. th,
    66. td,
    67. article,
    68. aside,
    69. canvas,
    70. details,
    71. embed,
    72. figure,
    73. figcaption,
    74. footer,
    75. header,
    76. hgroup,
    77. menu,
    78. nav,
    79. output,
    80. ruby,
    81. section,
    82. summary,
    83. time,
    84. mark,
    85. audio,
    86. video {
    87.     font-size: 100%;
    88.     font: inherit;
    89.     vertical-align: baseline;
    90.     box-sizing: border-box;
    91. }
    92. /* HTML5 display-role reset for older browsers */
    93. article,
    94. aside,
    95. details,
    96. figcaption,
    97. figure,
    98. footer,
    99. header,
    100. hgroup,
    101. menu,
    102. nav,
    103. section {
    104.     display: block;
    105. }
    106. body {
    107.     line-height: 1;
    108. }
    109. ol,
    110. ul {
    111.     list-style: none;
    112. }
    113. blockquote,
    114. q {
    115.     quotes: none;
    116. }
    117. blockquote:before,
    118. blockquote:after,
    119. q:before,
    120. q:after {
    121.     content: "";
    122.     content: none;
    123. }
    124. a,
    125. a:hover {
    126.     color: inherit;
    127.     text-decoration: none;
    128. }
    129. table {
    130.     border-collapse: collapse;
    131.     border-spacing: 0;
    132. }
    133. html,
    134. body {
    135.     width: 100%;
    136.     height: 100%;
    137.     background-color: #f5f5f5;
    138.     font-family: "PingFangSC-Light", "PingFang SC", "STHeitiSC-Light",
    139.         "Helvetica-Light", "Arial", "sans-serif";
    140. }
    141.  
    142. // 公共样式
    143. .fl {
    144.     float: left;
    145. }
    146. .fr {
    147.     float: right;
    148.     .button-group-item {
    149.         padding-left: 3px;
    150.     }
    151. }
    152. //清除浮动
    153. .clearfix {
    154.     zoom: 1;
    155.     &:after {
    156.         display: block;
    157.         clear: both;
    158.         content: "";
    159.         visibility: hidden;
    160.         height: 0;
    161.     }
    162. }

            (2)：引入css全局基础配置

    // main.js 中引入

    import "./assets/less/reset.less"

    6：集成axios

            (1)：安装

    npm install axios

            (2)：配置axios全局实例

    新建文件 src/api/request.js

    1. import axios from "axios"; // 引入 axios
    2.  
    3.  
    4. // 创建一个 axios 实例对象
    5. const service = axios.create({
    6.     // 请求超时事件，单位毫秒
    7.     timeout: 3000
    8. });
    9.  
    10. // 添加一个请求拦截器，接收两个函数，第一个成功函数，第二个失败函数
    11. // 作用，可以在请求接口之前添加一些公共的请求参数，例如token
    12. service.interceptors.request.use(
    13.     config => {
    14.         console.log("请求拦截器");
    15.         return config;
    16.     },
    17.     err => {
    18.         console.log("请求失败：", err);
    19.     }
    20. )
    21.  
    22. // 添加一个响应拦截器，接收两个函数，第一个成功函数，第二个失败函数
    23. // 作用，拦截响应的操作
    24. service.interceptors.response.use(
    25.     response => {
    26.         console.log("响应拦截器");
    27.         let res = {};
    28.         res.status = response.status;
    29.         res.data = response.data;
    30.         return res;
    31.     },
    32.     err => {
    33.         console.log("响应失败：", err);
    34.     }
    35. )
    36.  
    37. export default service;

            (3)：新建 http 请求封装类 src/api/http.js

    1. import request from '@/api/request.js'
    2.  
    3. let http = {
    4.     // 这里定义 post json 请求
    5.     postJson: (url, data) => {
    6.         return new Promise((resolve, reject) => {
    7.             request({
    8.                 method: 'post',
    9.                 url: url,
    10.                 data: data,
    11.             }).then((response) => {
    12.                 resolve(response.data);
    13.             }).catch((error) => {
    14.                 reject(error);
    15.             })
    16.         });
    17.     },
    18.     // 下面可以定义 get、post、put、patch、delete、download等请求
    19. }
    20.  
    21. export default http;

            (4)：配置main.js

    1. import http from '@/api/http.js'			// 导入 http 全局实例
    2.  
    3. const app = createApp(App)
    4.  
    5. app.config.globalProperties.$http = http;	// 把 http 配置到vue的全局属性上，$符号是为了防止重名
    6.  
    7. app.mount('#app')

            (5)：使用 http 调用接口请求后端真实数据

    1. import { reactive, getCurrentInstance } from "vue";
    2. const { proxy } = getCurrentInstance();
    3.  
    4. let url = "http://localhost:8080/test";
    5. // 调用
    6. function postTest() {
    7.     proxy.$http.postJson(url).then((res) => {
    8.         console.log("res = ", res);
    9.     }, (e) => {
    10.         console.log(e);
    11.     })
    12. }

    7：配置 element-plus 暗黑主题动态切换

            (1)：添加个开关按钮用于动态切换

    1. <template>           
    2.      <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()" />
    3. template>

            (2)：js 代码

            (3)：查看效果

            (4)：自定义 css 样式

    可以看到上图中的 header 部分的蓝色背景没有改变，这里就需要自定义样式了。新建一个文件，然后导入到全局

     效果如下

    源码已上传，需要的童鞋自取

    https://download.csdn.net/download/a1053765496/86594847

  • 相关阅读:
    关于chatGPT对有关Docker Desktop问题的一个回答
    基于51单片机的PID直流电机调速Proteus仿真
    小程序中实现待办功能
    uvm环境获取系统时间的方法和使用案例
    【java_wxid项目】【第五章】【Spring Cloud Hystrix集成】
    QQ邮箱批量发送
    2023年智能轨道，交通与运输工程国际会议(ICSTTE 2023)
    cv面试百问day3
    好用软件推荐
    结构体和联合体
  • 原文地址：https://blog.csdn.net/a1053765496/article/details/126899468