在 Vue.js 中使用任意 JavaScript 第三方库

最新推荐文章于 2025-02-05 00:45:00 发布

shooke

最新推荐文章于 2025-02-05 00:45:00 发布

阅读量4.3k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/shooke/article/details/78392222

版权

vue 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了在Vue项目中引入第三方库的三种方法：使用全局变量、在组件中单独引用及通过扩展Vue原型链实现。重点推荐使用插件方式扩充Vue原型链，使组件能够便捷地访问第三方库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一：使用全局变量

在浏览器运行js所有的变量都会变为window对象的属性，因此我们可以把第三方的类库，定义为window的属性，这样在任何位置都可以使用

window.lodash = require('lodash');

这样在每个组件中都可以直接使用lodash

export default {
  created() {
    console.log(lodash.isEmpty() ? 'Lodash everywhere!' : 'Uh oh..');
  }
}

这种方法有个很大的问题，在服务器环境下是没有window对象的，这种方法就无法使用了。

方法二：在组件中引用

每个组件中想要用某个类库的时候可以直接import

// MyComponent.vue 文件
import lodash from 'lodash';
export default {
  created() {
    console.log(lodash.isEmpty() ? 'Lodash is available here!' : 'Uh oh..');
  }
}

这种方式有个最大的问题是，当你有好多组件用到一个类库的时候，要import好多次，非常麻烦

方法三：扩充vue原型链

前面提的两种方法，都有问题，第一种显然局限性是天然的，无法克服。但是第二种有改进空间，既然可以载入组件，我们只要讲载入的组件放到一个，在所有组件中都可以访问的地方就可以了。哪里是这样的呢，答案显而易见Vue.prototype。原型链上的属性，每个实例化对象都可以访问，而且是共享的，节省内存。多好的事啊。
于是我们可以对代码进行改进

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

或者

import lodash from 'lodash';
Vue.prototype.$lodash = lodash;

为什么要价格 $？你懂得，vue中有一个约定俗称的规则，在组件中使用this.$ http这种形式访问扩展类库，比如典型的this.$store

再次进化

虽然上面的方式比较好了，但是太散了，我们需要更有效的组织代码，插件方式是个不错的选择。
我们可以发上面的代码改在成一个插件，比如我们建一个axios.js用来把axios库，扩充到vue原型链上

// axios.js
import axios from 'axios';
export default {
  //这里有个
  install: function(Vue, name = '$http') {
    Object.defineProperty(Vue.prototype, name, { value: axios });
  }
}

这样我们在main.js中使用这个插件就可以了

// main.js
import AxiosPlugin from './axios.js';
Vue.use(AxiosPlugin, '$axios');

//从现在开始所有组件都可以使用this.$axios了
new Vue({
  created() {
    console.log(this.$axios ? 'Axios works!' : 'Uh oh..');
  }
})

本文参考了https://vuejsdevelopers.com/2017/04/22/vue-js-libraries-plugins/?jsdojo_id=medium_lip