一、app.use

1.使用场景

不论是Vue2中的Vue.use亦或者Vue3中的app.use。其功能主要是用在


插件的安装上


，往往是在项目的入口文件（比如main.js）中。被use的插件多数是


NPM 中的第三方库


。在必要的时候，


也可以封装一个自定义的插件以供团队的使用


。这样可以避免反复开发同一个功能。

2.原理

从Vue源码对 app.use 描述可以看出，


app.use(


plugin


)


中的

核心部分

是


“plugin(app, …options)”


和


“plugin.install(app, …options)”


这两句；

也就是说，app.use(plugin)，本质上就是


把plugin中的 install 方法调用一遍


；

不仅如此，还可以发现


Vue 框架在 install 函数中暴露了 app实例


, 所以在实际开发中能挂载到 app实例上的都可以在install函数中实现，然后通过app.use()将插件快速地应用到各个项目中；

由此看来，我们也可以通过

封装自定义插件

供开发使用。

二、封装自定义插件

一个插件可以是一个拥有 install() 方法的对象，也可以直接是一个安装函数本身

1.写法一

拥有 install() 方法的对象

// 写法一：对象中定义 install 函数
let myPlugin = {
    install(app) {
        // 定义一个实例方法
        app.config.globalProperties.sayHello = function () {
            alert('Hello, Nancy!');
        }
        // 定义一个全局指令：元素挂载后"自动聚焦"及"动态绑定数据"
        app.directive('myModel', {
            mounted(el, binding) {
                el.focus();
                el.value = binding.value;
            },
        })
        // 定义一个全局按钮组件
        app.component('el-button', {
            name: "el-button",
            template: '<button value="按钮">ElementUI按钮</button>'
        })
    }
}
export default myPlugin;

2.写法二

直接是一个安装函数本身

// 写法二：直接定义 install 函数
let install = function (app, options) {
    // 定义一个实例方法
    app.config.globalProperties.sayHello = function () {
        alert('Hello, Nancy!');
    }
    // 定义一个全局指令：元素挂载后"自动聚焦"及"动态绑定数据"
    app.directive('myModel', {
        mounted(el, binding, vnode, prevNode) {
            el.focus();
            el.value = binding.value;
        },
    })
    // 定义一个全局按钮组件
    app.component('el-button', {
        name: "el-button",
        template: '<button value="按钮">ElementUI按钮</button>'
    })
}
export default install;

3.应用插件

应用自定义插件(main.js)

import myPlugin from './plugin/myPlugin';
// 自动调用插件 myPlugin 的 install 方法
app.use(myPlugin);

组件中测试

<template>
  <!-- 测试插件中定义的全局按钮组件和实例方法 -->
  <el-button @click="sayHello()"></el-button>
  <!-- 测试自定义指令 -->
  <input type="text" v-myModel="msg">
</template>

<script setup>
import { ref } from 'vue';
let msg = ref('测试v-myModel指令');
</script>

效果

4.注意事项

注意：


不要滥用插件，多个项目都需要使用时才抽离成一个Vue插件，然后封装成一个Npm包。

总结

app.use 在 Vue 中的作用主要是帮助团队将一些在各个部门中都需要使用的

公共的与业务无关的部分从现有业务中抽离出来

，形成一个独立的和业务无关的

第三方库

，以便在下次项目中直接通过use使用。

NPM

上就有大量的第三方库或者组件等，例如

moment、element-ui

等都属于与业务无关但是又经常使用的公共部分，便可以采用这种方法引入。