<template> <div> <el-container> <el-aside width="200px"> <common-aside/> </el-aside> <el-container> <el-header> <common-header/> </el-header> <el-main> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </el-main> </el-container> </el-container> </div> </template> <script> import CommonAside from '../components/CommonAside.vue' import CommonHeader from '../components/CommonHeader.vue' export default{ data(){ return{} }, components:{ CommonAside, CommonHeader, } } </script>为什么不能正确引入Commonheader

根据你提供的代码，你在脚本部分正确引入了CommonHeader组件。但是，要确保CommonHeader组件的路径是正确的。请确保CommonHeader组件的文件路径和文件名与你在脚本中引入的路径一致。

如果CommonHeader组件的路径是正确的，但仍无法正确引入，请检查CommonHeader组件是否已正确导出。你可以在CommonHeader.vue文件中确认是否使用了`export default`导出组件。

另外，还需要确保你已经安装了`element-ui`库，因为你的代码中使用了`el-container`、`el-header`和`el-main`等元素，这些元素是Element UI提供的组件。如果没有安装该库，请先执行`npm install element-ui`来安装它。

如果问题仍然存在，请提供更多的错误信息或代码上下文，以便更好地帮助你解决问题。

相关问题

<template> <div> <tmenu></tmenu> <el-container> <el-container> <el-aside width="200px"><library-in></library-in></el-aside> <el-main><router-view></router-view></el-main> </el-container> </el-container> </div> </template>

这是一个 Vue.js 的模板代码，其中包含了一个 tmenu 组件和一个 el-container 容器，容器里面包含了一个 el-aside 侧边栏和一个 el-main 主要内容区域，主要内容区域里面使用了 router-view 来渲染路由对应的组件。同时还包含了 library-in 组件。这段代码的作用是渲染一个具有侧边栏和主要内容区域的页面，可以根据路由动态切换主要内容区域的组件。

<el-container> <el-header>Header</el-header> <el-container> <el-aside width="200px">Aside</el-aside> <el-main>Main</el-main> </el-container> </el-container>怎么实现主体部分高度自适应

在这个嵌套的 `el-container` 中，主体部分是 `el-main`，如果需要让 `el-main` 部分高度自适应，可以通过设置 `flex` 属性来实现。

具体步骤如下：

1. 给最外层的 `el-container` 设置样式，让其占满整个页面：

.el-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

这样就使得 `el-container` 占满了整个视口，并且使用了 `flex` 布局。

2. 给 `el-main` 设置 `flex` 属性，并设置 `overflow-y: auto` 让其溢出时出现纵向滚动条：

.el-main {
  flex: 1;
  overflow-y: auto;
}

这样就能让 `el-main` 部分高度自适应，并且出现滚动条。

最终的代码如下：

<el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-main class="main-content">Main</el-main>
  </el-container>
</el-container>

.el-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.el-main {
  flex: 1;
  overflow-y: auto;
}

这样就实现了 `el-main` 部分高度自适应的效果。