首先，在vue的使用中，我们难免会自定义自己的组件。那么我们每次定义一个组件，都会先导入，然后在components中导入，重现下面的场景。从'./baseButton'导入BaseButton从'./baseIcon'导入BaseIcon从'./baseInput'导入BaseInput导出默认值{组件：{BaseButton，BaseIcon，BaseInput}}我们平时是不是这样写的？个人觉得太麻烦了。秉承能偷懒就偷懒的原则，配置一次吧，不用引入，直接使用。好消息，好消息！是可以实现的：我们需要使用神器webpack，使用require.context()方法创建自己的（模块）context，实现自动动态require组件。该方法有3个参数：要搜索的文件夹目录、是否也搜索其子目录、匹配文件的正则表达式。我们在components文件夹下添加一个名为global.js的文件，使用webpack将所有需要的基础组件动态打包到这个文件中。当然需要根据不同的目录结构做不同的处理。如果你有这样的目录结构，那么global.js可以写importVuefrom'vue'functioncapitalizeFirstLetter(string){returnstring.charAt(0).toUpperCase()+string.slice(1)}constrequireComponent=require.context('.',false,/\.vue$///在components文件夹下找到名为.vue的文件)requireComponent.keys().forEach(fileName=>{constcomponentConfig=requireComponent(fileName)constcomponentName=capitalizeFirstLetter(fileName.replace(/^\.\//,'').replace(/\.\w+$/,'')//因为得到的文件名格式为：'./dataList.vue'，所以这里我们去掉头尾，只保留真实的文件名)Vue.component(componentName,componentConfig.default||componentConfig)})如果你是上面的目录结构，上面的代码可以满足你，但我不没有这样的目录结构。我喜欢把一个组件放在一个文件夹里，把js和scss分开写，像这样：这样的话，就需要改一下上面的代码，废话不多说，上面的代码importVuefrom'vue';functioncapitalizeFirstLetter(string){returnstring.charAt(0).toUpperCase()+string.slice(1);}constrequireComponent=require.context('.',true,/\.vue$///查找文件在components文件夹下命名为.vue)requireComponent.keys().forEach(fileName=>{constcomponetConfig=requireComponent(fileName);leta=fileName.lastIndexOf('/');文件名='.'+文件名.slice(a);constcomponetName=capitalizeFirstLetter(fileName.replace(/^\.\//,'').replace(/\.\w+$/,''))Vue.component(componetName,componetConfig.default||componetConfig)})总之，在global.js构建完成后，我们最后在.js中导入'./components/global.js'，这样我们就可以随时随地使用这些基础组件了，无需手动引入，我们来看看效果吧。首先我说是的，js没有任何import，也没有components选项，直接在vue文件中使用component，最后的效果在这里
