一、在当前Vue项目中任意位置建一个组件文件夹
custom.vue：是自定义的组件UI，文件名随意，可以多个index.js：文件名推荐固定写法，后期只需要链接到文件夹，默认读取 index.js 文件custom.vue ：
<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>index.js :
// 导入自定义组件 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二、main.js 导入刚才自定义的组件
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')三、进行使用这个导入的全局组件
任意找一个可显示页面直接使用 <custom></custom> 组件 <template> <custom></custom> </template> <script> export default { } </script> <style> </style>自定义全局组件到这来就完成了！！！
