在Vue项目中使用全局组件

在Vue项目中使用全局组件

1. 在 @/components/common创建两个组件

   Logo.vue

   MyIcon.vue

2. 在@/components/common中创建index.js

import Logo from './Logo.vue'
import MyIcon from './MyIcon.vue'

const components = {
    install(Vue){
        Vue.component("Logo",Logo)
        Vue.component("MyIcon",MyIcon)
    }
}
export default components

3. 在main.js中加入代码

//引入全局组件
import Components from '@/components/common'
Vue.use(Components)

4. 在任意一个组件中直接使用这两个全局组件

<template>
  <div class="home">
    <my-icon></my-icon>
    <logo></logo>
   </div>
</template>