vue3 app.use()的作用小结

更新时间：2026年01月22日 09:18:37 作者：Wiktok

Vue3中的app.use(plugin)是全局安装插件的核心方法,它通过调用插件的install方法,一次性为整个应用注入功能,下面就来详细的介绍一下,感兴趣的可以了解一下

一、类比理解

Vue3 施工队（createApp() 返回的实例）
plugin（外挂）可以是一把“电动螺丝刀”、一套“中央空调”、或者一块“共享黑板”。
app.use(plugin) 相当于队长说：“大家停一下，先把这套设备装上，以后谁想用直接用。”

二、官方定义

app.use(plugin, options) 会调用插件的 install(app, options) 方法，并保证同一个插件只会被安装一次。

三、最常见的 3 类外挂

全局功能增强（例：Router、Pinia、i18n）

import { createRouter } from 'vue-router'
const router = createRouter(...)
app.use(router)               // 所有组件都能 this.$router / useRouter()

全局自定义组件/指令（例：Element-Plus、自定义 loading 指令）

import ElementPlus from 'element-plus'
app.use(ElementPlus)          // 全局可用 <el-button> 等

工具/调试类（例：devtools、mock、日志）

import { createPinia } from 'pinia'
app.use(createPinia())        // 状态管理仓库一次性装好

四、自己写一个最小插件

// my-logger.js
export default {
  install(app, options = {}) {
    // 1. 添加全局属性
    app.config.globalProperties.$log = (msg) => {
      console.log(`[${options.tag || 'APP'}]`, msg)
    }

    // 2. 添加全局自定义指令
    app.directive('focus', {
      mounted(el) { el.focus() }
    })

    // 3. 添加全局组件（可选）
    // app.component('MyButton', {...})
  }
}

使用：

import { createApp } from 'vue'
import App from './App.vue'
import MyLogger from './my-logger.js'

const app = createApp(App)
app.use(MyLogger, { tag: '别墅' })   // 安装插件并传参
app.mount('#app')

以后在任何组件里都能：

<script setup>
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
proxy.$log('Hello from any room!')
</script>

<template>
  <input v-focus />
</template>

五、一句话总结

app.use(plugin) 是 Vue3 提供的一次性「全局安装接口」：
插件想在全局挂属性、注组件、注册指令、改配置，都写在自己的 install 里；
用户只需一行 app.use(...)，整个应用就能共享这些能力。

到此这篇关于vue3 app.use()的作用的文章就介绍到这了,更多相关vue3 app.use()内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue3
app.use

一文教你彻底解决Vue3中的ResizeObserver警告
这篇文章主要为大家详细介绍了介绍了Vue3中出现ResizeObserver loop completed with undelivered notifications错误的相关解决方法,有需要的小伙伴可以跟随小编一起学习一下
2025-05-05
vue-element-admin如何设置默认语言
这篇文章主要介绍了vue-element-admin如何设置默认语言，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue使用pdf-dist实现pdf预览以及水印添加
这篇文章主要为大家详细介绍了vue如何使用pdf-dist实现pdf预览以及水印添加的功能，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下
2023-10-10
vue-resouce设置请求头的三种方法
本篇文章主要介绍了vue-resouce设置请求头的三种方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
vue使用html2canvas和jspdf将html转成pdf
在前端开发中, html转pdf是最常见的需求,下面这篇文章主要给大家介绍了关于vue如何使用html2canvas和jspdf将html转成pdf的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-03-03
Vue Autocomplete 自动完成功能简单示例
这篇文章主要介绍了Vue Autocomplete 自动完成功能,结合简单示例形式分析了Vue使用el-autocomplete组件实现自动完成功能相关操作技巧,需要的朋友可以参考下
2019-05-05
Vue+java实现时间段的搜索示例
本文主要介绍了Vue+java实现时间段的搜索示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
Vue动态组件component标签的用法大全
这篇文章主要介绍了Vue动态组件component标签的用法,在Vue中，可以通过component标签的is属性动态指定标签，本文通过示例代码给大家介绍的非常详细，需要的朋友可以参考下
2022-08-08
Vue中的表单输入绑定,双向绑定方式
这篇文章主要介绍了Vue中的表单输入绑定,双向绑定方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2025-03-03
vue中template模板编译的过程全面剖析
这篇文章主要介绍了vue中template模板编译的过程全面剖析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04