Vue2自定义组件自动注册全局（vue-cli）

目录

1、首先在components文件夹下创建两个文件夹

2、在auto文件夹下创建index.js和其他需要注册的组件

3、index.js写入组件注册索引逻辑

4、main.js引入auto文件夹的index.js文件

5、form文件夹index.vue配置我们的组件

6、验证

---

提供一个思路，可根据自己的实际情况进行调整

1、首先在components文件夹下创建auto文件夹

• auto用于放置需要自动注册的组件

2、在auto文件夹下创建index.js和其他需要注册的组件

• index.js用于组件注册相关的索引逻辑
• 其他文件夹则为组件

3、index.js写入组件注册索引逻辑

// 基础组件的自动化全局注册
import Vue from 'vue'
const requireComponent = require.context(
    // 其组件目录的相对路径
    './',
    // 是否查询其子目录
    true,
    // 匹配基础组件文件名的正则表达式
    /\.vue$/
)
requireComponent.keys().forEach(fileName => {
    // 获取组件配置
    const componentConfig = requireComponent(fileName)


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

4、main.js引入auto文件夹的index.js文件

• 此处我设置的alias别名，可根据自己的实际情况进行路由引入

5、form文件夹index.vue配置我们的组件

• 组件的name属性必填的且全局唯一

6、验证

    组件名：componentName = componentConfig.default.name, 

    取得是组件.vue文件的name属性，全局唯一