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

第三方模块

5星 · 超过95%的资源 191 浏览量更新于2023-03-16 收藏 41KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

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

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

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

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

weixin_38621870

粉丝: 7
资源: 936

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈