vue项目--近期总结--“坑”

原创 18672293959 随笔 吐槽 389阅读 2017-12-11 21:58:36 举报

开始手头上的项目(移动端)是从7月底开始的,前端技术栈是vue(2.4.4)+webpack(2.6.1)+scss+pug(部分页面使用)。近期一个半月,需求上项目中加入了 外卖、产品多规格多属性、对接营销平台等等,个人在这期间也负责了相应的模块,期间遇到了一些不好对付的暗坑,最后都有相应的解决方案,相信有更好的解决方案,现记录之。

问题1:每张图片上有一个带线框特色标签,里面的文字在Android机上不能居中(偏上),IOS上表现居中

原因:Android机 文字排版上 上下自带的“空隙”不一致(上面小于下面),iOS上文字排版上 上下自带的空隙保持一致
解决办法:computed里面判断设备系统,Android机器上,除了设置height=line-height外,再设置padding-top为某一数值(1px-3px)

问题2:外卖需求中有一个获取地址的界面,需要用到 腾讯地图的地址选点 功能,采取的是引用iframe的方案。但是在iOS上地图显示很小

原因:项目整体的适配方案是在meta属性中设置intial-scale进行缩放(flexible.js),于是乎iOS上iframe显示的内容仍然是缩小之后的,范围变大了但是里面的字体、图标变得很小
解决办法:无效的:[color=#ff0000]1、iOS上,通过transformLscale放大----但是整个页面看起来很模糊
有效的2、判断设备系统,如果是iOS,通过人为改变meta标签内容的形式达到“禁止”缩放的效果,相关js如下:[/color]
javascript 代码

描述图如下:(左为Android、右为iOS(未处理))

vue项目--近期总结--“坑”

问题3:在一个vue组件中,需要一个页面跳转,但是不想以一个新的route来跳转,而是在当前页面,以“弹窗”的形式展现。如何做到按下返回键调到当前页而不是之前的页面

解决办法:运用H5 history.pushState人为在历史纪录中插入一条记录;同时也要在当前页面设置onhashchange事件来实现返回到当前页面,关闭该“弹窗”
注意事项:当在“弹窗”页面进行刷新时候,需要在router那边配置一个重定向---至当前页面,不然会找不到页面
相关js如下:javascript 代码

问题4:父组件向子组件传递数据,但是以异步的形式传递,这样的话,子组件如果在接收到参数就立马就行处理的话,拿到的值很大可能上是undefined,会导致出错

解决办法:在子组件中添加watch,,监控props传过来的值的变动,然后再做处理(传过来的值直接反应在页面上,类似{{value}}这种形式可不用理会)。
注意事项:如果传递的数据是数组,数组内部的变化,watch可能监控不了,可以变相采取push方法来实现,例如:
javascript 代码

问题5:vue项目开启了eslint检查,一般情况下语句不能够带“;”,否则报错。但是有的语句必须带一个‘“;”,否则报错。出现了这种矛盾情况

解决办法:在需要带“;”的语句上添加注释,内容是 ‘// eslint-disable-line’,例如:javascript 代码

问题6:如何页面滚动到之前“选择”的页面

解决办法:可使用HTML5 element的原生方法scrollIntoView,以bool值作为参数,默认为true,true代表元素边缘与可视区(视口)顶部对其,false代表元素下边缘与可视区(视口)底部对齐,例如:
javascript 代码

问题7:如何显示正确显示时间?例如:现在时间之后的2.5天,以year-mouth-day的形式展示出来

解决办法:例如:
javascript 代码

问题8:vuex中的数据刷新后消失

原因:vuex保存的也是一个全局变量,刷新后肯定会消失
解决方案:1.重新commit一次(可能会再次拉一次后台请求);2.存入sessionStorge/localStorage等进行持久化存储

问题9:多重for循环中怎么在最内层循环体中跳出最外层循环

解决方案:label语句
javascript 代码

问题10:集中化版本控制系统(如svn)与分布式版本控制系统(如git)较大的区别是什么?

解决方案:0、这个好像和vue没有直接的关系,哈哈
1、svn之类的代码的所有版本、历史记录都在中央服务器中保存,每个人本地都只是一份最新的或是较新的,不能够保存历史记录,万一中央服务器存在问题,这就导致了较大的风险
2、git之类的代码的所有版本、历史记录都被客户端全部提取,每个客户端保存了仓库里的所有的代码,是一次完整的备份,没有此类风险。

问题11:如何使用fiddler来捕获手机端的数据包

解决方案:0、这个好像和vue没有直接的关系,哈哈
1、打开fiddler,Tools-->Options-->Connections-->勾选‘Allow remote computers to connect’-->'Fiddler listen to port',自己设置一个端口
2.打开手机已经连接的wifi(必须和已安装的fiddler的Pc处于同一网络)-->进入高级选项-->IP设置,内容为通过ipconfig得到的本机ip和网关,照填即可-->点击保存
3.在手机上访问任意网络即可发现fiddler可以捕获访问的数据

问题12:css选择器如何确定子元素只有一个,或者是有多个

原因:最近有一个需求是,当子元素只有一个的时候给与特殊的样式;多个时候是另一种样式,纯css实现
解决方案:0、这个好像和vue没有直接的关系,哈哈
1.利用nth-last-child选择器,与nth-child配合使用,只有一个元素时,肯定是第一个元素同时也是最后一个元素,所以可以如下使用:
例如:li:first-child:nth-last-child(1)
2.同理,不止一个元素,可以如下使用:
例如:li:first-child:nth-last-child(n+1),li:first-child:nth-last-child(n+1)~li

问题13:如何查看某一个文件的git提交记录

解决方案:0、这个好像和vue没有直接的关系,哈哈
1 、git log 文件路径,可以显示该文件所有的历史提交记录,并分别显示一个哈希值
2、git show 哈希值(某个提交记录) 文件路径,即可以看到该文件的提交记录详情

问题14:查看npm全局安装在本地的modules以及某一个模块的详细信息

解决方案:0、这个好像和vue没有直接的关系,哈哈
1 、npm list --depth=0 -global
2、npm view moduleName (同4解释)
3、npm view moduleName version/versions(查看服务器端该模块的版本信息/历史版本信息)
4、同3类似 npm info moduleName也可以达到同样的效果,返回的是一个JS对象,包含了该模块所有的具体信息
5、获取本地模块版本信息:npm ls moduleName
6、npm config get registry 获取npm源地址,同理npm config set registry 'xxxxxx'可以设置npm源地址
7、npm cache clean --force 清除缓存,可以解决"Unexpected end of JSON input while parsing near..."的问题
8.~ 会匹配最近的小版本依赖包,比如~1.2.3会匹配所有1.2.x版本,但是不包括 1.3.0
^ 会匹配最新的大版本依赖包,比如^1.2.3会匹配所有1.x.x的包,包括1.3. 0,但是不包括2.0.0
* 这意味着安装最新版本的依赖包

问题15:vue-router导航守卫总结

解决方案:0、这个好像和vue有直接的关系
1.beforeRouteEnter,此时导航还没确认,新的页面组件还没有创建出来,此时支持给next传递一个回调,回调函数里面的第一个参数就是组件实例,如下
beforeRouteEnter (to, from, next) {
next(vm => {
// 通过 vm 访问组件实例
})
}
这也是唯一一个支持给next函数添加守卫钩子,其他的都可以直接取到里面的this值。
beforeRouteEnter传递给next的回调函数会在 导航确认的时候 执行(在DOM更新之前)

已写的比较简略,还有很多问题没有整理出来,续集更上。
一起加油。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复