首先咱们在vue的应用中，免不了会本人自定义组件，那么咱们每次定义好组件都会先import 进来，而后在components外面引入能力用
复现以下场景
import BaseButton from './baseButton'import BaseIcon from './baseIcon'import BaseInput from './baseInput'export default { components: { BaseButton, BaseIcon, BaseInput }}<BaseInput v-model="searchText" @keydown.enter="search"/><BaseButton @click="search"> <BaseIcon name="search"/></BaseButton>咱们平时是不是都是这么写？集体感觉太麻烦了，秉持着能偷懒就偷懒的准则，咱就配置一次，再也不必import引入就间接能用多好啊，好消息，好消息！是能够实现的：
咱们须要借助一下神器webpack，应用 require.context() 办法来创立本人的（模块）上下文，从而实现主动动静require组件。这个办法须要3个参数：要搜寻的文件夹目录，是否还应该搜寻它的子目录，以及一个匹配文件的正则表达式。
咱们在components文件夹增加一个叫global.js的文件，在这个文件里借助webpack动静将须要的根底组件通通打包进来。
当然了要依据不同的目录构造进行不同的解决
如果你是这样的目录构造
那么 global.js 就能够这么写
import Vue from 'vue'function capitalizeFirstLetter(string) { return string.charAt(0).toUpperCase() + string.slice(1)}const requireComponent = require.context( '.', false, /\.vue$/ //找到components文件夹下以.vue命名的文件)requireComponent.keys().forEach(fileName => { const componentConfig = requireComponent(fileName) const componentName = capitalizeFirstLetter( fileName.replace(/^\.\//, '').replace(/\.\w+$/, '') //因为失去的filename格局是: './dataList.vue', 所以这里咱们去掉头和尾，只保留真正的文件名 ) Vue.component(componentName, componentConfig.default || componentConfig)})如果你是以上的目录构造，以上代码就能够满足你了
然而我不是这样的目录构造，我喜爱一个组件放在一个文件夹里，而且js和scss都离开来写，就像这样：
这样的话，就须要改变一下以上的代码，废话不都说，上代码
import Vue from 'vue';function capitalizeFirstLetter(string){ return string.charAt(0).toUpperCase() + string.slice(1);}const requireComponent = require.context( '.',true,/\.vue$/ //找到components文件夹下以.vue命名的文件)requireComponent.keys().forEach(fileName => { const componetConfig = requireComponent(fileName); let a = fileName.lastIndexOf('/'); fileName = '.' + fileName.slice(a); const componetName = capitalizeFirstLetter( fileName.replace(/^\.\//,'').replace(/\.\w+$/,'') ) Vue.component(componetName,componetConfig.default || componetConfig)})总之，global.js建好当前，最初咱们在main.js中import ‘./components/global.js’，而后咱们就能够随时随地应用这些根底组件，无需手动引入了。
而后咱们看下成果
首先我说好了，js并没有任何import，也没有components选项，间接在vue文件中应用组件
最初成果在这里