方式一：在 main.js 中定义

此方式会使 main.js 中代码激增（不建议）

1. 在 main.js 中定义

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)

// vue3 全局组件
import ComponentA from '@/views/global/ComponentA.vue'
app.component('ComponentA', ComponentA)

// vue3 全局混入
app.mixin({
  data() {
    return {
      mixinA: 'mixin---A'
    }
  },
  methods: {
    playMixinAA() {
      return 'mixin---A'
    }
  }
})

// vue3 全局指令（变更）
app.directive('directiveA', {
  created(el, binding, vnode) {
    console.log(vnode)
    el.innerHTML = 'directiveA change innerHTML' + '---' + binding.value.params + 'A'
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeUnmount() {},
  unmounted() {}
})

// vue3 全局过滤
// (在vue3中移除了过滤器，可以用方法或者计算属性来代替过滤器)
app.config.globalProperties.$filtersA = function (params) {
  return params + '---' + '过滤后的值---A'
}

// vue3 全局方法和属性
app.config.globalProperties.$A = '全局属性---A'
app.config.globalProperties.$playA = () => {
  return '全局方法---A'
}

app.mount('#app')

2. 在组件中使用

<script setup>
import { ref } from "vue"
const f1 = ref('hello world')
</script>

<template>
  <div class="home">
    <h1>全局属性、方法、过滤器、组件</h1>
    <div>1. 全局组件</div>
    <ComponentA></ComponentA>
    <div>2. 全局过滤</div>
    <div>{{ $filtersA(f1) }}</div>
    <div>3. 全局指令</div>
    <div v-directiveA="{params: '参数---'}">{{ f1 }}</div>
    <div>4. 全局混入</div>
    <div>{{ mixinA }}</div>
    <div>5. 全局属性和方法</div>
    <div>{{ $A }}</div>
    <div>{{ $playA('xxxxx') }}</div>
  </div>
</template>
<style scoped></style>

方式二：通过 vue 注册插件的方式实现（推荐）

1. 在 main.js 中通过 app.use(install 函数) 注册插件

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

import global from './utils/global/index.js'
app.use(global)

app.mount('#app')

2. 在 src/utils/global/index.js 中集中整合

import components from './components.js'
import mixins from './mixins.js'
import directives from './directives.js'
import filters from './filters.js'
import propertiesAndMethods from './propertiesAndMethods.js'

const global = {
  install(App, options) {
    console.log(options)

    // 全局组件
    Object.keys(components).forEach((key) => {
      App.component(key, components[key])
    })

    // 全局混入
    Object.keys(mixins).forEach((key) => {
      App.mixin(mixins[key])
    })

    // 全局指令（变更）
    Object.keys(directives).forEach((key) => {
      App.directive(key, directives[key])
    })

    // vue3 全局过滤
    // (在vue3中移除了过滤器，可以用方法或者计算属性来代替过滤器)
    Object.keys(filters).forEach((key) => {
      App.config.globalProperties[key] = filters[key]
    })

    // vue3 全局方法和属性
    Object.keys(propertiesAndMethods).forEach((key) => {
      App.config.globalProperties[key] = propertiesAndMethods[key]
    })
  }
}

export default global

3. 分别定义全局组件、全局混入、全局指令、全局过滤、全局属性和方法

定义全局组件 src/utils/global/components.js

// 全局组件
import ComponentB from '@/views/global/ComponentB.vue'

export default {
  ComponentB
}

定义全局混入 src/utils/global/mixins.js

// 全局混入
const mixinB = {
    data(){
        return {
            mixinB: 'mixin---B'
        }
    }
}

export default {
    mixinB
}

定义全局指令 src/utils/global/directives.js

// 全局指令
const directiveB = {
  created(el, binding) {
    el.innerHTML = 'directiveA change innerHTML --- ' + binding.value.params + 'B'
  }
}

export default {
  directiveB
}

定义全局过滤 src/utils/global/filters.js

// 全局过滤
const $filtersB = function (v) {
  if (v) {
    return v + '---' + '过滤后的值---B'
  } else {
    return v
  }
}

export default {
  $filtersB
}

定义全局 src/utils/global/propertiesAndMethods.js

// 全局属性和方法
const $B = '全局属性---B'
const $playB = () => {
    return '全局方法---B'
}

export default {
    $B,
    $playB
}

4. 在组件中使用

<script setup>
import { ref } from "vue"
const f1 = ref('hello world')
</script>

<template>
  <div class="home">
    <h1>五、全局属性、方法、过滤器、组件</h1>
    <div>1. 全局组件</div> 
    <ComponentB></ComponentB>
    <div>2. 全局过滤</div>
    <div>{{ $filtersB(f1) }}</div>
    <div>3. 全局指令</div>
    <div v-directiveB="{params: '参数---'}">{{ f1 }}</div>
    <div>4. 全局混入</div>
    <div>{{ mixinB }}</div>
    <div>5. 全局属性和方法</div>
    <div>{{ $B }}</div>
    <div>{{ $playB('xxxxx') }}</div>
  </div>
</template>
<style scoped></style>