当前位置:   article > 正文

Vue3+ElementPlus+axios+暗黑模式_asp.net core axios vue3 elementplus

asp.net core axios vue3 elementplus

目录

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. const app = createApp(App)
  3. for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  4. app.component(key, component)
  5. }

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. module.exports = defineConfig({
  4. transpileDependencies: true,
  5. pluginOptions: {
  6. "style-resources-loader": {
  7. preProcessor: "less",
  8. patterns: [path.resolve(__dirname, "./src/assets/less/_variable.less")], // 指定全局变量的配置文件
  9. },
  10. }
  11. })

        (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. .fl {
  143. float: left;
  144. }
  145. .fr {
  146. float: right;
  147. .button-group-item {
  148. padding-left: 3px;
  149. }
  150. }
  151. //清除浮动
  152. .clearfix {
  153. zoom: 1;
  154. &:after {
  155. display: block;
  156. clear: both;
  157. content: "";
  158. visibility: hidden;
  159. height: 0;
  160. }
  161. }

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

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

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

        (4):配置main.js

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

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

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

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 代码

  1. <script setup>
  2. import { ref } from "vue";
  3. import { useDark, useToggle, useStorage } from '@vueuse/core';
  4. const isDark = ref(useDark())
  5. // 如果需要更细粒度的指定样式,可以这样写
  6. /* const isDark = ref(useDark({
  7. selector: 'body',
  8. attribute: 'color-scheme',
  9. valueDark: 'dark',
  10. valueLight: 'light',
  11. }))*/
  12. const toggleDark = useToggle(isDark)
  13. // 切换按钮 localStorage 中的值,保证刷新不重置
  14. const vueuseColorScheme = useStorage('vueuse-color-scheme')
  15. const theme = vueuseColorScheme.value === 'dark' ? ref(false) : ref(true);
  16. </script>

        (3):查看效果

        (4):自定义 css 样式

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

 效果如下


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

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

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号