欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue框架中正确引入JS库的方法介绍

程序员文章站 2022-11-26 14:19:01
本文主要给大家介绍的是关于在vue框架中正确引入js库的相关内容,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍: 错误示范 全局变量法 最不靠谱的方...

本文主要给大家介绍的是关于在vue框架中正确引入js库的相关内容,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍:

错误示范

全局变量法

最不靠谱的方式就是将导入的库挂在全部变量window 对象下:

// entry.js:
window._ = require('lodash');

// mycomponent.vue:
export default {
 created() {
 console.log(_.isempty() ? 'lodash everywhere!' : 'uh oh..');
 }
}

这种方式的缺点有很多,我们只说其中一个关键的点:不支持服务端渲染。当应用跑在服务端时,window对象不存在,当然试图去访问window下的属性会抛出错误。

处处引入法

另外一个不太优雅的方式就是在需要的每个文件中都引入对应的库:

// mycomponent.vue:
import _ from 'lodash';

export default {
 created() {
 console.log(_.isempty() ? 'lodash is available here!' : 'uh oh..');
 }
}

虽然这方法是可行的,但是太不简洁。你必须在每个文件中都记得引入, 而且如果不需要了,又得重新删除。另外,如果打包策略不够明智的话,可能会打包出多份重复的代码。

正确引入方式

最简单靠谱的方式是用库变成vue的原型对象的属性。下面,我来演示如何将moment 库引入:

import moment from 'moment';
object.defineprototype(vue.prototype, '$moment', { value: moment });

object.defineprototype 语法参见 mdn

由于所有的组件都会继承vue原型对象上的方法,因此这些方法在任何组件文件中都能通过this.$moment 访问到:

// mynewcomponent.vue
export default {
 created() {
 console.log('the time is ' . this.$moment().format("hh:mm"));
 }
}

使用 object.defineproperty 定义对象属性,如果不在属性描述器中额外说明,则该属性就是默认只读的,保护引入的库不被重新赋值。

写成插件

如果你在项目的很多地方都用了某个库,或者你希望全局可用,你可以构建自己的vue 插件。

插件能化繁为简,能让你像下面这样很简单地引入自己想要的库:

import mylibraryplugin from 'my-library-plugin';
vue.use(mylibraryplugin);

就像vue route,vuex等插件一样,我们的库仅仅需要两行,就能在任何地方使用了。

如何写插件

首先,创建一个文件。本例中,我将引入一个axios库的插件。我们就把这个文件命名为axios.js 吧。

最关键的地方在于,我们需要暴露一个将vue构造器作为第一个参数的install 方法。

// axios.js:

export default {
 install: function(vue) {
 // do stuff
 }
}

然后我们可以用之前的方式将库添加到vue的原型对象上:

// axios.js
import axios from 'axios';

export default {
 install: function(vue) {
 object.defineproperty(vue.prototype, '$http', { value: axios });
 }
}

接着我们只需要vue实例的use方法就能将这个库引入整个项目了。我们像下面代码一样简单引入:

// entry.js
import axiosplugin from './axios.js';
vue.use(axiosplugin);

new vue({
 created() {
 console.log(this.$http ? 'axios works!' : 'uh oh..');
 }
})

插件参数设置

插件的install方法还可以接受其他的可选参数。有些开发者可能不喜欢axios实例对象的方法名$http,因为vue resource插件的方法名也是这个。然后,让我们利用第二个参数来修改它。

// axios.js
import axios from 'axios';

export default {
 install: function(vue, name = '$http') {
 object.defineproperty(vue.prototype, name, { value: axios });
 }
}
// entry.js
import axiosplugin from './axios.js';
vue.use(axiosplugin, '$axios');

new vue({
 created() {
 console.log(this.$axios ? 'axios works!' : 'uh oh..');
 }
})

当然上面,我们可以直接在object.defineproperty的中将name属性写死成$axios。也可以在install方法中引入多个需要的库。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持