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)
这样我们在其他组件中应用公共组件时候直接引入就行了