淺談vue中插件的使用方法Vue.use(xxx),原理及實現

 

使用vue的過程中，可能會把某個組件封裝起來，供其他頁面有相同的需求時可以直接導入使用，不需要再重寫一遍，提高效率，避免代碼冗余

平時我們會如何使用ui組件庫的呢？

以ElementUI為例：

1.安裝

npm i element-ui -S

2.導入，app.use()注冊

 

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

 

 

那 Vue.use(xxx),背后到底為我們做了些什么工作呢？

回憶一下組件的封裝過程：

這里以封裝button組件為例

1.在components下新建一個button.vue文件

 

<template>
     <div>
          我是button 
    </div>
</template>

<script>
export default {
   name:"xx-button"
}
</script>

<style>
</style>

2.main.js中導入並注冊組件

 

import Vue from 'vue'
import App from './App.vue'
import Button from './components/button.vue'
Vue.component(Button.name,Button)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

這樣就可以在全局中使用組件了

<template>
     <div>
        <xx-button> </xx-button>
    </div>
</template>

app.use()實現

vue文檔地址

同理想要使用ElementUI的組件，我們也需要注冊，而調用app.use(xxx)方法的時候，也是內部調用install方法注冊組件的時候
例子如下：
可以新建一個install.js文件，寫入如下代碼

// 統一導出
// 導入顏色選擇器組件
//假設這些都是ElementUI封裝好的組件
import Button from './button'
import Dialog from './dialog'
import Input from './input'
import Checkbox from './checkbox'
import Radio from './radio'
import RadioGroup from './radio-group'
import Switch from './switch'
import CheckboxGroup from './checkbox-group'
import Form from './form'
import FormItem from './form-item'
import './fonts/font.scss'

// 存儲組件列表
const components = [
  Button,
  Dialog,
  Input,
  Checkbox,
  Radio,
  RadioGroup,
  Switch,
  CheckboxGroup,
  Form,
  FormItem
]

// 定義 install 方法，接收 Vue 作為參數。如果使用 use 注冊插件，則所有的組件都將被注冊
const install = function (Vue) {
  // 遍歷注冊全局組件
  components.forEach(component => {
    Vue.component(component.name, component)
  })
}

// 判斷是否是直接引入文件,如果是，就不用調用 Vue.use()
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

// 導出的對象必須具有 install，才能被 Vue.use() 方法安裝
export default {
  install
}

在main.js中進行導入

調用use，會調用install.js中的install方法，逐個遍歷組件進行全局注冊

import Vue from 'vue'
import App from './App.vue'

import TestUI from '../packages'

//調用use，會調用install.js中的install方法，逐個遍歷組件進行全局注冊
Vue.use(TestUI)

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

這樣也就完成了對插件導入后，使用app.use()方法進行安裝的封裝了

 

 

轉 ： https://blog.csdn.net/fesfsefgs/article/details/105842489

 

https://www.cnblogs.com/ttjm/p/10394615.html