1.在 main.js 中
// 挂载全局组件
import plugin from '@/components'
Vue.use(plugin)
2. 在 components文件下 index.js中
// 作用 : 在 components文件下创建的 .vue 文件会自动注册
// 注册公共组件,在main.js里面引用
export default {
install(Vue) {
// const requireComponent = require.context(文件路径，是否深层次查找Bool，正则 .vue)
const requireComponent = require.context('./', true, /\.vue$/)
requireComponent.keys().forEach(item => {
const moduleObj = requireComponent(item).default
Vue.component(moduleObj.name, moduleObj)
})
}
}
3. 注意:
在 components文件下的 Header 公共组件里面要配置 name
<template>
<div>
<h1>我是公共组件</h1>
</div>
</template>
<script>
export default {
name: 'Header',
data() {
return {
}
},
}
</script>
4. 在业务组件中使用公共组件
<template>
<div>
<Header /> //直接使用
</div>
</template>
<script>
// import Header from '@/components/Header/index.vue'
export default {
name: '',
// components: { Header },
data() {
return {}
}
}
</script>
