创建全局组件

先创建如下目录结构

1.在mian.vue中，创建组件模板

<template>
  <div class="test-card">
    <!-- @：表示从根路径到src， -->
    <img src="@/assets/logo.png" alt="图片">
    <img src="../../../assets/logo.png" alt="图片">
    <img :src="getSrc(src)" alt="图片">
    <!-- 普通插槽 -->
    <slot></slot>
    <!-- 具名插槽 -->
    <slot name="test"></slot>
  </div>
</template>
<script>
export default {
  // 给组件一个名字
  name:'test-card',
  props:{
    src:{
      type:String,
      default:""
    }
  },
  data(){
    return {
      newSrc:''
    }
  },
  methods:{
    getSrc(src){
      // 这里要使用require去引入，否则'@/assets/'这个不会被解析，会议原来的字符串内容显示
      return require('@/assets/'+src);
    }
  }
}
</script>
<style>
</style>

2.index.js

通过index.js将组件模板注册，并导出

import card from "./src/main.vue"
// 给card添加一个新的install方法，将Vue作为参数传入
// 通过这个方法执行Vue.component(card.name,card)，将card注册为全局组件
// Vue.component 参数1--组件名（在对应的main.vue中对应的name属性）  参数2--组件内容（组件本身）
card.install = function(Vue) {
  Vue.component(card.name,card)
}
// 导出组件
export default card;
// 导出组件后再最外层的main.js文件中注册组件（全局组件），就可以使用了
// 注册方式和注册第三方组件库一样，先引入组件，再通过Vue.use（引入组件名）.就可以注册成功

3.注册全局组件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 注册自定义全局组件
// 注册方式和下面的组件库一样
import card from './components/card/index';
Vue.use(card)
// 引入ui库
import Antd from 'ant-design-vue';
// 引入ui库的样式
import 'ant-design-vue/dist/antd.css';
Vue.config.productionTip = false
// 将Antd注册成组件
Vue.use(Antd)
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

4.使用

<template>
  <div class="user-manage">
        <a-layout-content
          :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }"
        >
          <div>content</div>
          <!-- 使用自定义组件时要通过name的值来作为组件名 -->
          <test-card src= "logo.png">
            <!-- 使用普通插槽 -->
            <div class="slots100">普通插槽</div>
            <!-- 使用具名插槽 -->
            <!-- 必须使用 template #具名插槽名 的形式才可以-->
            <template #test>具名插槽</template>
          </test-card>
        </a-layout-content>
  </div>
</template>
<script>
export default {
}
</script>
<style>
</style>