在 Vue.js 中使用任意 JavaScript 第三方库
来源:互联网 发布:电脑护眼知乎 编辑:程序博客网 时间:2024/05/16 08:39
方法一:使用全局变量
在浏览器运行js所有的变量都会变为window对象的属性,因此我们可以把第三方的类库,定义为window的属性,这样在任何位置都可以使用
window.lodash = require('lodash');
这样在每个组件中都可以直接使用lodash
export default { created() { console.log(lodash.isEmpty() ? 'Lodash everywhere!' : 'Uh oh..'); }}
这种方法有个很大的问题,在服务器环境下是没有window对象的,这种方法就无法使用了。
方法二:在组件中引用
每个组件中想要用某个类库的时候可以直接import
// MyComponent.vue 文件import lodash from 'lodash';export default { created() { console.log(lodash.isEmpty() ? 'Lodash is available here!' : 'Uh oh..'); }}
这种方式有个最大的问题是,当你有好多组件用到一个类库的时候,要import好多次,非常麻烦
方法三:扩充vue原型链
前面提的两种方法,都有问题,第一种显然局限性是天然的,无法克服。但是第二种有改进空间,既然可以载入组件,我们只要讲载入的组件放到一个,在所有组件中都可以访问的地方就可以了。哪里是这样的呢,答案显而易见Vue.prototype。原型链上的属性,每个实例化对象都可以访问,而且是共享的,节省内存。多好的事啊。
于是我们可以对代码进行改进
import lodash from 'lodash';Object.definePrototype(Vue.prototype, '$lodash', { value: lodash });
或者
import lodash from 'lodash';Vue.prototype.$lodash = lodash;
为什么要价格
再次进化
虽然上面的方式比较好了,但是太散了,我们需要更有效的组织代码,插件方式是个不错的选择。
我们可以发上面的代码改在成一个插件,比如我们建一个axios.js用来把axios库,扩充到vue原型链上
// axios.jsimport axios from 'axios';export default { //这里有个 install: function(Vue, name = '$http') { Object.defineProperty(Vue.prototype, name, { value: axios }); }}
这样我们在main.js中使用这个插件就可以了
// main.jsimport AxiosPlugin from './axios.js';Vue.use(AxiosPlugin, '$axios');//从现在开始所有组件都可以使用this.$axios了new Vue({ created() { console.log(this.$axios ? 'Axios works!' : 'Uh oh..'); }})
本文参考了https://vuejsdevelopers.com/2017/04/22/vue-js-libraries-plugins/?jsdojo_id=medium_lip
阅读全文
0 0
- 在 Vue.js 中使用任意 JavaScript 第三方库
- 在 Vue.js 中使用任意 JavaScript 第三方库
- 如何在 Vue.js 中使用第三方库
- 如何在 Vue.js 中使用第三方库
- Vue 中如何引入第三方 JS 库
- angular2中使用第三方js库
- Vue系列——在vue项目中使用jQuery及其第三方插件
- 在Eclipseme中使用第三方库
- 在maven中使用第三方库
- ionic2在TypeScrpit里面使用第三方JS库
- Vue中使用ElementUI使用第三方图标库iconfont
- 在typescript项目中使用第三方插件(以在vue+typescript项目中使用hightcharts为例)
- 如何在vue中引入第三方jquery,swiper等库(一)
- 如何在vue中引入第三方jquery,swiper等库(二)
- 在visual studio环境中使用第三方库
- 怎样在Cell中使用第三方库加载图片
- Qt 在win中使用第三方库的使用方法
- 如何在JNI工程中使用第三方库文件
- Python3安装bz2
- NOIP普及组模拟★回文数组
- 基于哈夫曼编码的文本文件压缩与解压缩
- 接口回调
- 三大统计相关系数:Pearson、Spearman秩相关系数、kendall等级相关系数
- 在 Vue.js 中使用任意 JavaScript 第三方库
- java程序性能优化技巧总结
- 百度统计--原始的
- SqlDateTime 溢出
- 我的服务器开发之路-php扩展c语言so
- 餐饮小程序
- Linux系统中的CPU利用率
- Python pickle模块学习(超级详细)
- 使代码运行在一个单独的线程中的方法