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

更新时间：2017年07月30日 16:20:09 作者：Quiet-Night

最近在学习使用vue框架，在使用中遇到了一个问题，查找相关资料终于找了正确的姿势，所以这篇文章主要给大家介绍了关于在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方法中引入多个需要的库。

总结

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

您可能感兴趣的文章:

vue.js diff算法原理详细解析
这篇文章主要介绍了vue.js diff算法原理详细解析，diff算法可以看作是一种对比算法，对比的对象是新旧虚拟Dom。顾名思义，diff算法可以找到新旧虚拟Dom之间的差异，但diff算法中其实并不是只有对比虚拟Dom，还有根据对比后的结果更新真实Dom
2022-06-06
基于vue的tab-list类目切换商品列表组件的示例代码
这篇文章主要介绍了基于vue的tab-list类目切换商品列表组件的示例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2020-02-02
详解Vue3页面如何自适应表格滚动高度
这篇文章主要为大家详细介绍了Vue3页面如何自适应表格滚动高度,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下
2024-02-02
Vue Cli项目重构为Vite的方法步骤
本文主要介绍了Vue Cli项目重构为Vite的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
vue实现数字动态翻牌器
这篇文章主要为大家详细介绍了vue实现数字动态翻牌器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
解决vue select当前value没有更新到vue对象属性的问题
今天小编就为大家分享一篇解决vue select当前value没有更新到vue对象属性的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
Vue3中使用匿名函数的方法实现
Lambda函数,也称为匿名函数,是Vue3中的一种函数类型,绑定匿名方法和绑定普通方法主要是写法上的区别,其他的区别并不是很大,本文主要介绍了Vue3中使用匿名函数的方法实现,感兴趣的可以了解一下
2023-12-12
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
下面小编就为大家分享一篇vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
Vue各种loader的基本配置与使用示例教程
这篇文章主要介绍了Vue 各种loader的基本配置与使用，本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-01-01
vue中jsonp的使用方法
这篇文章主要介绍了vue中jsonp的使用方法,文章从安装开始展开具体的vue中jsonp的使用详细内容,需要的朋友可以参考一下，希望对大家有所帮助
2021-11-11