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

 更新时间:2019年05月05日 09:11:38   作者:JS菌  
这篇文章主要介绍了Vue 中如何正确引入第三方模块的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

方法一:配置 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 模块太大,会经常出现扩展定义失败导致的报错

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

相关文章

  • vue3.x项目降级到vue2.7的解决方案

    vue3.x项目降级到vue2.7的解决方案

    Vue2.7是Vue2.x的最终次要版本,下面这篇文章主要给大家介绍了关于vue3.x项目降级到vue2.7的解决方案,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • vue-cli的webpack模板项目配置文件分析

    vue-cli的webpack模板项目配置文件分析

    本篇文章主要对vue-cli的webpack模板项目配置文件进行分析。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • 详解vuex 中的 state 在组件中如何监听

    详解vuex 中的 state 在组件中如何监听

    本篇文章主要介绍了详解vuex 中的 state 在组件中如何监听,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • Vue实现PopupWindow组件详解

    Vue实现PopupWindow组件详解

    这篇文章主要为大家详细介绍了Vue实现PopupWindow组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-04-04
  • vue解决使用$http获取数据时报错的问题

    vue解决使用$http获取数据时报错的问题

    今天小编就为大家分享一篇vue解决使用$http获取数据时报错的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • 详解vue配置后台接口方式

    详解vue配置后台接口方式

    这篇文章主要介绍了vue配置后台接口方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • vue实现引入本地json的方法分析

    vue实现引入本地json的方法分析

    这篇文章主要介绍了vue实现引入本地json的方法,结合实例形式分析了vue.js加载本地json文件及解析json数据相关操作技巧,需要的朋友可以参考下
    2018-07-07
  • VUE中常用的4种高级方法

    VUE中常用的4种高级方法

    provide/inject 是 Vue.js 中用于跨组件传递数据的一种高级技术,它可以将数据注入到一个组件中,然后让它的所有子孙组件都可以访问到这个数据,这篇文章主要介绍了VUE中常用的4种高级方法,需要的朋友可以参考下
    2023-05-05
  • Vue前端书写规范大全(非常详细!)

    Vue前端书写规范大全(非常详细!)

    在团体开发项目中,为了团队所有成员书写可维护的代码,而不是一次性的代码,让团队当中其他人看你的代码能一目了然,下面这篇文章主要给大家介绍了关于Vue前端书写规范的相关资料,需要的朋友可以参考下
    2023-01-01
  • vue实现带自动吸附功能的悬浮球

    vue实现带自动吸附功能的悬浮球

    这篇文章主要为大家详细介绍了vue实现带自动吸附功能的悬浮球,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04

最新评论