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

Question

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

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

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

Answer 1

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

但是我只是建议您在真正需要的地方导入库，以获得更准确的智能感知和更好的 three-shaking

Answer 2

使用provide/inject替代

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
  }
}

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

How to include a library to be available in whole Vue.js 3 project?

vue.js

vuejs3