方法一：配置 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) // usenew Vue({  // ...}).$mount('#app')

這樣就可以在 vue 實例中通過 $echarts 來使用

// ...let myChart = this.$echarts.init(this.$refs.main)// ...

其他方法

其他還有在 window 對象中全局定義；或使用 Vue.prototype.xxx = xxx 等，都存在各樣問題，如 window 會導致全局作用域污染；后者定義方式不可靠，比方說 echarts 模塊太大，會經常出現擴展定義失敗導致的報錯

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。