第三节：目录结构重构（仿若依，优化层级，layout 与 components 同级）

第三节：目录结构重构（仿若依，优化层级，layout 与 components 同级）

原若依不合理点：layout 放在 components 内部；本次优化：layout 和 components 平级，拆分各类业务目录，为后续开发做准备。

最终 src 目录规划

src
├── api                # 接口请求
├── assets             # 静态资源：图片、全局css
├── components         # 全局公共小组件（和layout同级）
├── layout             # 后台主布局文件（侧边栏、头部、主内容）
├── mock               # 手写模拟数据，不引入mock插件
├── router             # 路由
├── stores             # pinia状态
├── utils              # 工具函数：axios封装、通用工具
├── views              # 业务页面
├── App.vue
└── main.js

终端快速创建文件夹（windows/mac 通用）

进入项目 src 目录执行下面，或者手动新建文件夹

# src下新建
mkdir api assets layout mock stores utils

删除第二节临时测试文件

1. 删除 src/views/TestEl.vue
2. 修改 src/router/index.js，把测试路由删掉，恢复最简路由

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    redirect: '/login'
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

新建占位文件，保证目录不为空（防止 git 忽略空文件夹）

1. src/api/index.js 空文件
2. src/mock/index.js 空文件
3. src/utils/index.js 空文件
4. src/layout/index.vue 临时占位

<template>
  <div>后台布局占位</div>
</template>
<script setup>
</script>

✅第三节测试

1. 项目目录结构和上面规划保持一致
2. 启动项目 pnpm dev
3. 浏览器访问，自动跳转 /login，404 属于预期，控制台无报错。

本节只做目录搭建，没有业务页面，只要不报错就代表目录结构配置完成。