vue全局API（app.component，app.config，app.directive，app.mount，app.unMount，app.use）

一、app.component

注册组件

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'
import emitter from './utils/emitter'
import Hello from './components/HelloWorld.vue'
const app=createApp(App)
app.component('Hello',Hello)
app.use(router)
app.use(emitter)
app.mount('#app')

二、app.config

配置全局属性

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'
import emitter from './utils/emitter'
import axios from 'axios'
const app=createApp(App)
app.config.globalProperties.$http=axios
app.use(router)
app.use(emitter)
app.mount('#app')

三、app.directive

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
const app=createApp(App)
app.directive('beauty',(element,{value})=>{
    element.innerText +=value   
    element.style.color='green'
    element.style.backgroundColor='yellow'
})
app.mount('#app')

<template>
  <div class="outer">
   <h3 v-beauty="sum">父组件</h3>
  </div>
</template>
<script setup>
import  Child from './Child.vue'
import {ref} from 'vue'
let sum=ref(0)
</script>

四、app.mount

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

五、app.unMount

import { createApp } from 'vue'
import App from './App.vue'
const app=createApp(App)
app.mount('#app')
setTimeout(()=>{
    app.unmount()
},5000)

六、app.use

安装插件

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'
import emitter from './utils/emitter'
const app=createApp(App)
app.use(router)
app.use(emitter)
app.mount('#app')