Vue 项目结构参考

src/
├── assets/                # 静态资源
│   ├── images/            # 图片
│   │   ├── logo.png       # 前台Logo
│   │   └── admin-logo.png # 后台Logo
│   └── styles/            # 全局样式
│       ├── main.scss      # 主样式文件
│       └── variables.scss # 样式变量
│
├── components/            # 全局共享组件
│   ├── common/            # 通用组件
│   │   ├── AppHeader.vue  # 头部组件
│   │   └── AppFooter.vue  # 底部组件
│   ├── ui/                # UI组件
│   │   ├── Button.vue     # 按钮组件
│   │   └── Modal.vue      # 模态框组件
│   └── utils/             # 工具组件
│       └── Loader.vue     # 加载动画组件
│
├── layouts/               # 布局组件
│   ├── frontend/          # 前台布局
│   │   └── FrontendLayout.vue # 前台主布局
│   ├── admin/             # 后台布局
│   │   └── AdminLayout.vue    # 后台主布局
│   └── auth/              # 认证布局
│       └── AuthLayout.vue     # 登录注册布局
│
├── views/                 # 页面视图
│   ├── frontend/          # 前台页面
│   │   ├── HomeView.vue   # 首页
│   │   ├── product/       # 商品相关页面
│   │   │   ├── ProductListView.vue  # 商品列表
│   │   │   └── ProductDetailView.vue # 商品详情
│   │   ├── news/          # 新闻资讯
│   │   │   ├── NewsListView.vue      # 新闻列表
│   │   │   └── NewsDetailView.vue    # 新闻详情
│   │   └── about/         # 关于我们
│   │       └── AboutView.vue         # 关于我们页面
│   ├── admin/             # 后台页面
│   │   ├── DashboardView.vue # 仪表盘
│   │   ├── user/          # 用户管理
│   │   │   └── UserListView.vue      # 用户列表
│   │   ├── product/       # 商品管理
│   │   │   └── ProductManageView.vue # 商品管理
│   │   └── settings/      # 设置
│   │       └── SettingsView.vue      # 设置页面
│   ├── auth/              # 认证相关页面
│   │   ├── LoginView.vue  # 登录页面
│   │   └── RegisterView.vue # 注册页面
│   └── user/              # 用户中心
│       ├── ProfileView.vue    # 个人资料
│       ├── OrderHistoryView.vue # 订单历史
│       └── AddressView.vue    # 地址管理
│
├── router/                # 路由配置
│   ├── index.js           # 主路由文件
│   ├── frontend-routes.js # 前台路由
│   ├── admin-routes.js    # 后台路由
│   └── auth-routes.js     # 认证路由
│
├── store/                 # Vuex状态管理
│   ├── index.js           # 主Store文件
│   ├── modules/           # 模块化Store
│   │   ├── user.js        # 用户模块
│   │   ├── product.js     # 商品模块
│   │   └── auth.js        # 认证模块
│   └── actions.js         # 全局Actions
│
├── services/              # 服务层
│   ├── auth-service.js    # 认证服务
│   ├── user-service.js    # 用户服务
│   └── product-service.js # 商品服务
│
├── utils/                 # 工具函数
│   ├── api.js             # API请求封装
│   ├── date-utils.js      # 日期工具函数
│   └── string-utils.js    # 字符串工具函数
│
├── App.vue                # 根组件
└── main.js                # 入口文件