假设要使用到 jquery,那么能够经过配置 webpack 的 ProvidePlugin 的插件来全局引入:vue
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
复制代码
另一种比较靠谱的方法是将第三方模块打包成插件,如我须要全局使用 echarts,那么在 src 目录下新建一个 lib,并建立名为 echarts.js 的文件:webpack
import echarts from 'echarts'
export default {
install (Vue) {
Object.defineProperty(Vue.prototype, '$echarts', {
value: echarts
})
}
}
复制代码
上述代码 export 一个对象,对象包含一个 install 方法,该方法的参数是 Vue 构造函数,咱们使用 Object.defineProperty 或 Reflect 的方法将 $echarts
定义到 Vue.prototype 中去。web
而后在项目中使用:app
import echarts from './lib/echarts'
Vue.use(echarts) // use
new Vue({
// ...
}).$mount('#app')
复制代码
这样就能够在 vue 实例中经过 $echarts
来使用echarts
// ...
let myChart = this.$echarts.init(this.$refs.main)
// ...
复制代码
其余还有在 window
对象中全局定义;或使用 Vue.prototype.xxx = xxx
等,都存在各样问题,如 window 会致使全局做用域污染;后者定义方式不可靠,比方说 echarts 模块太大,会常常出现扩展定义失败致使的报错ide
请关注个人订阅号,不按期推送有关 JS 的技术文章,只谈技术不谈八卦 😊函数