作为一个3D的项目，从用户打开页面到最终模型的渲染需要经过多个流程，加载的时间也会比普通的H5项目要更长一些，从而造成大量的用户流失。为了提升首屏加载的转化率，需要尽可能的降低loading的时间。这里就分享一些我们在模型加载优化方面的心得。

一、前言

近段时间，我们使用three.js完成了vivo拟我形象的开发工作，大家可以在vivo账号中拟制属于自己的3D形象，也可以保存作为自己的头像名片。

作为一个3D的项目，从用户打开页面到最终模型的渲染需要经过多个流程，加载的时间也会比普通的H5项目要更长一些。然而过长的等待时间会造成大量的用户流失，这部分用户没有体验到具体的功能就退出了页面非常的遗憾，为了提升首屏加载的转化率，需要尽可能的降低loading的时间。这里就分享一些我们在模型加载优化方面的心得。

在计算机视觉算法开发过程中，你是否需要从硬盘加载数据集、在图像或视频上绘制分类检测结果、选择视频中的特定区域进行分析，或者统计一个区域内目标的流量分析。如果有上述需求，那么文中这款计算机视觉工具箱绝对可以帮你事半功倍！

视频指定区域车流量计数

视频指定区域分析

SFC 单文件组件

顾名思义，就是一个.vue文件只写一个组件

模板写法

如果这个组件想要在别的组件里使用，就需要在另一个.vue中引入和使用、复用

ref 和 reactive 是 Vue3 中实现响应式数据的核心 API

• ref 用于包装基本数据类型
• reactive 用于处理对象和数组。

尽管 reactive 似乎更适合处理对象，但 Vue3 官方文档更推荐使用 ref

下面我们从源码的角度详细讨论这两个 API，以及 Vue3 为什么推荐使用ref而不是reactive？

# 前言

经常的，我们在日常工作中，会使用第三方 UI 组件库，比如：element-ui、vant-ui、iview、ant-design 等等。不管是为了业务考虑还是单纯的为了提高效率，我们会把一些经常用到的组件抽离、封装成公共组件，这样方便我们在不同的地方使用这个组件，减少重复代码的编写。

我们把对于第三方组件库的封装称为组件的二次封装，那么这带来有个思考，当我们在二次封装时，我们在封装什么？

vue3 相比 vue2 对 ts 拥有更友好的支持，当初在用 vue2 写 ts 时各种装饰器，现在只要使用 <script setup lang="ts"></script> 标签就可以直接使用 ts。

# 1. 静态资源处理

# 配置 husky、lint-staged、@commitlint/cli

• husky ：一个为 git 客户端增加 hook 的工具
• lint-staged ：仅对 Git 代码暂存区文件进行处理，配合 husky 使用
• @commitlint/cli ：让 commit 信息规范化