网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

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中如何正确引入第三方模块的方法步骤
网址分享:http://bjjierui.cn/article/ijgdcg.html

其他资讯