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>

这个简单的Vue 3 + Element Plus示例展示了如何使用Element Plus组件库创建一个具有头部、主体和底部区域的网站布局。代码中使用了<el-container>、<el-header>、<el-main>和<el-footer>组件来构建页面框架，并通过:default-active属性来设置当前激活的菜单项。同时，展示了如何使用Vue 3的<script setup>语法糖来编写组件，以及如何使用Vue Router来实现路由的响应式更新。这个示例代码为开发者提供了一个清晰的学习路径，并展示了如何将Element Plus库的组件和Vue的现代API相结合，以构建出适应PC和移动端的页面布局。