Vue 自定义全局UI组件

• 在Vue开发中经常使用第三方插件，通过在 main.js 文件中 使用 Vue.use() 导入后就可以随意在任何 vue 页面进行使用这个组件，那么如果自己做一个呢？

一、在当前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>

自定义全局组件到这来就完成了！！！

---

其他扩展资料

• Vue 全局导入 JS 文件使用
• npm 上传发布自定义组件以及使用详细流程(Vue包含)