Vue引入第三方JavaScript库和如何创建自己的Vue插件
一 第三方JavaScript库
前言
.vue文件 中不解析 script标签引入js文件,只能用 import 引入
有两种用法:
1.import a from '../a'
2.import '../a'
区别在于第一个你要用到export导出之后 才能用import导入。
第二个是直接引入 和script标签是一样的. 但是它作用在自己的js文件中。
在使用vue做项目的时候,我们一般不将css样式写到各自的组件里,这样不仅会让代码冗余,而且不美观整洁。如果你定义了一些外部css文件,如何引入到vue组件中去呢?我们这里使用ES6的引入方式:
<template></template>
<style scoped>
@import "../assets/common/common.css";
</style>
那么JS文件如何引入呢?如果需要全局使用,则可以在main.js中引用并实例化对象:
部分js代码:
const DEBUG = true;
let BASE_URL = DEBUG ? 'url' : '';
const API = {
//网关设备管理
'edgeManager':{
'deviceList':BASE_URL + '/devicemanager/device/list.do',//网关设备列表
'deviceDelete':BASE_URL + '/devicemanager/device/delete.do'//网关设备删除
}
}
export default API;
在main.js中:
import API from './assets/api/api.config.js'
Vue.prototype.$API = API;
这样,我们在vue组件中使用this.$API
就可以找到这个js文件中的对象了。
如:this.$API.edgeManager.deviceList
如果需要按需引入,不在main.js中引入,直接在有需要的vue组件中引入:
部分代码:
<template></template>
<script>
import API from '../../assets/api/api.config.js'
</script>
这样引入的话,我们在当前组件可以直接使用API去找到这个js文件中的对象。
如:API.edgeManager.deviceList
需要注意的是,第二种方式按需引入的js文件在其他组件中是找不到这个对象的。
在Vue.js应用中,可能需要引入Lodash,Moment,Axios,Async等非常好用的JavaScript库。
当项目变得复杂庞大,通常会将代码进行模块化拆分。可能还需要跑在不同的环境下,比如浏览器,服务端。
如何在各个模块和组件文件中引入需要的库呢? 找到一种简单靠谱的方式,可以省去很多的麻烦。
----------------错误示范----------------
全局变量法
最不靠谱的方式就是将导入的库挂在全部变量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库引入:
entry.js
import moment from 'moment';
Object.defineProperty(Vue.prototype, '$moment', { value: moment });
由于所有的组件都会继承Vue原型对象上的方法,因此这些方法在任何组件文件中都能通过this.$moment
访问到:
MyNewComponent.vue
export default {
created() {
console.log('The time is ' . this.$moment().format("HH:mm"));
}
}
我们来仔细看一下其中的原理。
Object.defineProperty
通常我们会如下设置对象属性:
Vue.prototype.$moment = moment;
你也可以这么做,但是Object.defineProperty
允许我们用属性描述器来定义我们的属性。我们可以定义该属性是否可写,可枚举,可配置。
一般情况下,我们不需要用那么复杂的方式来赋值属性。但这里用它有个好处:用属性描述器定义的属性是默认只读的。
这能防止那些脑子不清醒的开发者犯下一些低级错误:
this.$http = 'Assign some random thing to the instance method';
this.$http.get('/'); // TypeError: this.$http.get is not a function
Object.defineProperty
能保护引入的库不被重新赋值,如果你尝试重写,程序会抛出“TypeError: Cannot assign to read only property”
的错误。
$
可能你注意到,我们用“$”
开头的属性来存放引入的库。当然,你应该记得还有其他的一些属性也是这样的,比如$refs, $on, $mount。
这种做法不是强制的,这个前缀就是为了提醒某些昏昏沉沉的开发者,这些属性是公有的,你可以在任何地方使用。反之,某些属性只能在Vue内部使用。
作为一门以原型为基本的语言,JavaScript中并没有真正的类,所以也就没有所谓的公有,私有变量,或者静态方法。上面这种约定,我觉得是种不错的选择。
this
现在你能用this.$libraryName
的方式来访问你需要的库了。但,你得保证this的指向。如果你在回调函数中使用this,通常这个this不再指向Vue实例。
箭头函数是解决这个问题的好方法。
this.$http.get('/').then(res => {
if (res.status !== 200) {
this.$http.get('/') // etc
// Only works in a fat arrow callback.
}
});
二 如何创建自己的Vue插件
如果你在项目的很多地方都用了某个库,或者你希望全局可用,你可以构建自己的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引入第三方JavaScript库和如何创建自己的Vue插件的更多相关文章
- 转《vue引入第三方js库》
一.绝对路径直接引入,全局可用 二.绝对路径直接引入,配置后,import 引入后再使用 三.webpack中配置 alias,import 引入后再使用 四.webpack 中配置 plugins, ...
- 如何在 FineUIMvc 中引用第三方 JavaScript 库
声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. 引入第三方颜色选择器 在 FineUIMvc 中使用第三方 JavaScript 遵循一定的约定,也非常简单. 下面以官网示例为 ...
- webpack4 系列教程(十二):处理第三方JavaScript库
教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步<webpack4 系列教程(十二):处理第三方 JavaScript 库>原文地址.或者来我的小站看更多内容:godbm ...
- 如何在Ionic2项目中使用第三方JavaScript库
onic的官网放出一记大招Ionic and Typings,来介绍如何在Ionic2项目中使用第三方JavaScript库. 因为在前阵子正好想用一个非常有名的第三方JS库ChartJs来实现一些东 ...
- Vue中如何引入第三方icon库(阿里巴巴矢量图标库)
1.进入阿里巴巴矢量图标库: 2.新建项目 3.前缀注意不要跟element-ui自带的icon(el-icon)重名就ok 4.创建完成后,去阿里选自己要使用的图标,加入购物车 ...
- 在Vue将第三方JS库封装为组件使用
第三方JS库地址:https://github.com/inorganik/CountUp.js 使用NPM进行安装: npm install --save countup 根据官方回答,CountU ...
- Vue 用第三方的库去实现动画效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Android NDK编程,引入第三方.so库
android自带的编译工具NDK进行编译时(非单纯的调用第三方.so而是进行ndk编程),armeabi以及armeabi-v7a文件夹下的第三方so文件将会被删除,只会产生编译后的so文件,其他的 ...
- vue 引入iconfont字体库
1.登录官网 https://www.iconfont.cn/ 2.选择所需要的图标加入图库 新建项目 选择fontClass 并下载到本地 目录如下 3.项目 assets目录下 新建 ico ...
随机推荐
- uC/OS-II 函数之时间相关函数
获得更多资料欢迎进入我的网站或者 csdn或者博客园 对于有热心的小伙伴在微博上私信我,说我的uC/OS-II 一些函数简介篇幅有些过于长应该分开介绍.应小伙伴的要求,特此将文章分开进行讲解.上文主要 ...
- 5104 I-country
5104 I-country 在 N*M 的矩阵中,每个格子有一个权值,要求寻找一个包含 K 个格子的凸连通块(连通块中间没有空缺,并且轮廓是凸的,如书中图片所示),使这个连通块中的格子的权值和最大. ...
- SpringBoot入门(IDEA篇)(三)
一.什么是JPA JPA(Java Persistence API)定义了一系列对象持久化的标准,目前实现这一规范的产品有Hibernate.TopLink等. 二.Mysql数据库示例 1.在app ...
- 2018牛客多校6 - I Team Rocket KD树维护空间
题意:给出n条铁路区间\([L,R]\),共有m个boom依时间顺序放置在\(k_i\)中,区间与\(k_i\)有交集的都被炸掉 求每次炸掉的铁路个数和最后输出所有id被炸的时间点 炸弹能炸到的区间满 ...
- vue 打印
vue 方法 第一种方法:通过npm 安装插件 1,安装 npm install vue-print-nb --save 2,引入 安装好以后在main.js文件中引入 import Print ...
- 学习python 3 入门知识
1.安装 http://www.runoob.com/python3/python3-install.html https://www.python.org/ 2.使用 工具一:IDLE IDLE 是 ...
- 漫谈TCPIP协议原理
一.每次说道TCPIP协议,有能说会道者,总爱说三次握手,什么意思? 顾名思义,假设有两个机器A和B 1.当A发送给B一个包的时候,B接收到了,这个时候,B有两个选择,要么将包数据放入缓存,等待处理, ...
- Js写九宫格抽奖
国庆出去转了一圈,回来及时把以前写的一些有用的在这儿记录一下 --------------------------------------------我是分割线-------------------- ...
- DB2 锁问题的监控和解决
常见的锁问题包括: 锁等待 锁超时 锁升级 死锁 而根据问题的特性通常分为两种: 实时事件:问题正在发生 历史事件:问题已经过去 如果实时事件,DBA 可以通过查看表信息.GET SNAPSHOT 或 ...
- 通过overflow: scroll;来实现部分区域的滚动
在移动端中,我们希望元素的滚动,可以通过一些插件的使用来实现滚动,当然也可以自己来实现. 比如:对于某一个区域,我们可以限制好高度之后,设定:overflow-y: scroll; 这样,就可以实现滚 ...