2020-10-21 vue 自动注册组件

components文件夹下创建一个js文件，并放入以下代码！

import Vue from 'vue';

function changeStr(str) {

    return str.charAt(0).toUpperCase() + str.slice(1);

}

/**

 * context有三个参数

 * 第一个是跟目录

 * 第二个是false,代表是否使用下面的子目录，如果该目录下有子目录并且该子目录下有组件，则需要为ture

 * 第三个是一个正则,匹配文件

 */

const requireComponent = require.context('.', false, /\.vue$/ );

requireComponent.keys().forEach(fileName => {

    //./child1.vue

    const config = requireComponent(fileName);

    //取组件名

    const componentName = changeStr(

        fileName.replace(/^\.\//, '').replace(/\.\w+$/,'')

    )

    Vue.component(componentName, config.default || config)

});

然后在main.js里引入。

import global from './components/global.js'

最后在页面中使用的时候，直接就可以使用，不需要引用注册了，非常方便。

注:文件名+首字母大写就是使用时的标签名字。