按照官方文檔直接復(fù)制過(guò)來(lái),發(fā)現(xiàn)head和aside、main、foot在同一行
問(wèn)題排查
查了下官網(wǎng)的文檔,發(fā)現(xiàn)這樣一項(xiàng)說(shuō)明

微信截圖_20191020111230.png
分析原因是:將head、aside、main、foot封裝成了獨(dú)立組件,封裝成組件后,el-container中沒(méi)有了el-footer和el-header,導(dǎo)致子元素排列方向默認(rèn)為horizontal
問(wèn)題解決
在el-container上增加 direction="vertical"屬性