一、全局api

1、新建一个api文件

api.js

const BASE_URL = import.meta.env.VITE_BASE_API: // 环境变量
export const url = {
  LOGIN: `${BASE_URL}/api/login`, // 登录
  LOGIN_CODE: `${BASE_URL}/api/captchaImage`, // 获取验证码
}

2、在main.js中挂载到全局

main.js

import { createApp } from 'vue'
import App from './App.vue';
import router from './router';
import store from './store';
import { url } from './services/api'; // 导入封装的api

const app = createApp(App)
app.config.globalProperties.$http = url; // 挂载全局
app.use(router).use(store).mount('#app')

3、组件中使用

login.vue

<script setup>
import { request } from '../../utils/request'; // 封装的axios
const globalProperties = getCurrentInstance().appContext.config.globalProperties; // 获取全局挂载
const http = globalProperties.$http;
console.log(http);
// 获取验证码
const getCode = async () => {
  await request(http.LOGIN_CODE, 'get')
    .then((res) => {
      if(res.code === 200) {
        codeImg.value = res.data.img;
        captcha.value = res.data.captcha;
        uuid.value = res.data.uuid;
      }
    })
    .catch(() => {

    })
    .finally(() => {
      
    })
}
</script>

4、console.log(http) 打印的结果如下：

二、自定义全局方法

1、新建一个modal.js文件

modal.js

/**
 * 
 * 提示弹窗
 */
export const toast = function (msg, duration) {
  duration = isNaN(duration) ? 2000 : duration; // 动画延迟
  var m = document.createElement('div');
  m.innerHTML = msg; // 提示语
  m.style.cssText = "min-width: 150px; padding: 10px;opacity: 0.7;color: rgb(255, 255, 255);text-align: center;border-radius: 5px;position: fixed;top: 50%;left: 50%;z-index: 999999;background: rgb(42, 168, 55);font-size: 12px;";
  document.body.appendChild(m);
  if(timer) {
    clearTimeout(timer)
  }
  var timer = setTimeout(function () {
    var d = 0.5;
    m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
    m.style.opacity = '0';
    if(cssTimer) {
      clearTimeout(cssTimer)
    }
    var cssTimer = setTimeout(function () {
      document.body.removeChild(m)
    }, d * 1000);
  }, duration);
}
export default toast

2、在main.js中挂载到全局

main.js

import { createApp } from 'vue'
import App from './App.vue';
import router from './router';
import store from './store';
import { url } from './services/api'; // 导入封装的api
import toast from './utils/modal';

const app = createApp(App)
app.config.globalProperties.$http = url; // 挂载全局
app.config.globalProperties.$toast = toast; // 挂载全局自定义弹窗
app.use(router).use(store).mount('#app')

3、组件中使用

login.vue

<script setup>
import { request } from '../../utils/request';
const globalProperties = getCurrentInstance().appContext.config.globalProperties; // 获取全局挂载
const http = globalProperties.$http;
const toast = globalProperties.$toast;
console.log(toast);
// 登录
const handleLogin = async (username, password, captcha, uuid) => {
  logging.value = true;
  await request(http.LOGIN, 'post', {
    username,
    password: Base64.encode(username + '8' + password),
    captcha,
    uuid
  })
    .then((res) => {
      console.log(res);
      if(res.code == 200) {
        toast("登录成功！");
        router.push('/home');
      }
    })
    .catch(() => {
      
    })
    .finally(() => {
      logging.value = false;
    })
}
</script>

4、console.log(toast)打印结果如下：

5、不经意间看到大佬的文章：https://blog.csdn.net/Boale_H/article/details/118857338， 还有另一种方法：

main.js

import { createApp } from 'vue';
import App from './App.vue';
import router from './router/index.js';
import store from './store';
import { url } from './services/api.js'; // 导入封装的api
import {changeSize} from './utils/common.js';
import toast from './utils/modal.js';
import antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.less';
import './assets/common/style.less';
import 'animate.css';

changeSize()
const app = createApp(App)
app.config.globalProperties.$http = url; // 挂载全局
app.provide('toast', toast); // 调用 provide 来定义每个property(toast)
app.use(antd).use(router).use(store).mount('#app')

home.vue

<script setup>
import { inject } from 'vue';
const toast = inject('toast');
toast("你好，陌生人！");
</script>

6、自定义组件可以这样玩，全局api变量也是可以的，挂载代码太多太麻烦了，在app.vue中提供依赖

App.vue
import { onMounted,provide } from "vue";
import { url } from './services/api.js'; // 导入封装的api
provide('url',url)

7、在组件中注入依赖

login.vue
const url = inject('url')
// 获取验证码
const getCode = async () => {
  await request(url.LOGIN_CODE, 'get')
    .then((res) => {
        codeImg.value = res.img;
        captcha.value = res.captcha;
        uuid.value = res.uuid;
    })
    .catch(() => {

    })
    .finally(() => {
      
    })
}

8、官方文档：https://v3.cn.vuejs.org/guide/composition-api-provide-inject.html#%E4%BD%BF%E7%94%A8-provide

2022年，努力做自己！