在上边的代码中，继续用openlayers封装一个组件MapView实现高德地图的加载，并在el-main使用

当然，我可以帮您继续用 OpenLayers 封装一个 `MapView` 组件来实现高德地图的加载，并在 `el-main` 中使用。

首先，确保您已经安装了 OpenLayers 和相关依赖。然后，按照以下步骤进行操作：

1. 在项目中安装 OpenLayers：

npm install ol --save

2. 创建一个名为 `MapView.vue` 的组件文件，并将以下代码添加到文件中：

<template>
  <div ref="mapContainer" class="map-container"></div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { Map, View } from 'ol'
import { Tile as TileLayer } from 'ol/layer'
import { XYZ as XYZSource } from 'ol/source'

export default {
  name: 'MapView',
  setup() {
    const mapContainer = ref(null)
    
    onMounted(() => {
      const map = new Map({
        target: mapContainer.value,
        layers: [
          new TileLayer({
            source: new XYZSource({
              url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
            })
          })
        ],
        view: new View({
          center: [0, 0],
          zoom: 2
        })
      })
    })

    return {
      mapContainer
    }
  }
}
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 100%;
}
</style>

3. 在 `App.vue` 文件中引入并使用 `MapView` 组件：

<template>
  <el-container style="height: 100vh;">
    <el-header>
      <h1 style="color: white; text-align: center;">Header</h1>
    </el-header>
    <el-main>
      <MapView />
    </el-main>
    <el-footer>
      <p style="text-align: center;">Footer</p>
    </el-footer>
  </el-container>
</template>

<script>
import MapView from './MapView.vue'

export default {
  name: 'App',
  components: {
    MapView
  }
}
</script>

<style>
body {
  margin: 0;
  padding: 0;
}
</style>

现在，当您运行应用程序时，您将在 `el-main` 区域中看到一个加载了高德地图的 OpenLayers 地图。您可以根据自己的需求进一步调整地图的样式和行为。

请注意，这里只是一个简单的示例，为了演示方便，我们使用了高德地图的瓦片服务作为地图源。如果您要在生产环境中使用，请确保遵守相关服务协议。

祝您使用 Vite + Vue 3 + Element Plus + OpenLayers 进行开发成功！如果您有任何其他问题，请随时提问。