Vue 自定义全局UI组件

<template>
  <div class="custom-view">自定义UI组件详情</div>
</template>
<script>
export default {
  // 这里可以添加 name 字段，到时候在 index.js 文件里面导入的时候可以直接导入插件名称即可
  // name: 'custom'
}
</script>
<style scoped>
.custom-view {
  width: 100px;
  height: 100px;
  background-color: red;
}
</style>

// 导入自定义组件
import CustomView from './custom.vue'
// ...... 可以导入更多自定义组件
const Custom = {
  // 主要是这个方法
  install: function (Vue) {
    Vue.component('Custom', CustomView)
    // Vue.component(CustomView.name, CustomView)
    // 如果存在多个自定义组件，直接头部多次 import 进来，然后这里多次导入
    // Vue.component('More', More)
  }
}
export default Custom

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 通过 Vue.use() 导入即可，看文件链接 './custom' 默认会读取里面的 index.js
// 推荐文件夹里面自带 index.js 文件
import Custom from './custom'
Vue.use(Custom)
// 如果 custom 文件假里面没有 index.js 这个名字的文件
// 则需要手动补全，比如我将文件里面的 index.js 改成 index1.js，则需要这样导入
// import Custom from './custom/index1'
// Vue.use(Custom)
Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

<template>
  <custom></custom>
</template>
<script>
export default {
}
</script>
<style>
</style>