2021-04-11

vue项目中引入封装的公共组件

在我们的开发过程中，我们会封装一些公共的组件，如果高频使用的组件我们并不想每次都用import的方式引入，那我们就可以用vue的插件来完成，
我们先建了一个components的文件夹，将定义的vue文件放入其中，同时定义一个index.js文件，在index.js中，我们这么配置

//先用require.context的方法遍历目录下的所有vue文件
const modulesFiles =require.context('./',true,/\.vue$/)
const components= modulesFiles.keys().map(item=>modulesFiles(item).default)
const text={}
text.install=function(vue){
components.foreach(item=>{
vue.component(item.name,item)
})
}
export default text

然后在main.js中我们将暴露出来的text对象引入并使用

import  component from '@/components'
	Vue.use(component)

这样我们在其他组件中应用公共组件时候直接引入就行了