浅谈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