vue3+vite+js 实现移动端，PC端响应式布局

在Vue 3和Vite的组合中实现移动端和PC端的响应式布局，可以使用CSS的媒体查询来定义不同屏幕尺寸下的样式，并结合Vue的指令来动态调整DOM。

以下是一个简单的例子：

1. 安装Vue 3和Vite:

npm create vite@latest my-vue-app --template vue-ts
cd my-vue-app
npm install

2. 在src/App.vue中编写响应式布局的组件:

<template>
  <div class="container">
    <header>Header</header>
    <main>
      <aside>Side Content</aside>
      <article>Main Content</article>
    </main>
    <footer>Footer</footer>
  </div>
</template>
 
<script setup lang="ts">
// No script needed for basic layout
</script>
 
<style>
.container {
  display: flex;
  flex-direction: column;
}
 
header, footer {
  text-align: center;
  padding: 1rem 0;
}
 
main {
  display: flex;
  flex: 1;
}
 
aside {
  width: 200px; /* 固定宽度或百分比 */
  background-color: #f2f2f2;
}
 
article {
  flex: 1;
  background-color: #e2e2e2;
}
 
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
 
  main {
    flex-direction: column;
  }
 
  aside, article {
    width: 100%;
    max-width: 100%;
  }
}
</style>

在上述代码中，.container是一个flex容器，用于组织页面的结构。header和footer保持在页面顶部和底部，而main部分包含侧边栏和主内容。媒体查询@media (max-width: 768px)用于在屏幕宽度小于768像素时改变布局，使侧边栏和主内容在移动端上占据全部宽度。

在实际应用中，你可能需要使用Vue的指令来根据屏幕宽度动态切换布局（例如使用v-if或v-show来控制移动端和PC端的显示），但上述代码提供了一个响应式的基础布局示例。