【Web】基于 vue-element-plus-admin 开发时，要注意 element-plus 组件名字大小写

一直在基于 vue-element-plus-admin （以下简称这个框架）开发 web。

这个框架的作者在 template 写 element-plus 组件时，一直用的大驼峰写法。

比如按钮，他写作 ElButton，其实写成 el-button 也是可以的，毕竟 element-plus 官方的实例代码都是这种小写。

一直也搞不明白这两种写法有什么区别。

所以写的时候大小写就混着用了。

这个框架封装了一个卡片样式的组件，名叫 ContentWrap，其实里边就是个 ElCard（el-card）。

ElCard 有个默认的圆角，很小。

我们的项目需要一个大一点的圆角，我就在 ContentWrap.vue 文件的 style 中写了如下代码。

<style>
.el-card {
  border-radius: 10px;
}
</style>

本地 npm run dev 运行项目，达到期望的效果。

结果过几天项目打包上线后，发现卡片的圆角是默认的。

看来 style 中的设定没起作用，猜测可能是大小写的问题。

为了稳妥，只好把 style 写到标签里了。

<ElCard style="border-radius: 10px">

本地效果正常，打包上线后效果也正常。