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 学习之旅 (1)
Feb 05 Javascript
javascript跑马灯悬停放大效果实现代码
Dec 12 Javascript
js函数中onmousedown和onclick的区别和联系探讨
May 19 Javascript
JavaScript数据结构之链表的实现
Mar 19 Javascript
JS原生数据双向绑定实现代码
Aug 14 Javascript
在小程序中使用Echart图表的示例代码
Aug 02 Javascript
通过vue写一个瀑布流插件代码实例
Sep 07 Javascript
jquery实现点击弹出对话框
Feb 08 jQuery
js+canvas实现纸牌游戏
Mar 16 Javascript
uniapp微信小程序实现一个页面多个倒计时
Nov 01 Javascript
vue实现列表拖拽排序的功能
Nov 02 Javascript
基于jQuery拖拽事件的封装
Nov 29 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运行时强制显示出错信息的代码
2011/04/20 PHP
CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能
2014/07/18 PHP
利用php输出不同的心形图案
2016/04/22 PHP
建立良好体验度的Web注册系统ajax
2007/07/09 Javascript
JS模拟的QQ面板上的多级可展开的菜单
2009/10/10 Javascript
JavaScript prototype属性使用说明
2010/05/13 Javascript
jQuery中:gt选择器用法实例
2014/12/29 Javascript
jquery判断复选框是否被选中的方法
2015/10/16 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
vue中mint-ui的使用方法
2018/04/04 Javascript
详解Vue中watch的详细用法
2018/11/28 Javascript
详解React 服务端渲染方案完美的解决方案
2018/12/14 Javascript
javascript中call,apply,callee,caller用法实例分析
2019/07/24 Javascript
基于原生js实现九宫格算法代码实例
2020/07/03 Javascript
[02:27]DOTA2英雄基础教程 莱恩
2014/01/17 DOTA
python 默认参数问题的陷阱
2016/02/29 Python
详解Python with/as使用说明
2018/12/13 Python
python实现随机漫步方法和原理
2019/06/10 Python
python批量修改图片尺寸,并保存指定路径的实现方法
2019/07/04 Python
Python3 Tkinkter + SQLite实现登录和注册界面
2019/11/19 Python
PYQT5开启多个线程和窗口,多线程与多窗口的交互实例
2019/12/13 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
Python实现SMTP邮件发送
2020/06/16 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
css3 条纹化和透明化表格Firefox下测试成功
2014/04/15 HTML / CSS
美国知名的网上鞋类及相关服装零售商:Shoes.com
2017/05/06 全球购物
德国最大的服装、鞋子和配件在线商店之一:Outfits24
2019/07/23 全球购物
泰国排名第一的家居用品中心:HomePro
2020/11/18 全球购物
教室标语大全
2014/06/21 职场文书
党员自我剖析材料范文
2014/10/06 职场文书
节约用水广告语60条
2019/11/14 职场文书
Vue如何清空对象
2022/03/03 Vue.js
Python实现自动玩连连看的脚本分享
2022/04/04 Python
Win11 21h2可以升级22h2吗?看看你的电脑符不符合要求
2022/07/07 数码科技