今天早上跟同事确定了一下昨天不懂的业务流程,顺利地搞清楚了,然后继续实现图片展示的功能,但是发现接口返回的数据是空的,所以使用本地图片做为测试数据,发生了意料之外的问题:使用:src=“图片路径”,发现图片无法正常显示,网上查找了资料,发现原来是路径问题,需要搭配require使用(vue :src图片不显示解决办法_:src 不显示_哈哈西西)的博客-CSDN博客),上午实现了基础的样式就下班了。
下午接着上午的工作,由于以前的图片预览的组件过于复杂,不方便复用,所以在Ant Design Vue组件库中找到<a-image>标签实现图片预览的功能,但是当我写进代码中时,发现没有效果,经过各种折腾,发现服务于vue2的Ant Design Vue是1.78版本的,还不支持<a-image>标签,人傻了白折腾那么久。经过查找资料,终于在掘金上查找到了合适的插件(前人铺路系列组件之hevue-img-preview,一款传入地址支持单图多图预览的vue图片预览组件 - 掘金),功能强大、使用简单,抱着开心的心情新建了一个vue2项目,测试成功,十分好用!但是引入到公司的项目中后,又又又出现问题了,npm install始终安装不了这个包,耐着性子仔细看了一下报错信息,发现是依赖包相互冲突了,来来回回地网上查找资料如何解决,发现短时间内无法解决,突发奇想干脆把另外一个项目的hevue-img-preview直接复制到公司项目地node_modules中,经过测试,成功了!!!大致地完成实习的第一个需求。
今天还填了一个坑,vscode中使用ctrl+/对代码进行注释,始终没有反应,网上找了一下解决办法,都没有什么作用。后来受到某篇博客的启发(忘记是哪篇了),在设置中对“注释”的键盘快捷键进行重新设置,发现了问题所在,我习惯于按除号的/,发现vscode默认用得是(?/键),重新设置了一下,问题成功解决!!
还弄懂了npm中-S、-D的区别以及使用场景(npm 命令参数-g ,--save,--save-dev, 的区别_npm -g_枫依流水的博客-CSDN博客)
还有一种前端实现分页效果的方法,还没有看完,后面再看。(使用vue实现分页_vue实现分页功能_haohulala的博客-CSDN博客)