项目页面概览

概述

Vue 组件 官方文档 (opens new window)，在阅读本文档前，请对组件的使用有一定了解。

由于大部分组件为展示类，无太多技术点，所以本文档只选择几个较为复杂的组件进行解构说明。

目录结构

以下 components 中的组件，如果存在 index.js 文件，则可以在 main.js 文件中进行注册为全局文件。

...
├─ src                         	# 项目主文件
│  ├─ views                    	# 页面文件夹
│  │  ├─ account               	# 账号相关
│  │  │  ├─ login.vue          	# 登录
│  │  │  ├─ register.vue       	# 注册
│  │  │  └─ forget.vue         	# 忘记密码
│  │  ├─ actor                 	# 影人
│  │  │  ├─ award              	# 影人获奖
│  │  │  ├─ detail             	# 影人详情
│  │  │  ├─ role               	# 影人饰演角色
│  │  │  └─ works              	# 影人作品
│  │  ├─ article               	# 文章
│  │  │  └─ detail             	# 文章详情
│  │  ├─ award                 	# 奖项
│  │  │  ├─ index              	# 奖项列表
│  │  │  ├─ session            	# 奖项届
│  │  │  └─ detail             	# 每届获奖影人/影片
│  │  ├─ comment               	# 各类资源共用评论页面
│  │  ├─ home                  	# 首页
│  │  ├─ movie                 	# 影视
│  │  │  ├─ index              	# 影视搜索列表
│  │  │  ├─ detail             	# 影视详情
│  │  │  │  ├─ article         	# 文章资讯
│  │  │  │  ├─ award           	# 所获奖项
│  │  │  │  ├─ cast            	# 演员表
│  │  │  │  ├─ company         	# 制作发行公司
│  │  │  │  ├─ dialogue        	# 经典台词
│  │  │  │  ├─ index           	# 详情
│  │  │  │  ├─ knowledge       	# 幕后知识
│  │  │  │  ├─ level           	# 家长引导等级
│  │  │  │  ├─ pubdate         	# 上映日期
│  │  │  │  ├─ rating          	# 评分信息
│  │  │  │  ├─ review          	# 影评
│  │  │  │  ├─ role            	# 角色表
│  │  │  │  ├─ serial          	# 所属系列
│  │  │  │  └─ video           	# 相关视频
│  │  │  ├─ serial             	# 影视系列
│  │  │  ├─ coming.vue         	# 即将上映
│  │  │  ├─ theater.vue        	# 正在热映
│  │  │  ├─ today.vue          	# 那年今日上映影片
│  │  │  └─ top.vue            	# 热门前100部电影
│  │  ├─ photo                 	# 各资源照片共用页面
│  │  ├─ profile               	# 我的
│  │  │  ├─ aboutus            	# 关于作者
│  │  │  ├─ collection         	# 用户收藏
│  │  │  ├─ favorite           	# 影视收藏夹
│  │  │  │  ├─ create          	# 创建收藏夹
│  │  │  │  ├─ detail          	# 收藏夹中影视
│  │  │  │  ├─ edit            	# 编辑收藏夹
│  │  │  │  └─ index           	# 收藏夹列表
│  │  │  ├─ feedback           	# 用户反馈
│  │  │  ├─ index              	# 我的
│  │  │  ├─ information        	# 我的信息
│  │  │  └─ setting            	# 系统设置
│  │  ├─ review                	# 影评
│  │  │  └─ detail             	# 影评详情
│  │  ├─ role                  	# 角色
│  │  │  ├─ actor              	# 饰演者
│  │  │  ├─ detail             	# 角色详情
│  │  │  └─ movie              	# 相关影视
│  │  ├─ search                	# 搜索
│  │  ├─ video                 	# 信息卡
│  │  │  ├─ detail             	# 视频详情
│  │  │  └─ index              	# 视频列表
│  │  ├─ 404.vue               	# 页面不存在
│  │  ├─ Layout.vu             	# 底部菜单栏相关页面的父页面
│  │  └─ offline.vue           	# 网络异常提示页面
│  └─ App.vue           		# 入口组件
...

页面命名

如果页面中有部分组件只在当前页面中使用，则在该页面同级目录下创建 components 文件夹，并将文件放于该文件夹中。组件命名为驼峰式 PascalCase。
除账号页面外，一般页面文件下都存在 index.vue 文件作为该页面的入口文件。