Vue 中如何正确引入第三方模块的方法步骤


Posted in Javascript onMay 05, 2019

方法一:配置 webpack ProvidePlugin 全局引入

假设要使用到 jquery,那么可以通过配置 webpack 的 ProvidePlugin 的插件来全局引入:

https://webpack.js.org/plugins/provide-plugin/

new webpack.ProvidePlugin({
 $: 'jquery',
 jQuery: 'jquery'
})

方法二:包装成插件在 Vue 中调用 use 方法安装

另外一种比较靠谱的方法是将第三方模块打包成插件,如我需要全局使用 echarts,那么在 src 目录下新建一个 lib,并创建名为 echarts.js 的文件:

import echarts from 'echarts'

export default {
 install (Vue) {
  Object.defineProperty(Vue.prototype, '$echarts', {
   value: echarts
  })
 }
}

上述代码 export 一个对象,对象包含一个 install 方法,该方法的参数是 Vue 构造函数,我们使用 Object.defineProperty 或 Reflect 的方法将 $echarts 定义到 Vue.prototype 中去。

然后在项目中使用:

import echarts from './lib/echarts'

Vue.use(echarts) // use

new Vue({
  // ...
}).$mount('#app')

这样就可以在 vue 实例中通过 $echarts 来使用

// ...
let myChart = this.$echarts.init(this.$refs.main)
// ...

其他方法

其他还有在 window 对象中全局定义;或使用 Vue.prototype.xxx = xxx 等,都存在各样问题,如 window 会导致全局作用域污染;后者定义方式不可靠,比方说 echarts 模块太大,会经常出现扩展定义失败导致的报错

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery each()小议
Mar 18 Javascript
javascript五图轮播切换实用版
Aug 17 Javascript
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 Javascript
jquery滚动条插件jScrollPane的使用介绍
Nov 08 Javascript
浅析JQuery中的html(),text(),val()区别
Sep 01 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
微信小程序 教程之条件渲染
Oct 18 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
Nov 24 Javascript
angular2实现统一的http请求头方法
Aug 13 Javascript
谈谈JavaScript中super(props)的重要性
Feb 12 Javascript
JS函数本身的作用域实例分析
Mar 16 Javascript
Ant Design Pro 之 ProTable使用操作
Oct 31 Javascript
详解vue的双向绑定原理及实现
May 05 #Javascript
Vue+Express实现登录注销功能的实例代码
May 05 #Javascript
Vue 递归多级菜单的实例代码
May 05 #Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
May 05 #Javascript
详解Vue调用手机相机和相册以及上传
May 05 #Javascript
原生JS实现动态添加新元素、删除元素方法
May 05 #Javascript
Angular实现svg和png图片下载实现
May 05 #Javascript
You might like
PHP使用者状态管理功能的应用
2006/10/09 PHP
七款最流行的PHP本地服务器分享
2013/02/19 PHP
php读取文件内容的几种方法详解
2013/06/26 PHP
php数组去重实例及分析
2013/11/26 PHP
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
php代码架构的八点注意事项
2016/01/25 PHP
Prototype使用指南之enumerable.js
2007/01/10 Javascript
JS版网站风格切换实例代码
2008/10/06 Javascript
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
基于jquery实现的表格分页实现代码
2011/06/21 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
2013/12/06 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
2015/03/31 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
javascript事件的传播基础实例讲解(35)
2017/02/14 Javascript
vuex 中插件的编写案例解析
2019/06/10 Javascript
vue自定义表单生成器form-create使用详解
2019/07/19 Javascript
[00:17]游戏风云独家报道:DD赛后说出数字秘密 吓死你们啊!
2014/07/13 DOTA
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
用Python写的图片蜘蛛人代码
2012/08/27 Python
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
关于Django显示时间你应该知道的一些问题
2017/12/25 Python
对python中的高效迭代器函数详解
2018/10/18 Python
Django实现web端tailf日志文件功能及实例详解
2019/07/28 Python
英国潮流网站:END.(全球免邮)
2017/01/16 全球购物
Booking.com荷兰:全球酒店网上预订
2017/08/22 全球购物
美国领先的在线旅游网站:Orbitz
2018/11/05 全球购物
main 函数执行以前,还会执行什么代码
2013/04/17 面试题
项目资料员岗位职责
2013/12/10 职场文书
员工考核评语大全
2014/04/26 职场文书
治超工作实施方案
2014/05/04 职场文书
委托书格式要求
2015/01/28 职场文书
2015年医德考评自我评价
2015/03/03 职场文书
2015政治思想表现评语
2015/03/25 职场文书
在职证明书模板
2015/06/15 职场文书
2016幼儿园新学期寄语
2015/12/03 职场文书
教你使用Jenkins集成Harbor自动发布镜像
2022/04/03 Servers