Vue 3 + Element Plus实现PC和移动端兼容的技术探讨

<template>
  <el-container class="app-container">
    <!-- 头部区域 -->
    <el-header>
      <!-- 导航菜单 -->
      <el-menu :default-active="onRoutes" mode="horizontal" theme="dark" active-text-color="#ffd04b">
        <!-- 菜单项 -->
        <el-menu-item index="home">首页</el-menu-item>
        <el-menu-item index="about">关于我们</el-menu-item>
        <!-- 更多菜单项... -->
      </el-menu>
    </el-header>

    <!-- 主体区域 -->
    <el-main>
      <!-- 路由视图 -->
      <router-view></router-view>
    </el-main>

    <!-- 底部区域 -->
    <el-footer>
      <div class="footer-content">
        版权所有 © 2023 我们的公司
        <!-- 更多版权信息... -->
      </div>
    </el-footer>
  </el-container>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';

// 使用组合式API定义响应式数据
const onRoutes = ref('home');
const route = useRoute();

// 挂载时设置默认激活的菜单项
onMounted(() => {
  onRoutes.value = route.path.split('/')[1] || 'home';
});
</script>

<style scoped>
.app-container {
  min-height: 100vh;
}
.footer-content {
  text-align: center;
  padding: 20px 0;
}
</style>