介绍

关于项目

本文档是 慕影网 项目中的 H5客户端 部分的开发文档，完整项目共包含以下部分：

• 《慕影网H5客户端演示地址》 (opens new window)
• 《慕影网H5客户端源码地址》 (opens new window)
• 《慕影网H5客户端接口文档地址》 (opens new window)
• 《慕影网H5组件库演示地址》 (opens new window)
• 《慕影网H5组件库源码地址》 (opens new window)
• 《慕影网管理端演示地址》 (opens new window)
• 《慕影网管理端接口文档地址》 (opens new window)

手机预览

可使用手机微信或者其它能工具扫码预览 H5客户端

作者寄语

希望该分享能给前端学习者带来些许收获的同时，大家也能给作者在 github (opens new window) 的项目源码点个 star 支持一下。
如果大家有什么建议或者遇到问题，请随时加入 QQ 群 577133021 一起交流进步。

目录结构

├─ html                         # 构建文件                        
├─ public                       # 静态资源
│  ├─ favicon.ico               # favicon 图标,即浏览器标签栏图标
│  ├─ index.html                # html模板
│  └─ swiper.min.js
├─ src                          # 项目主文件
│  ├─ api                       # 接口请求
│  ├─ assets                    # 全局样式、字体文件等
│  ├─ components                # 全局公共组件
│  ├─ directive                 # 全局指令
│  ├─ filter                    # 全局过滤器
│  ├─ http                      # axios 封装
│  ├─ mixins                    # 混入
│  ├─ router                    # 路由文件
│  ├─ store                     # 全局 vuex
│  ├─ util                      # 公共方法
│  ├─ views                     # 项目页面
│  ├─ App.vue                   # 入口主组件
│  ├─ config.js                 # 接口域名配置
│  └─ main.js                   # 入口文件
├── .eslintrc.js                # eslint 配置项
├── vue.config.js               # vue-cli 配置
└── package.json                # package.json

命名规范

组件名

全局组件：

• 组件名使用驼峰式命名，每个单词首字母大写，遵循 PascalCase 命名规范；
• 组件在 template 中使用时， 组件名使用小写字母， 遵循 kebab-case 命名规范；
• index.js 或者 index.vue 文件，使用小写。

页面组件

• 页面组件目录建在当前页面所在文件夹，名称为 components，组件命名同全局组件。

页面名

• 所有页面全部使用小写字母，遵循（kebab-case）命名规范。

学习成本

本项目使用 前后端分离 架构，通过 JWT 做权限认证，已提供了完善的接口文档，前端开发者可以无需了解后端相关知识即可进行学习与二次开发。