如何在整个 Vue.js 3 项目中包含一个可用的库？答案

【问题标题】：How to include a library to be available in whole Vue.js 3 project?如何在整个 Vue.js 3 项目中包含一个可用的库？
【发布时间】：2021-01-15 00:31:00
【问题描述】：

根据this blog post，在 Vue.js 2 中包含常用库（例如 axios）的正确方法是将它们设置为 Vue 原型对象的属性，如下所示：

import axios from 'axios';
Object.defineProperty(Vue.prototype, '$axios', { value: axios });

不幸的是，这种方法不再适用于 Vue.js 3。那么在整个项目中导入库的正确方法是什么？我不希望将它们设置为全局变量（即window 对象。）

【问题讨论】：

标签： vue.js vuejs3

【解决方案1】：

使用提供/注入作为替代方法

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios';
    
const app = createApp(App)
app.provide('axios', axios ) // <-- define here
app.mount('#app')

然后在任何你想使用 axios 的组件中你都可以这样做

app.component('todo-list-statistics', {
  inject: ['axios'],
  created() {
    this.axios // --> Injected property
  }
}

【讨论】：

【解决方案2】：

我认为在 vue 3 项目中使用库的最佳方式是使用依赖注入 https://v3.vuejs.org/guide/component-provide-inject.html

但是我只是建议你在真正需要的地方导入库，以获得更准确的智能感知，以及更好的三抖动

【讨论】：