自己再做一个vue项目，想提前想把项目结构理顺，然后还差了一下一般vue的页面组件都是怎么命名的，记录一下。 这是我的项目结构
建议的目录结构
src/
├── views/
│ ├── auth/
│ │ ├── Login.vue
│ │ ├── Register.vue
│ │ └── Auth.vue
│ ├── dashboard/
│ │ ├── Dashboard.vue
│ │ ├── GoalCard.vue
│ │ └── GoalActions.vue
│ ├── goals/
│ │ ├── CreateGoal.vue
│ │ ├── GoalDetail.vue
│ │ ├── GoalBreakdown.vue
│ │ └── MilestoneEditor.vue
│ ├── rewards/
│ │ ├── Rewards.vue
│ │ ├── Collection.vue
│ │ └── RewardPool.vue
│ └── settings/
│ ├── Settings.vue
│ ├── Profile.vue
│ └── AccountSettings.vue
├── components/
│ ├── common/
│ ├── layout/
│ └── ui/
└── router/
在一般的Vue项目中，除了业务功能页面外，通常还包括以下页面模块：
1. 布局页面模块
Layout.vue- 主布局页面Header.vue/Navbar.vue- 头部导航栏Sidebar.vue- 侧边栏Footer.vue- 底部信息栏MainContent.vue- 主内容区域
2. 路由相关页面
Home.vue- 首页NotFound.vue/404.vue- 404页面Error.vue/500.vue- 错误页面Redirect.vue- 重定向页面
3. 用户权限相关
PermissionDenied.vue- 权限拒绝页面UserProfile.vue- 用户个人资料页面UserSettings.vue- 用户设置页面ChangePassword.vue- 修改密码页面
4. 通用功能页面
Search.vue- 搜索页面Notification.vue- 通知中心页面Messages.vue- 消息中心页面Help.vue- 帮助页面About.vue- 关于页面Contact.vue- 联系我们页面
5. 数据展示页面
Dashboard.vue- 数据仪表板Reports.vue- 报表页面Analytics.vue- 数据分析页面Statistics.vue- 统计页面
6. 表单相关页面
FormWizard.vue- 多步骤表单向导EditProfile.vue- 编辑资料页面CreateItem.vue- 创建项目页面EditItem.vue- 编辑项目页面
7. 列表页面
ItemList.vue- 项目列表页面ItemDetail.vue- 项目详情页面CategoryList.vue- 分类列表页面
8. 系统管理页面（后台项目）
AdminDashboard.vue- 管理员面板UserManagement.vue- 用户管理页面RoleManagement.vue- 角色管理页面SystemSettings.vue- 系统设置页面Logs.vue- 系统日志页面
9. 电商相关页面（电商项目）
ProductList.vue- 商品列表页面ProductDetail.vue- 商品详情页面ShoppingCart.vue- 购物车页面Checkout.vue- 结算页面OrderHistory.vue- 订单历史页面Wishlist.vue- 收藏夹页面
10. 社交功能页面
Feed.vue- 动态流页面PostDetail.vue- 帖子详情页面Profile.vue- 用户主页Friends.vue- 好友列表页面
这些页面模块可以根据项目的具体需求进行选择和定制，有助于构建一个完整且结构清晰的应用程序。
