当前位置： 移动技术网 > IT编程>脚本编程>vue.js > Vue 中如何正确引入第三方模块的方法步骤

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

2019年07月20日  | 移动技术网IT编程  | 我要评论

张根锡快乐大本营,章子怡限制出境,波姬小丝10岁

方法一：配置 webpack provideplugin 全局引入

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


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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网