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 相关文章推荐
javascript 折半查找字符在数组中的位置(有序列表)
Dec 09 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
Oct 24 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
Jun 03 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 Javascript
jQuery EasyUI中DataGird动态生成列的方法
Apr 05 Javascript
JS实现无缝循环marquee滚动效果
May 22 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
Nov 20 Javascript
vue-swiper的使用教程
Aug 30 Javascript
vue中rem的配置的方法示例
Aug 30 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 Javascript
实现一个Vue自定义指令懒加载的方法示例
Jun 04 Javascript
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
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
php去除换行(回车换行)的三种方法
2014/03/26 PHP
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
2009/04/24 Javascript
一个JS的日期格式化算法示例
2013/07/31 Javascript
JavaScript中的原型和继承详解(图文)
2014/07/18 Javascript
Node.js的特点和应用场景介绍
2014/11/04 Javascript
原生JS和JQuery动态添加、删除表格行的方法
2015/05/28 Javascript
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
2017/03/09 Javascript
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
NodeJS简单实现WebSocket功能示例
2018/02/10 NodeJs
node内置调试方法总结
2018/02/22 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
解决vuex数据异步造成初始化的时候没值报错问题
2019/11/13 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
2020/04/27 Javascript
跟老齐学Python之从if开始语句的征程
2014/09/14 Python
PyQt5每天必学之事件与信号
2018/04/20 Python
python3+PyQt5图形项的自定义和交互 python3实现page Designer应用程序
2020/07/20 Python
Django框架用户注销功能实现方法分析
2019/05/28 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
Python3.7下安装pyqt5的方法步骤(图文)
2020/05/12 Python
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
JDO的含义
2012/11/17 面试题
计划生育标语
2014/06/23 职场文书
学校周年庆活动方案
2014/08/22 职场文书
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
2014年财务工作自我评价
2014/09/23 职场文书
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书
2014年计划生育协会工作总结
2014/11/14 职场文书
高中生毕业评语
2014/12/30 职场文书
2016年党课培训学习心得体会
2016/01/07 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python
错误码NET::ERR_CERT_DATE_INVALID证书已过期解决方法?
2022/07/07 数码科技