项目组件概览

概述

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

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

目录结构

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

└─ src                          # 项目主文件
   └─ components                # 组件文件夹
      ├─ Actor                  
      │  ├─ ActorItem          
      │  └─ ActorRow
      ├─ Movie
      │  ├─ MovieCard          # 影视信息卡片
      │  ├─ MovieItem
      │  ├─ MovieRow
      │  └─ Skeleton           # 加载骨架屏
      ├─ Role
      │  ├─ RoleItem
      │  └─ RoleRow
      ├─ Review
      │  └─ ReviewItem
      ├─ Article
      │  └─ ArticleItem
      ├─ Video
      │  ├─ VideoItem
      │  └─ VideoRow
      ├─ Photo
      │  ├─ PhotoGroup         # 照片组
      │  └─ PhotoSwiper        # 照片预览
      ├─ Header
      │  ├─ HeaderBar          # 通用页头
      │  └─ HeaderScrollBar    # 影视、影人等详情页头
      ├─ Player                 # 视频播放器
      ├─ Page                   # 子页面
      ├─ ImageGroup             # 封面图片组，系列中使用
      ├─ ImageUpload            # 图片上传，头像上传使用
      ├─ Report                 # 举报
      ├─ Skeleton               # 加载骨架屏
      ├─ TabSwitch              # 类型切换标签栏
      ├─ Tool
      │  ├─ ToolBar            # 通用底部工具栏
      │  ├─ UserCollection     # 用户收藏
      │  └─ UserLike           # 用户点赞
      ├─ App
      │  └─ FooterInfo         # 页底App信息
      ├─ MPanel                 # 信息卡
      ├─ NoData                 # 无数据
      ├─ Basic                  #
      └─ Bottom.vue             # App的底部导航菜单

组件注册

注册全局组件

在 main.js 中引入组件并注册

import Page from '@/components/Page/index.js'; # /index.js 可以省略
Vue.use(Page);

局部组件

import BottomBar from "@/components/BottomBar";
export default {
  name: "Layout",
  components: {
    BottomBar,
  },
};