vue.js - 导入插件时 Vue.use() 的目的是什么？如果我们已经使用了 vue.use ，是否需要将其添加到组件中

Question

我正在使用插件 vue-flag-icon - https://www.npmjs.com/package/vue-flag-icon对于标志，在他们的文档中我看到了以下初始化步骤。

import FlagIcon from 'vue-flag-icon'
Vue.use(FlagIcon);

我需要这个吗？这在他们的文档中没有指定!

export default {
    components: {
        FlagIcon. /// do i need to give it here ?
    },
}

这个 Vue.use(...) 的目的是什么，即使我删除它也能正常工作。有人可以帮帮我吗？

检查了 vue 文档 - https://v2.vuejs.org/v2/guide/plugins.html .

没有搞清楚

Answer 1

Vue.use automatically prevents you from using the same plugin more than once, so calling it multiple times on the same plugin will install the plugin only once.

对于 flag 组件，它声明了一个全局组件，您可以在组件中引用该组件，以便在下面的示例中正确呈现。

在vue-flag-icon源码中

install: function (Vue) {
    if (VuePlugin.installed) {
        return;
    }
    VuePlugin.installed = true;
    Vue.component('flag', Flag);
}

你可以看到 Vue.component('flag', Flag) 这是一个根级别的组件声明，因此，在你的组件中，你不需要声明如下内容

---

如果使用 Vue.use 则不需要

import { Flag } from "vue-flag-icon"

export default {
  components: { Flag }
}

---

如果不使用 Vue.use，模板中的 flag 标签如果您没有将其作为组件包含在 vue init 中，将会抛出错误。

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <flag iso="it" />
    <flag iso="gb" />
    <flag iso="us" />
  </div>
</template>

<script>

export default {
  name: 'app',
}
</script>