Vue 中如何正确引入第三方模块的方法步骤
方法一：配置webpackProvidePlugin全局引入
假设要使用到jquery，那么可以通过配置webpack的ProvidePlugin的插件来全局引入：
https://webpack.js.org/plugins/provide-plugin/
newwebpack.ProvidePlugin({
$:'jquery',
jQuery:'jquery'
})
方法二：包装成插件在Vue中调用use方法安装
另外一种比较靠谱的方法是将第三方模块打包成插件，如我需要全局使用echarts，那么在src目录下新建一个lib，并创建名为echarts.js的文件：
importechartsfrom'echarts'
exportdefault{
install(Vue){
Object.defineProperty(Vue.prototype,'$echarts',{
value:echarts
})
}
}
上述代码export一个对象，对象包含一个install方法，该方法的参数是Vue构造函数，我们使用Object.defineProperty或Reflect的方法将$echarts定义到Vue.prototype中去。
然后在项目中使用：
importechartsfrom'./lib/echarts'
Vue.use(echarts)//use
newVue({
//...
}).$mount('#app')
这样就可以在vue实例中通过$echarts来使用
//... letmyChart=this.$echarts.init(this.$refs.main) //...
其他方法
其他还有在window对象中全局定义；或使用Vue.prototype.xxx=xxx等，都存在各样问题，如window会导致全局作用域污染；后者定义方式不可靠，比方说echarts模块太大，会经常出现扩展定义失败导致的报错
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。