Vue中如何按步骤正确引入特定第三方模块？

本文共计526个文字，预计阅读时间需要3分钟。

方法一：配置webpack + ProvidePlugin + 全局引入 + 假设要使用到jquery，那么可以通过配置webpack的ProvidePlugin插件来实现全局引入：

通过配置webpack的ProvidePlugin插件，可以全局引入指定的模块，无需在代码中显式引入。

具体配置如下：

javascriptconst webpack=require('webpack');

module.exports={ // ... 其他配置项 plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }) ]};

更多关于ProvidePlugin的详细信息，请参考：[webpack.js.org/plugins/provide-plugin/](https://webpack.js.org/plugins/provide-plugin/)

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

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

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

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