
📁 src 目录总览(核心源码区)
1️⃣ assets
静态资源
图片(png / jpg / svg)
字体
全局样式(scss / css)
📌 特点:
不会被当作组件或逻辑处理,只是被引用
2️⃣ components
通用组件
Button、Modal、Table、Form 等
可复用组件(业务无关或弱业务)
📌 一般原则:
👉 多个页面都会用的,才放这里
3️⃣ directives
自定义指令
比如:
v-permission
v-debounce
v-copy
📌 Vue 的 app.directive() 基本都在这
4️⃣ enums
枚举定义
状态枚举
类型枚举
常量型枚举
export enum OrderStatus {
Pending = 0,
Success = 1,
}
📌 用枚举代替魔法数字 / 字符串
5️⃣ layouts
页面布局
主布局(带菜单、头部、footer)
空白布局(登录页、404)
📌 通常配合 router 使用:
component: Layout
6️⃣ locale
国际化(i18n)
中文 / 英文文案
多语言 key-value
zh-CN.ts
en-US.ts
📌 如果你看到 $t('xxx'),基本都在这找
7️⃣ orderStatColor
状态颜色映射(偏业务)
不算特别常见,但很实用
比如订单状态 → 对应颜色
{
success: 'green',
failed: 'red'
}
📌 这是业务工具型目录
8️⃣ projects
业务模块 / 页面
真正的业务页面
一个模块一个文件夹
projects/
order/
user/
report/
📌 一般:
页面
页面私有组件
页面接口
都在这里
9️⃣ router
路由配置
路由表
路由守卫
动态路由 / 权限路由
createRouter(...)
📌 菜单、权限、页面跳转都离不开它
🔟 settings
全局配置(你前面问的重点)
API 地址
项目配置
菜单配置
请求适配配置
👉 偏「系统级配置」,不是业务
1️⃣1️⃣ store
状态管理
Pinia / Vuex
用户信息
权限
全局状态
📌 登录信息、token、用户资料通常在这
1️⃣2️⃣ utils
工具函数
时间处理
金额格式化
防抖 / 节流
通用 helper
📌 不依赖 Vue 的纯函数,基本都在这
1️⃣3️⃣ main.ts
入口文件
创建 app
注册插件
挂载到 #app
createApp(App)
.use(router)
.use(store)
.mount('#app')