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 1.0.2
Oct 11 Javascript
JTrackBar水平拖动效果
Jul 15 Javascript
页面装载js及性能分析方法介绍
Mar 21 Javascript
js动态添加表格数据使用insertRow和insertCell实现
May 22 Javascript
Javascript图片上传前的本地预览实例
Jun 16 Javascript
JavaScript实现点击自动选择TextArea文本的方法
Jul 02 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
May 28 Javascript
vue调试工具vue-devtools安装及使用方法
Nov 07 Javascript
vue实现移动端悬浮窗效果
Dec 01 Javascript
Vue CLI3基础学习之pages构建多页应用
Jun 02 Javascript
JS表格的动态操作完整示例
Jan 13 Javascript
vue 查看dist文件里的结构(多种方式)
Jan 17 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入门学习知识点三 PHP上传
2011/07/14 PHP
仿Aspnetpager的一个PHP分页类代码 附源码下载
2012/10/08 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
php通过array_push()函数添加多个变量到数组末尾的方法
2015/03/18 PHP
php阳历转农历优化版
2016/08/08 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
YII框架页面缓存操作示例
2019/04/29 PHP
基于PHP实现发微博动态代码实例
2020/12/11 PHP
JS可以控制样式的名称写法一览
2014/01/16 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
jQuery+css实现的切换图片功能代码
2016/01/27 Javascript
原生JavaScrpit中异步请求Ajax实现方法
2017/11/03 Javascript
p5.js临摹动态图形实现方法详解
2019/10/23 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
python中的reduce内建函数使用方法指南
2014/08/31 Python
浅谈Python中用datetime包进行对时间的一些操作
2016/06/23 Python
使用python对文件中的单词进行提取的方法示例
2018/12/21 Python
python pyinstaller 加载ui路径方法
2019/06/10 Python
python SVM 线性分类模型的实现
2019/07/19 Python
Python实现基于socket的udp传输与接收功能详解
2019/11/15 Python
详解从Django Allauth中进行登录改造小结
2019/12/18 Python
浅谈tensorflow模型保存为pb的各种姿势
2020/05/25 Python
实例讲解Python 迭代器与生成器
2020/07/08 Python
pycharm全局搜索的具体步骤
2020/07/28 Python
Python 用__new__方法实现单例的操作
2020/12/11 Python
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
英国女性时尚品牌:Apricot
2018/12/04 全球购物
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
美国滑板店:Tactics
2020/11/08 全球购物
个人评语大全
2014/05/04 职场文书
抗洪救灾先进集体事迹材料
2014/05/26 职场文书
大学生各类奖学金申请书
2019/06/24 职场文书
浅谈Python数学建模之数据导入
2021/06/23 Python
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫
MySQL远程无法连接的一些常见原因总结
2022/09/23 MySQL