这两天在看前任的后台管理系统,看到layout布局的时候,有点不是很明白,为什么他这里可以直接同时加载多个组件,即下面的一段代码,不是很理解是怎么实现的.就想着要不自己去单独写一个,看看是怎么实现的.

import { Navbar, Sidebar, Appmain } from './components'

结果按照别人的这种写法,一直报错

这是我自己写的目录结构,后来在对比的时候,发现我少了一个index.js,我就把文件复制到自己的项目中来,发现不报错,显示正常了,然后就去网上百度了下,原来这个index.js的作用就是用来加载componts文件夹的,import { Navbar, Sidebar, Appmain } from './components'这段代码,会判断你components文件下是否有json文件,js文件,vue文件,他们的加载顺序是json>js>.vue,利用components文件夹下面的index.js实现组件引入

export { default as Navbar } from './Navbar'
export { default as Sidebar } from './Sidebar'
export { default as Appmain } from './Appmain'

更多的时候我们使用的是下面这样的方式引入组件

import { page } from './components/page'

vue同个目录下使用import...from引入文件夹,使其下多个组件一起加载

在我们需要在一个文件中引入多个组件,就会像上面的方法一个一个的写,因为是在不同的文件夹引入不同的组件,所以必须一个一个写,但是会需要在一个页面中引入相同文件夹下的不同的组件,这时候我们就可以简化一下,直接引入该文件夹就可以了.比如我们的后台系统中的layout是会用到这个比较多的.

在layout.vue文件下直接使用

import { Navbar, Sidebar, Appmain } from './components'//Navbar, Sidebar, Appmain这三个组件都是在components下的,所以可以使用这种方式引入
	export default{
		name:'Layout',
		components:{
			Navbar,
			Sidebar,
			Appmain
		}
	}

仅仅只有上面的代码还是不够的,components文件夹下还缺少一个index.js文件,文件目录结构如下

index.js文件内容

export { default as Navbar } from './Navbar'
export { default as Sidebar } from './Sidebar'
export { default as Appmain } from './Appmain'

这样我们的layout.vue就能够正确使用上面的三个组件了.

写这篇文章之前,我对这个还不是很理解,是看了https://blog.csdn.net/fyyyr/article/details/83657828这篇文章,才明白他的大意.