components 文件夹

存放通用的、可复用的组件；

通常用于构建页面中的具体功能模块。在项目中多次使用，并且不依赖于具体的业务逻辑。

比如：导航栏组件 navbar.vue

layouts 文件夹

存放页面的整体布局组件

default.vue

<script setup lang="ts">
</script>

<!-- 默认layout，会应用到每个页面 -->
<template>
  <div>
    <!-- 导航栏 -->
    <navbar />

    <!-- 页面内容 -->
    <div class="p-2 pb-28">
      <router-view :key="$route.fullPath" />
    </div>

    <!-- 底部版权栏 -->
    <bottom />
  </div>
</template>

此default.vue布局组件定义了页面的整体布局结构，包括头部导航和底部版权信息。此组件作为页面的框架，为每个页面提供一致的整体布局样式。

pages 文件夹

存放具体的页面组件

每个页面组件对应着一个具体页面，通常包含特定页面的业务逻辑和交互功能。页面组件可以通过路由进行访问和导航，每个页面组件对应着一个或多个路由路径。例如，首页、用户个人资料页、商品详情页等都可以作为页面组件存放在这个文件夹下。