【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官网上浪费了不少时间，最后还是参考一篇CSDN：
  • 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请求。