一、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')