【con】rounded不起作用(前端bug日记3)

(这个系列改成一个bug一篇了,一天一篇感觉翻不到想找的东西……)

rounded不起作用

问题描述

    想要给下拉菜单(日记2里那个复杂的嵌套模板)去掉圆角,但怎么都不起作用。 试了各种各样的办法,rounded-0,tile,写v-menu里,写v-list里。但除了在元素里直接style属性(这个我没试,感觉还没到那一步),无论怎样都没法显示圆角。 通过查看器发现,css里根本没有rounded-0这个类。 怀疑是Vuetify版本旧了(当时看教程说Vue3不兼容Vuetify【这是日记1之后的内容,就是没写日记的20号,日记1安了Vue3很快就换回去了】,Vue装了2,Vuetify也相应让自动选了配置,猜测不会太新),又装上Vue3+Vuetify3,但这个版本改了好多tooltip都没有(当然也可能因为还没开发完)。

解决

    在尝试各种Vue和Vuetify的版本组合的过程中,想到了“就拿着Vue2+Vuetify2【项目现在的配置】重新建一遍”的主意。因为没指望成功,取“宁把我整不自信了”的意思,项目取名为inconfident。 结果成功了,项目名改为mul-menu-new。

Font Awesome图标不显示

    原来的项目似乎没费什么劲,就显示出了font awesome的图标;而现在重装后不自动显示了。和上面的问题类似,css根本就没有fa类(而且这次更离谱,node_modules里就没有font-awesome)。 在font awesome官网上浪费了不少时间,最后还是参考一篇: npm安装时,包名直接叫font-awesome。不知道官网的@fortawesome/fontawesome-free为什么不能用,但这个能用。 之后在main.js里加上import font-awesome/css/font-awesome.min.css。 然后就显示了。 【后知后觉:是不是因为我照抄了Vuetify官网上的代码,加了-D,然后它就只装在开发模式?而我平常的npm run serve……可是那也是开发模式啊……】

rounded不起作用-新发现

    偶然发现,装载<MenuBar>组件的元素本来是<v-main>,而新项目改成了默认的<v-app>。改回<v-main>后,圆角立刻消失了! 也就是说,问题其实不是项目装错,而是<v-main>和<v-app-bar data-app>的爆炸性配合……话说2.6.0版v-app-bar有data-app这个属性吗? 另外,之前一直在看旧的Vuetify官网,今天调版本才发现。

支线-回收站爆炸

    我有毛病,每当一步走错,就想重新开始。于是我意识到之前项目可能没问题后(而且还一次装对了font awesome!我对一次做对总有种执念),又从回收站捞回了mul-menu。 但可能我删过好几个mul-menu覆盖掉了,或者不知怎么样,反正救回来的mul-menu有好多不对的地方,比如App.vue变成了初始的<HelloWorld>。 于是我庆幸着mul-menu-new还没删,又把这边跑起来了。

继续

    删掉data-app后,菜单整个不弹了! 所以这玩意封装得整个没有痕迹,完全没有文档显式地告诉我每种搭配会发生什么,或者为什么这么设计…… 现在v-app-bar和原来长得不太一样,又很难说出具体的不同;而且,阴影消失了…… 搞了半天没想明白去看范例,嗐,就是多加个<v-app-bar app>……

明天计划

    怎么就凌晨了,该睡觉了。 今天还把组件拆了出来,包括多语言也做了单独的文件。 项目安上了axios,明天开始做HTTP请求。
经验分享 程序员 微信小程序 职场和发展