Method 1: Configure webpack ProvidePlugin global introduction
Assuming that you want to use jquery, you can introduce it globally by configuring webpack's ProvidePlugin plugin:
/plugins/provide-plugin/
new ({
$: 'jquery',
jQuery: 'jquery'
})
Method 2: Package it into a plug-in and call the use method to install it in Vue
Another reliable method is to package the third-party module into a plug-in. If I need to use echarts globally, then create a new lib in the src directory and create a file named :
import echarts from 'echarts'
export default {
install (Vue) {
(, '$echarts', {
value: echarts
})
}
}
The above code exports an object, the object contains an install method, and the parameters of this method are the Vue constructor. We use the method or Reflect to define $echarts into .
Then use it in the project:
import echarts from './lib/echarts'
(echarts) // use
new Vue({
// ...
}).$mount('#app')
This allows you to use $echarts in vue instances
// ... let myChart = this.$(this.$) // ...
Other methods
Others also have global definitions in window objects; or using = xxx, etc., all of which have various problems, such as window will cause global scope pollution; the latter definition method is unreliable. For example, if the echarts module is too large, there will often be errors caused by failure in extension definition.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.