vue全局组件自动加载注册（重点）

全局组件自动加载注册（重点）

官方文档

在src / components / 新建global文件夹；（这个路径与components/index.js中的配置保存一致）

第一步：global / test.vue（测试使用）

第二步：在需要的页面以标签的形式使用即可。<base-test></base-test>

<template>
<div class="create">
this is a test
</div>
</template>

<script>

export default {
// 必须有name属性
name: 'baseTest',
methods: {

}
}
</script>

<style>

</style>

第三步：在components / 新建index.js

import Vue from 'vue'

const requireComponent = require.context(
// 全局组件自动加载注册：在components / 新建global文件夹（放置全局组件）
'./global',
// 是否查询其子目录
true,
// 匹配基础组件文件名的正则表达式
/\.vue$/
)

requireComponent.keys().forEach(fileName => {
// 获取组件配置
const componentConfig = requireComponent(fileName)


// 全局注册组件
Vue.component(
// 如果这个组件选项是通过 `export default` 导出的，
// 那么就会优先使用 `.default`，
// 否则回退到使用模块的根。
componentConfig.default.name || componentConfig.name,
componentConfig.default || componentConfig
)
})

第四步：在main.js中引入

// 引入全局组件自动加载注册
import './components/index'