当前位置:主页 > vue.js教程 > Vue 中如何正确引入第三方模块的方法步骤

Vue 中正确引入第三方模块的具体操作

发布:2020-04-13 08:29:51 177


给大家整理一篇Vue相关的编程文章,网友车凯凯根据主题投稿了本篇教程内容,涉及到Vue、引入第三方模块、Vue、第三方模块、Vue 中如何正确引入第三方模块的方法步骤相关内容,已被113网友关注,内容中涉及的知识点可以在下方直接下载获取。

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

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


参考资料

相关文章

  • vue用Slot分发内容的实例分享

    发布:2020-04-04

    本篇文章主要介绍了vue如何使用 Slot 分发内容实例详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • vue打包后生成一个配置文件修改接口的实例内容

    发布:2019-12-16

    这篇文章主要介绍了vue打包之后生成一个配置文件修改接口 的相关资料,本文分步骤给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下


  • vue的keep-alive实例用法

    发布:2020-02-05

    在本篇文章里小编给大家整理的是关于vue的keep-alive用法技巧以及实例代码,需要的朋友们学习下。


  • vue实现滑动切换效果的实例代码

    发布:2020-02-01

    这篇文章主要为大家详细介绍了vue实现滑动切换效果,仅在手机模式下可用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


  • 快速解决vue动态绑定多个class的官方实例语法无效的问题

    发布:2022-06-23

    给大家整理一篇关于vue的教程,今天小编就为大家分享一篇快速解决vue动态绑定多个class的官方实例语法无效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧


  • Vue编译时写在style中的路径问题解决方案

    发布:2019-12-07

    下面小编就为大家带来一篇解决Vue编译时写在style中的路径问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • 小程序/mpvue中使用flyio发起网络请求的实例

    发布:2019-11-19

    这篇文章主要介绍了在小程序/mpvue中使用flyio发起网络请求的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • 揭秘vue-cli3全面配置

    发布:2020-03-11

    这篇文章主要介绍了vue-cli3全面配置详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


网友讨论