常见组件的引入方式：通过import引入组件，并在页面的components中注册，才可以使用。
<template>
<Title title="Button 按钮"
des="基础组件，触发业务逻辑时使用。"/>
<Panel title="按钮类型"
des="使用 type 属性来定义 Button 的颜色风格。">
<div class="row">
<RButton>默认按钮</RButton>
</div>
</Panel>
</template>
<script>
import { defineComponent } from "vue";
import Panel from '../components/Panel';
import Title from '../components/Title';
export default {
name: "button-page",
components: {
Panel,
Title,
},
}
而类似ElementUI组件库，只需要在main.js中使用Vue.use(ElementUI)，即可在任意vue文件中不需要引入直接使用。他是怎么实现的呢？
首先，创建文件index.js,引入所有需要集体注册的组件，在install方法里遍历注册。
import Panel from './Panel';
import Title from './Title';
import Table from './Table';
const components = [
Panel,
Title,
Table,
]
const DocUI = {
install(Vue) { // install方法默认参数Vue
components.forEach(component => {
Vue.component(component.name, component)
})
}
}
export default DocUI;
然后，在main.js中引入并使用Vue.use(DocUI)，即可实现全局注册。
import Vue from "vue";
import DocUI from "./components";
Vue.use(DocUI);
这是因为Vue.use函数会默认调用其参数对象的install方法，这个方法名是固定的。
