基于@vue/cli3的收获

前段时间结构升级,公司的业务逐渐开始由CS转为BS,对应的框架也得升级,大牛对现有已经拥有的功能进行整合,以供后续使用...

但是后续我惊喜的发现,现在用的居然是基于vue-cli老版脚手架

emmm.. 还阔以

继续查看,里面还是用着即将被淘汰的slot 和 slot-scope 特性,word天哪,好歹也是最新写的公司前端架子,拥抱新版本造不造,没办法,毕竟vue3现在已经处于待产期了,应该尊重一下时代

于是我自己利用闲暇时光基于@vue/cli3脚手架写了一些东西,以备后续之需;

下面是我进行的一些小的封装

图片路径

大家都知道,因为业务层面一些图片路径是不方便直接在img[src]直接写的,所以,我们要使用import和require进行本地导入,然后通过v-bind:src赋与img,但是总有几个情况是状况外的,比如:

其他端新建的新模块,要在主页控制台进行图标展示,但是这个图标只在web端展示,创建新模块时并没有任何图标的字段产生(我先翻个白眼)

这么坑爹的需求就产生了,每个模块有对应的图标图片,创建时压根就没有任何一个描述图片的数据,就导致我要根据不同的模块name(不要问我为什么不是模块id,因为id正式和测试完全不同)

这样的话就导致每次其他端创建新的模块,我这边就要根据不同模块重新构建打包部署,因为当新建模块后,模块name对应的图标不存在,然后require会直接贴心直接报错

Module not found: Error: Can't resolve xxx in xxxx.vue 进而导致模块入口完全都不渲染了

为了磨练自己(偷懒),我还是使用当找不到对应图片时,使用备用图标,我直接借力打力 你报错,我就让你报!!!

 let icon;
  try {
    icon = require(`./assets/${cn}.png`);
  } catch (error) {
    icon = require(`./assets/default.png`);
  }

直接通过try catch特性直接将图标附给正确的路径

工作繁忙,笔记稍后再记