# Vue 功能模块
前言
这里主要通过一个常见的数据管理系统应用为例，介绍 一个Vue 项目开发过程中常见的功能场景，以及一些注意事项
| 功能类别 | 案例模块 |
|---|---|
| 一.权限认证 | 登陆/注册、权限管理 |
| 二.模板页面 | 搜索模板、操作模板、表格模板、表单模板、富文本 |
| 三.文件处理 | 导入导出、上传下载、文件预览 |
| 四.性能优化 | 骨架屏、虚拟滚动、pwa、懒加载、ssr |
| 五.补充功能 | 页面监控、国际化、页面测试、消息推送 、拖拽功能 |
| 六.其他功能 | 地图相关、音频视频、微前端 、页面截图、移动端 |
# 1.微前端
背景
- 1.项目太大，不好维护，需要拆分成小项目维护，可以使用微前端思路拆分大项目为小项目
- 2.项目太老，新开发的项目使用其他框架或者最新框架来开发，可以使用微前端将新项目嵌入到老项目某个模块中
可能遇到的问题：
🏷️ 问题一：子应用与子应用、基座之间 ui 框架、相关工具不能复用，ui 框架和相关工具之间版本不同，难以维护
xxx
# 2.消息推送
背景
前端主要有三种方式实现信息实时更新：页面实时更新内容比较多时才使用WebSocket
- 1.轮询：通过定时器不断请求接口
- 2.长轮询：后端只有更新消息才会返回
- 3.WebSocket
可能遇到的问题：
🏷️ 问题一：后端推送不稳定，经常会断开
使用心跳的方式，间断与后端保存联系
# 3.登录模块
背景
几种常见的认证方式：
- OAuth 认证
- Cookie-Session 认证
- 基于 JWT 的 Token 认证
- 无密码的认证
这里主要讲解 基于 JWT 的 Token 认证
- 扫描二维码登录
- sso 单点登录
可能遇到的问题：
🏷️ 问题一：密码是明文传输给后端的
密码要加密后传输给后端，要使用 https 协议传输密码，后端同步加密处理
# 4.监控模块
背景
主要的集中监控方式：
- 页面埋点
- 性能监控
- 异常监控
可能遇到的问题：
🏷️ 问题一：xxx
xxx
# 5.测试模块
背景
单元测试、端到端测试
可能遇到的问题：
🏷️ 问题一：xxx
xxx
# 6.权限模块
背景
路由权限、菜单权限
可能遇到的问题：
🏷️ 问题一：xxx
xxx
# 7.国际化模块
背景
使用配置文件的方式，使用同一套界面，根据语言的不同加载对应的配置文件
可能遇到的问题：
🏷️ 问题一：xxx
xxx
# 8.文件预览
背景
常见的文件预览：
- pdf 在线预览
- excel 在线预览
可能遇到的问题：
🏷️ 问题一：xxx
xxx
# 9.骨架屏
背景
代码优化、组件优化、打包优化
可能遇到的问题：
🏷️ 问题一：xxx
xxx
# 10.服务端渲染
背景
nuxt.js
可能遇到的问题：
🏷️ 问题一：xxx
xxx
# 11.PWA 功能
背景
提供独立于浏览器的缓存，并且可以接收服务器的推送。如：在没有网络，或者网络状态较差的时候，仍可访问缓存在本地的数据
可能遇到的问题：
🏷️ 问题一：xxx
xxx
# 12.上传下载
背景
下载相关
- 断点续传
- 大文件下载
可能遇到的问题：
🏷️ 问题一：xxx
xxx
# 13.视频播放
背景
vue 开发移动端项目需要注意的事项
video 播放器封装与使用
海康威视摄像头使用 可能遇到的问题：
🏷️ 问题一：xxx
xxx
# 14.地图相关
背景
主要是常见的厂商地图 sdk 使用：
- 高德地图
- 百度地图
- 谷歌地图
可能遇到的问题：
🏷️ 问题一：xxx
xxx
# 15.富文本
背景
主流的富文本编辑器：
可能遇到的问题：
🏷️ 问题一：xxx
xxx
# 16.导入导出
背景
video 视频开发：
- excel 文件
- pdf 文件
可能遇到的问题：
🏷️ 问题一：xxx
xxx
# 17.页面截图
背景
- 懒加载图片列表
可能遇到的问题：
# 18.懒加载
背景
- 懒加载图片列表
可能遇到的问题：
🏷️ 问题一：xxx
xxx
# 19.拖拽功能
背景
- 拖拽库
可能遇到的问题：
🏷️ 问题一：xxx
xxx
# 20.移动端
背景
vue 开发移动端项目需要注意的事项
- vue 项目适配
- 打包成 app
可能遇到的问题：
🏷️ 问题一：xxx
xxx
# 21.虚拟滚动
背景
- 表格虚拟滚动
可能遇到的问题：
🏷️ 问题一：xxx
xxx