- 在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>
自定义全局组件到这来就完成了!!!