Vue中一次性引入高频组件

在项目中，有一个组件我们常常使用它，那么我们就在需要的组件中引入它，这样就导致每个组件需要它就必须import一次 所以，我们想个办法做到只需要引入一次，然后每个组件就可以直接使用它了。

解决思路：创建一个文件夹，里面装的全是高频组件，创建index.js，在index.js注册一次性引入高频组件的插件，然后在main.js中注册插件(vue.use(index))

index.js代码如下：

<!--通过webpack的api去引入-->
<!--require.context的三个参数：文件路径（放高频组件的文件路径），是否匹配子目录，查找什么样的文件 以下：查找以vue结尾的文件-->
function changStr() {
	return str.charAt(0).toUpperCase() + str.slice(1)
}
const requireComponent = require.context('./', false, /\.vue$/);//得到放高频组件文件夹下各个组件的路径 './child1.vue'，'./child2.vue'
const install = (Vue) {
	// requireComponent.keys()拿到当前文件夹下以vue结尾的文件名
	requireComponent.keys().forEach(filename => {
		// config就是对应filename的组件的配置 组件名，组件的方法，data,render等
		let config = requireComponent(filename)
		let componentName = changStr(
			filename.replace(/^\.\//, '').replace(/\.\w+$/, '')) //filename是./child.vue 只需要child
		//注册组件 config.default就是组件里面export defaul里的内容
		Vue.component(componentName, config.default || config)
	})
}
export default {
	install
}

这样就在需要的时候直接用，无需调用一次引用一次（不需要import组件，再在component下注册组件）