亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue 中如何正確引入第三方模塊的方法步驟

 更新時(shí)間：2019年05月05日 09:11:38   作者：JS菌  
這篇文章主要介紹了Vue 中如何正確引入第三方模塊的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

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

假設(shè)要使用到 jquery，那么可以通過(guò)配置 webpack 的 ProvidePlugin 的插件來(lái)全局引入：

https://webpack.js.org/plugins/provide-plugin/

new webpack.ProvidePlugin({
 $: 'jquery',
 jQuery: 'jquery'
})

方法二：包裝成插件在 Vue 中調(diào)用 use 方法安裝

另外一種比較靠譜的方法是將第三方模塊打包成插件，如我需要全局使用 echarts，那么在 src 目錄下新建一個(gè) lib，并創(chuàng)建名為 echarts.js 的文件：

import echarts from 'echarts'

export default {
 install (Vue) {
  Object.defineProperty(Vue.prototype, '$echarts', {
   value: echarts
  })
 }
}

上述代碼 export 一個(gè)對(duì)象，對(duì)象包含一個(gè) install 方法，該方法的參數(shù)是 Vue 構(gòu)造函數(shù)，我們使用 Object.defineProperty 或 Reflect 的方法將 $echarts 定義到 Vue.prototype 中去。

然后在項(xiàng)目中使用：

import echarts from './lib/echarts'

Vue.use(echarts) // use

new Vue({
  // ...
}).$mount('#app')

這樣就可以在 vue 實(shí)例中通過(guò) $echarts 來(lái)使用

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

其他方法

其他還有在 window 對(duì)象中全局定義；或使用 Vue.prototype.xxx = xxx 等，都存在各樣問(wèn)題，如 window 會(huì)導(dǎo)致全局作用域污染；后者定義方式不可靠，比方說(shuō) echarts 模塊太大，會(huì)經(jīng)常出現(xiàn)擴(kuò)展定義失敗導(dǎo)致的報(bào)錯(cuò)

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論