002 vue3-admin项目的目录及文件说明之src目录及其子目录、子文件

整体目录结构

src/
├── api/                 # API 接口相关
├── assets/              # 静态资源
├── components/          # 通用组件
├── composables/         # 组合式函数
├── constants/           # 常量定义
├── directives/          # 自定义指令
├── hooks/               # 自定义钩子
├── layout/              # 布局组件
├── router/              # 路由配置
├── services/            # 业务服务层
├── store/               # 状态管理
├── styles/              # 样式文件
├── types/               # TypeScript 类型定义
├── utils/               # 工具函数
├── views/               # 页面组件
├── App.vue              # 根组件
├── main.ts              # 入口文件
└── vite-env.d.ts        # Vite 环境类型声明

核心目录

1 api/ 目录

api/
├── user.ts              # 用户相关接口
├── product.ts           # 产品相关接口
└── index.ts             # API 统一导出

作用：集中管理所有 API 接口调用特点：

• 按业务模块划分接口文件
• 统一处理请求和响应拦截（拦截器interceptors：axios.create(config).interceptors.request.use 和 axios.create(config).interceptors.response.use）
• 支持 TypeScript 类型定义

2 assets/ 目录

assets/
├── images/              # 图片资源
├── icons/               # 图标资源
├── fonts/               # 字体文件
└── styles/              # 全局样式

 

作用：存放项目中使用的静态资源特点：

• 支持 Vite 静态资源处理
• 可通过 import 直接引用
• 支持自动优化和压缩

3 components/ 目录

components/
├── common/              # 通用基础组件
├── business/            # 业务组件
└── layout/              # 布局组件

作用：存放可复用的 Vue 组件特点：

• 支持自动注册（通过 unplugin-vue-components）
• 组件化开发提高复用性
• 支持 TypeScript 类型检查

4 composables/ 目录

composables/
├── useCounter.ts        # 计数器逻辑
├── useApi.ts            # API 调用逻辑
└── useModal.ts          # 模态框逻辑

作用：存放组合式函数，实现逻辑复用特点：

• 基于 Vue 3 Composition API
• 逻辑关注点分离
• 更好的类型推导

5 router/ 目录

router/
├── index.ts             # 路由配置入口
├── routes.ts            # 路由表定义
└── guards.ts            # 路由守卫

6 store/ 目录

store/
├── index.ts             # Pinia 实例创建
├── modules/             # 模块化状态
│   ├── user.ts          # 用户状态
│   └── app.ts           # 应用状态

作用：使用 Pinia 进行状态管理特点：

• 模块化状态管理
• 更好的 TypeScript 支持
• 自动导入支持

7 views/ 目录

views/
├── Home.vue             # 首页
├── About.vue            # 关于页
└── user/                # 用户相关页面
    ├── Login.vue        # 登录页
    └── Profile.vue      # 个人资料页

作用：存放页面级组件特点：

• 与路由配置对应
• 包含完整的页面结构
• 可嵌套子组件

8 utils/ 目录

utils/
├── request.ts           # 网络请求封装
├── storage.ts           # 本地存储工具
└── format.ts            # 格式化工具

作用：提供通用工具函数特点：

• 功能单一，职责明确
• 可被多个组件复用
• 纯函数设计

核心文件

1 main.ts

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import './style.css'

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(ElementPlus)

app.mount('#app')

 

作用：应用入口文件，初始化 Vue 应用主要功能：

• 创建 Vue 应用实例
• 注册 Pinia 状态管理
• 注册 Vue Router
• 注册 Element Plus
• 挂载应用

2 App.vue

<template>
  <el-config-provider :locale="zhCn">
    <router-view />
  </el-config-provider>
</template>

<script setup lang="ts">
import { zhCn } from 'element-plus/dist/locale/zh-cn.mjs'
</script>

<style scoped>
/* 全局样式 */
</style>

作用：根组件，应用的入口组件特点：

• 配置 Element Plus 国际化
• 提供路由视图容器
• 可设置全局样式

3 vite-env.d.ts

/// <reference types="vite/client" />

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

作用：Vite 环境的 TypeScript 类型声明特点：

• 提供 Vite 客户端类型
• 声明 Vue 单文件组件类型
• 支持 TypeScript 类型检查