vue3+vite+axios+ElementPlus+ElLoading简易封装

1.安装按需加载element-plus需要的依赖包

sh 复制代码
pnpm install element-plus
sh 复制代码
pnpm install axios
sh 复制代码
# 按需自动导入
pnpm install -D unplugin-vue-components unplugin-auto-import
sh 复制代码
# 自动导入element-plus样式
pnpm install -D vite-plugin-style-import

2.修改jsconfig.json

json 复制代码
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    },
    "types": ["element-plus/global"] // 增加element-plus组件标签代码提示
  },
  "exclude": ["node_modules", "dist"]
}

3.修改vite.config.js

js 复制代码
import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import {
  createStyleImportPlugin,
  ElementPlusResolve,
} from "vite-plugin-style-import";

export default defineConfig({
  plugins: [
    vue(), // element-plus组件自动引入
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    // element-plus反馈组件样式自动引入
    createStyleImportPlugin({
      resolves: [ElementPlusResolve()],
      libs: [
        {
          libraryName: "element-plus",
          esModule: true,
          resolveStyle: (name) => {
            return `element-plus/theme-chalk/${name}.css`;
          },
        },
      ],
    }),
  ],
  // 加了这个配置后, 可以在任意组件中访问到scss全局变量
  css: {
    preprocessorOptions: {
      scss: {
        javascriptEnabled: true,
        additionalData: '@import "./src/assets/css/variable.scss";',
      },
    },
  },

  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

4.axios二次封装

js 复制代码
// /src/utils/request.js  - 对axios的简易封装
import axios from "axios";
import { ElLoading } from "element-plus";
import { getItem } from "@/utils/storage";
// 默认loading为false
const DEFAULT_LOADING = false;

// 保证当一个页面中有多个请求时, loading只显示一次
let loadingCount = 0;
let loadingInstrance = null;

function startLoading() {
  if (loadingCount === 0) {
    loadingInstrance = ElLoading.service({
      lock: true,
      text: "正在加载...",
      background: "rgba(0, 0, 0, 0.5)",
    });
  }
  loadingCount++;
}

function endLoading() {
  if (loadingCount > 0) {
    loadingCount--;
    if (loadingCount === 0) {
      loadingInstrance.close();
    }
  }
}

const request = axios.create({
  baseURL: import.meta.env.VITE_BASE_URL,
  timeout: 10000,
});

request.interceptors.request.use(
  (config) => {
    const token = getItem("token");
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }

    config.showLoading = config.showLoading ?? DEFAULT_LOADING;

    config.showLoading && startLoading();

    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

request.interceptors.response.use(
  (res) => {
    res.config.showLoading && endLoading();
    return res.data;
  },
  (error) => {
    error.config.showLoading && endLoading();
    return Promise.reject(error);
  }
);

export default request;

5.api的封装

js 复制代码
// src/apis/index.js
import request from "@/utils/request";

export function getMessage() {
  return request({
    url: "https://api.uomg.com/api/rand.qinghua",
    showLoading: true, // showLoading为true时, 该接口就会出现加载中动画
  });
}

6.api的使用

html 复制代码
<!-- App.vue -->
<template>
  <h2>{{ message }}</h2>
  <el-button @click="handleGetMessage"> 获取消息 </el-button>
</template>

<script setup>
import { ref } from "vue";
import { getMessage } from "@/apis";
const message = ref("");
const handleGetMessage = async () => {
  const res = await getMessage();
  message.value = res.content;
};
handleGetMessage();
</script>


相关推荐
鸿蒙布道师11 分钟前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt
袈裟和尚17 分钟前
如何在安卓平板上下载安装Google Chrome【轻松安装】
前端·chrome·电脑
曹牧20 分钟前
HTML字符实体和转义字符串
前端·html
小希爸爸26 分钟前
2、中医基础入门和养生
前端·后端
局外人LZ29 分钟前
前端项目搭建集锦:vite、vue、react、antd、vant、ts、sass、eslint、prettier、浏览器扩展,开箱即用,附带项目搭建教程
前端·vue.js·react.js
G_GreenHand44 分钟前
Dhtmlx Gantt教程
前端
鹿九巫1 小时前
【CSS】层叠,优先级与继承(四):层叠,优先级与继承的关系
前端·css
卓怡学长1 小时前
w304基于HTML5的民谣网站的设计与实现
java·前端·数据库·spring boot·spring·html5
宝拉不想努力了1 小时前
vue element使用el-table时,切换tab,table表格列项发生错位问题
前端·vue.js·elementui
YONG823_API1 小时前
深度探究获取淘宝商品数据的途径|API接口|批量自动化采集商品数据
java·前端·自动化