溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
方法一：配置 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) // use
new Vue({
// ...
}).$mount('#app')
這樣就可以在 vue 實例中通過 $echarts 來使用
// ... let myChart = this.$echarts.init(this.$refs.main) // ...
其他方法
其他還有在 window 對象中全局定義；或使用 Vue.prototype.xxx = xxx 等，都存在各樣問題，如 window 會導致全局作用域污染；后者定義方式不可靠，比方說 echarts 模塊太大，會經常出現擴展定義失敗導致的報錯
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
