vue中踩过的坑

vue中踩过的坑：
1.前端解决跨域问题 使用的方法是vue.config.js中进行配置 proxy 1.在本地起了一个服务，接受客户端请求2.将请求转发给远程服务器3.拿到服务器响应数据 4.将响应转发给客户端（实现原理：同源策略是浏览器要遵循的标准，而如果是服务器像服务器请求就无需同源策略）

2.pc端移动端重定向问题：项目是钉钉登录，同一个入口进去，然后识别pc端和移动端，根据不同的设备进行重定向问题
使用navigator.userAgent.toLowerCase()判断登录端设备（在跨平台，各种浏览器，移动设备兼容的时候，经常要根据设备、浏览器做特定调整，所以判断设备和浏览器的工作）（实现原理：有关浏览器类型的信息都藏在USER-AGENT里面，首先读取navigator.userAgent里面的信息，为了方便利用toLowerCase方法转成小写的形式。然后用match方法进行匹配版本信息）根据不同的设备包含的信息，区分ipad 华为平板 小米平板等 然后进行页面的重定向

3.使用钉钉登录获取钉钉用户信息：判断钉钉登录环境下。使用SDK获取免登授权码，根据钉钉提供的api获取code后在调用callback方法，拿到code后请求接口获取用户信息

4.常用组件的封装（如跟公司业务相关的常用组件的封装 slot插槽传入自定义模板的内容）

5.模块化—自定义一些方法 比如axios请求方法 v-height自定义值领实现表格的高度随屏幕尺自适应

6.flex响应式布局 ant组件自适应布局 二级菜单根据屏幕尺寸自动收起展开等

7.ant组件使用过程中的一些问题 比如日期选择器当数据为空的时候，日期选择器就会出现问题，当没有选择日期的时候，请求接口也会遇到问题 解决办法：先判断表格中日期时间是否存在的 存在的话 在转化日期格式进行接口获取，接口返回的数据也是先判断是否存在在判断类型 进行时间类型的转化

8.ts使用三方库时遇到的问题：当使用第三方库的时候，很多第三方库不是通过ts写的，而是使用原生的js或者浏览器或者是nodejs提供好的对象，直接使用的话，ts会报错，
解决办法（比如在ts中使用jq库，一种常见的方式是在html中通过script标签引进）但是ts并不知道$或者jquery是什么样的东西，所以会报错，这时候我们可以使用declaer关键词来告诉ts这个变量在其他地方已经被定义了，可以直接拿来用，通常这种声名语句会放在一个单独的声名文件中，这个文件以.d.ts结尾的d就代表声名的意思，说明该文件只有适配ts的类型声名，这里定义的declare var并没有真的定义一个变量的实现，只是定义了全局变量jQuery的类型,仅仅用于编译时候的检查，并不是实现功能的真正的代码，有了这个文件，就可以享受ts带来的福利了，其他地方使用都会获得对应的代码补全，接口提示等功能，使用这个解决了vue.3.0+ts项目中获取钉钉入口信息回调失败的问题,在requestAuthCode.d.ts中添加变量声明

9.使用scss封装常用样式（当项目中有许多地方需要的样式一样，可以写一个专门scss文件统一管理样式，只然后页面上引用这个文件，使用统一的样式，当样式变化的时候，只需要改变这一个文件即可，不需要每个页面都改一遍了）

10.移动端项目
10.1使用rem单位来自适应不同宽度手机的尺寸
10.2使用reset.css来解决不同手机默认样式问题
10.3使用border-1px.css解决一像素边框问题
10.4fastclick解决移动端300毫秒点击延迟事件（fastClick的实现原理是在检测到touchend事件的时候，会通过DOM自定义事件立即触发模拟一个click事件，并把浏览器在300ms之后的click事件阻止掉。）但是有一个问题ios input框唤启软键盘不灵敏问题？
你可以直接去node_module里找到fastClick文件修改focus方法，但是不建议这样做。如果以后npm install，就会被覆盖，建议你在引用fastclick的地方，重写focus方法。如vue项目，你可以在main.js文件里面，引入fastclick模块后，重写focus方法。。
10.5安卓浏览器看背景图片，有些设备会模糊：解决办法：必须使用2x的背景图来代替img标签（一般情况都是用2倍）。例如一个div的宽高是100100，背景图必须得200200，然后background-size:contain;，这样显示出来的图片就比较清晰了。
10.6 图片的懒加载插件的使用，减小服务器请求压力

11.长列表的使用，list列表界面滑动有卡顿现象（插件：vue-virtual-scroller（虚拟滚动），防止长列表卡顿）