Vue 代码结构vue1. 文件目录结构以模块化、功能分层的方式组织项目，常见的目录结构如下：111111111111

1. 文件目录结构

以模块化、功能分层的方式组织项目，常见的目录结构如下：

src/
├── assets/          # 静态资源（图片、字体、样式等）
│   ├── images/
│   ├── styles/
│   └── fonts/
├── components/      # 可复用组件
│   ├── Common/      # 通用组件（如按钮、弹窗等）
│   ├── Layout/      # 布局组件（如导航栏、侧边栏等）
│   └── widgets/     # 具体小组件
├── composables/     # 组合式函数（例如 `useAuth.js`）
├── directives/      # 自定义指令
├── i18n/            # 国际化资源
│   ├── en.json
│   └── zh.json
├── layouts/         # 布局页面
│   ├── DefaultLayout.vue
│   ├── AuthLayout.vue
├── pages/           # 页面组件（按路由划分）
│   ├── Home.vue
│   ├── Login.vue
│   └── Dashboard/
│       ├── Dashboard.vue
│       ├── Settings.vue
│       └── Profile.vue
├── router/          # 路由配置
│   └── index.js
├── services/        # API 请求逻辑
│   ├── auth.js
│   ├── user.js
│   └── http.js      # Axios 封装
├── store/           # 状态管理（Pinia/Vuex）
│   ├── modules/
│   │   ├── auth.js
│   │   ├── user.js
├── utils/           # 工具函数
│   ├── date.js
│   └── validator.js
├── App.vue          # 根组件
├── main.js          # 项目入口文件
└── vite.config.js   # Vite 配置