定义全局变量main.ts

const Vue = createApp(App)
 
Vue.config.globalProperties.$Bus = Mit
Vue.config.globalProperties.$filters = {
  format<T>(str: T): string {
    return `我是傻逼-${str}`
  }
}

声明变量 函数类型 不然ts无法正确类型 推导

 
// 全局声明 获取mitt所有的类型
declare module 'vue' {
  export interface ComponentCustomProperties {
    $Bus: typeof Mit,
    $filters: Filter,
    $loading: {
      show: (str: string) => void,
      hide: () => void
    }
 
  }
}
type Filter = {
  format: <T>(str: T) => string
}

main.ts全部代码：

import { createApp } from 'vue'
import App from './App.vue'
import './assets/css/reset.css'
import mitt from 'mitt'
const Mit = mitt()
 
import Card from "./components/Card/index.vue"
 
// 自定义插件
import Loading from "./components/插件/loading"
 
const Vue = createApp(App)
 
// 全局声明 获取mitt所有的类型
declare module 'vue' {
  export interface ComponentCustomProperties {
    $Bus: typeof Mit,
    $filters: Filter,
    $loading: {
      show: (str: string) => void,
      hide: () => void
    }
 
  }
}
type Filter = {
  format: <T>(str: T) => string
}
 
Vue.config.globalProperties.$Bus = Mit
Vue.config.globalProperties.$filters = {
  format<T>(str: T): string {
    return `我是傻逼-${str}`
  }
}
 
 
Vue.component('Card', Card)
 
Vue.use(Loading)
 
Vue.mount('#app')
 

在组件中使用全局变量：

import { getCurrentInstance,ComponentInternalInstance } from 'vue';
 
//两种使用方式 方式一
let { proxy } = getCurrentInstance() as ComponentInternalInstance
//两种使用方式 方式二
let instance = getCurrentInstance() as ComponentInternalInstance

<script setup lang="ts">
import { getCurrentInstance,ComponentInternalInstance } from 'vue';
 
//两种使用方式 方式一
let { proxy } = getCurrentInstance() as ComponentInternalInstance
//两种使用方式 方式二
let instance = getCurrentInstance() as ComponentInternalInstance
 
 
//图片地址
let pic = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201410%2F17%2F20141017085556_LEQ83.thumb.700_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659620417&t=b17d6f1633a492977cb8bd79b0eac7de"
 
let openLoading = () => {
  proxy?.$loading.show(pic)
 
  setTimeout(() => {
    instance.appContext.config.globalProperties.$loading.hide()
  }, 3000)
 
}
</script>

自定义插件的使用

插件是一种能为 Vue 添加全局功能的工具代码

你如果是一个对象需要有install方法Vue会帮你自动注入到install 方法 你如果是function 就直接当install 方法去使用

它可以是一个拥有 install() 方法的对象，或者就简单地只是一个函数，它自己就是安装函数。安装函数接收应用实例和传递给 app.use() 的额外选项

在使用 createApp() 初始化 Vue 应用程序后，你可以通过调用 use() 方法将插件添加到你的应用程序中。

实现一个loadding, 通过传参实现loading图标自定义修改：

创建一个文件夹 我是放在components 下的

components/loading/loading.vue

components/loading/index.ts

loading.vue

<template>
  <div v-if="isShow" class="loading">
    <img :src="img" alt="">
    <div class="loading-content">Loading...</div>
  </div>
</template>
    
<script setup lang='ts'>
import { ref } from 'vue';
const isShow = ref(false)//定位loading 的开关
let img = ref('')
const show = (imgSrc: string) => {
  console.log("图片地址", imgSrc)
  img.value = imgSrc
  isShow.value = true
}
const hide = () => {
  isShow.value = false
}
//对外暴露 当前组件的属性和方法
defineExpose({
  isShow,
  show,
  hide
})
</script>
<style scoped lang="less">
.loading {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
 
  &-content {
    font-size: 30px;
    color: #fff;
  }
}
</style>

index.ts

 
import Loading from "./loading.vue"
 
import { App, createVNode, render, VNode } from 'vue'
 
export default {
  install: (app: App) => {
    // 将Loading插件转成虚拟dom  
    // 挂在前
    const vnode: VNode = createVNode(Loading)
    // 转成真实dom 第一个参数是dom  第二个参数是挂载点
    render(vnode, document.body)
    app.config.globalProperties.$loading = {
      show: vnode.component?.exposed?.show,
      hide: vnode.component?.exposed?.hide
    }
    console.log("laodddddd", vnode?.component?.exposed)
 
  }
}

main.ts引用

import { createApp } from 'vue'
import App from './App.vue'
 
// 自定义插件
import Loading from "./components/插件/loading"
 
const Vue = createApp(App)
 
// 全局声明 获取mitt所有的类型
declare module 'vue' {
  export interface ComponentCustomProperties {
    $loading: {
      show: (str: string) => void,
      hide: () => void
    }
 
  }
}
 
Vue.use(Loading)
 
Vue.mount('#app')
 

组件中 使用自定义插件：

<template>
  <div>
    <button @click="openLoading">打开加载插件</button>
  </div>
</template>
 
<script setup lang="ts">
import {getCurrentInstance, ComponentInternalInstance } from 'vue';
 
let { proxy } = getCurrentInstance() as ComponentInternalInstance
 
let instance = getCurrentInstance() as ComponentInternalInstance
let pic = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201410%2F17%2F20141017085556_LEQ83.thumb.700_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659620417&t=b17d6f1633a492977cb8bd79b0eac7de"
let openLoading = () => {
  proxy?.$loading.show(pic)
 
  setTimeout(() => {
    instance.appContext.config.globalProperties.$loading.hide()
  }, 3000)
 
}
</script>
 
<style scoped>
</style>

效果：