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


Posted in Javascript onJuly 30, 2017

本文主要给大家介绍的是关于在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方法中引入多个需要的库。

总结

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

Javascript 相关文章推荐
cument.execCommand()用法深入理解
Dec 04 Javascript
浅析hasOwnProperty方法的应用
Nov 20 Javascript
jQuery中slideUp()方法用法分析
Dec 24 Javascript
Web表单提交之disabled问题js解决方法
Jan 13 Javascript
JavaScript简单获取系统当前时间完整示例
Aug 02 Javascript
防止Node.js中错误导致进程阻塞的办法
Aug 11 Javascript
Node.js中看JavaScript的引用
Apr 22 Javascript
js中bool值的转换及“&&”、“||”、 “!!”详解
Dec 21 Javascript
Vue 重置组件到初始状态的方法示例
Oct 10 Javascript
Vue中jsx不完全应用指南小结
Nov 01 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
Nov 12 Javascript
在Angular项目使用socket.io实现通信的方法
Jan 05 Javascript
webpack配置sass模块的加载的方法
Jul 30 #Javascript
Angular.js中$resource高大上的数据交互详解
Jul 30 #Javascript
Vue的Flux框架之Vuex状态管理器
Jul 30 #Javascript
webpack实现热加载自动刷新的方法
Jul 30 #Javascript
利用JavaScript如何查询某个值是否数组内
Jul 30 #Javascript
Angular.js中上传指令ng-upload的基本使用教程
Jul 30 #Javascript
关于前后端json数据的发送与接收详解
Jul 30 #Javascript
You might like
用IE远程创建Mysql数据库的简易程序
2006/10/09 PHP
php adodb连接带密码access数据库实例,测试成功
2008/05/14 PHP
PHP基于递归实现的约瑟夫环算法示例
2017/08/27 PHP
PHP PDO数据库操作预处理与注意事项
2019/03/16 PHP
PHP扩展类型及安装方式解析
2020/04/27 PHP
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
js给onclick赋值传参数的两种方法
2013/11/25 Javascript
jquery获取一个元素下面相同子元素的个数代码
2014/07/31 Javascript
JavaScript极简入门教程(三):数组
2014/10/25 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
jQuery AjaxUpload 上传图片代码
2016/02/02 Javascript
Javascript获取统一管理的提示语(message)
2016/02/03 Javascript
Javascript实现苹果悬浮虚拟按钮
2016/04/10 Javascript
javascript实现多张图片左右无缝滚动效果
2017/03/22 Javascript
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
详解关于element级联选择器数据回显问题
2019/02/20 Javascript
基于JQuery实现页面定时弹出广告
2020/05/08 jQuery
python中stdout输出不缓存的设置方法
2014/05/29 Python
python使用wxpython开发简单记事本的方法
2015/05/20 Python
Pycharm学习教程(5) Python快捷键相关设置
2017/05/03 Python
python+VTK环境搭建及第一个简单程序代码
2017/12/13 Python
Python Django框架实现应用添加logging日志操作示例
2019/05/17 Python
Python3.5 win10环境下导入kera/tensorflow报错的解决方法
2019/12/19 Python
python Canny边缘检测算法的实现
2020/04/24 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
2021/01/09 Python
中国最大的潮流商品购物网站:YOHO!BUY有货
2017/01/07 全球购物
请说出以下代码输出什么
2013/08/30 面试题
银行会计职员个人的自我评价
2013/09/29 职场文书
《黄山奇石》教学反思
2014/04/19 职场文书
基层党建工作宣传标语
2014/06/24 职场文书
餐厅感恩节活动策划方案
2014/10/11 职场文书
关于运动会广播稿50字
2014/10/18 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书
驳回起诉民事裁定书
2015/05/19 职场文书
大学毕业晚会开场白
2015/05/29 职场文书