# bdvplatform-PWA

**Repository Path**: JSy-Qing/bdvplatform

## Basic Information

- **Project Name**: bdvplatform-PWA
- **Description**: 卡路里偷跑计划 CALORIE PROJECT（Demo）
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: http://www.qingcool.cn/main/bdvplatform/index.html
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-04-05
- **Last Updated**: 2023-03-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

项目名称：

**CALORIE PROJECT** 卡路里偷跑计划

在线地址：

**https://qm-aggregation-4gmfze2e9f67b828-1304539404.tcloudbaseapp.com/bdvplatform/index.html**

项目Gitee地址：

**https://gitee.com/JSy-Qing/bdvplatform.git**

**项目相关插件**

- 安装 ThreeJS `npm install three --save`
    
- 安装轨道控制器 `npm install three-orbitcontrols --save`
    
- 安装鼠标视觉差组件 `npm install parallax-js --save`
    
- 安装 Echarts  `npm install echarts --save`
    
- 安装 Webpack `npm install webpack --save-dev`
    
- 安装 Webpack-cli `npm install webpack-cli --save-dev`
    
- 安装文件压缩插件
    `npm install --save-dev compression-webpack-plugin --legacy-peer-deps`
    

# 性能优化相关

- 配置问题：可能打包的文件有 .map 类型，map 文件作用：项目打包后，代码都是通过压缩加密的，如果运行时报错，输出的错误信息无法准确的得知哪里的代码有误。
    解决方法：在 vue.config.js 里加上 productionSourceMap: false 不生产 .map 文件
- 物理压缩：使用压缩工具强制将文件压缩小（通过 vue 插件实现打包压缩，并在服务端通过 nginx 配置来压缩文件）代价耗费更多的 CUP 资源。
- 路由懒加载：按需加载
- 引入第三方库：例如 Echarts 使用按需加载，并且不要直接注册到 main.js 里
- 代码优化：v-if 和 v-show 区分使用场景，computed 和 watch 区分使用场景
- 服务端 SSR（TODO）

### 适配相关

- 页 1 宽度 等于窗口宽度(min-width: 1280px)
- 页 1 高度 等于窗口高度(>= 920px)

### 遇到问题

- 视差组件，子元素 display: flex; 视察效果会失效

### TODO

- [ ] 昼夜更替按钮：通过 JS 动态改变光源位置，实现昼夜更替效果

- [ ] About 里新增关闭按钮
    
- [ ] About 里新增眼睛按钮（预览模型）
    
- [x] 页 1 添加一个弹窗，用于提示用户操作等等
    
- [x] 创建地面碰撞体，防止相机沉下去（解决方案：给轨道控制器一个最低角度

- [x] 主页 logo 使用两面翻转效果
    
- [x] camera 变换按钮：让摄像头改变位置
    
- [x] 动画按钮
    
- [x] 自动旋转按钮
    
- [x] 缩放按钮

### PWA 相关

1.  安装 vue/pwa `vue add @vue/pwa`
    
2.  安装 pwa 资源生成器
    `npm install --global vue-pwa-asset-generator`
    
3.  ico 图标生成 pwa 资源
    `vue-asset-generate --no-manifest -a src/assets/logo.png -o public/img/icon`
    
4.  vue.config.js 配置主题颜色
    
    ```
    module.exports = {
        pwa: {
            themeColor: '#323432',
        }
    }
    ```
    

### 踩坑汇总

1.  老项目配置 pwa 时，会遇到一系列奇怪报错例如：

- 安装 vue/pwa 时，可能遇上项目语法不规范（未使用的对象创建）
    解决方法：修正语法错误，重新安装
- 安装 vue/pwa 和 pwa 资源生成器，会遇上报错：webpack / vue-cli / pwa 版本冲突
    解决方法：需要重新更新 vue-cli，安装 webpack 插件，再重试

2.  在配置好后，上线服务器时，可能会遇上 Edge 兼容，但 谷歌浏览器 未弹出提示
    解决方法：很简单，只需调换 import pwa 位置

3.  谷歌浏览器内非常严格需要检查：文件的访问以及图片是否齐全

- Vue 默认添加的文件会少一张 安卓移动端的 512×512 图片，建议添加上去

- 项目 run build 打包以后，绝对不要轻易删除多余文件，可能导致不弹出安装 pwa 提示

4.  项目如果打包之后，想修改 pwa 名字：manifest.json 修改两处名字 / service-worker.js 修改一处名字