为什么element ui的菜单栏组件引用失败了

img

img

img

全局环境也配置了，就是样式出不来
引用的button组件和container容器组件都没问题

首先，我只看到了你使用elementui的组件，以及你自己定义的路由
其次，你说你全局环境也配置了，那我就想知道，你main里有没有引入并注入使用elementui及其样式文件

可能是以下原因之一：

没有正确引入 Element UI 库。

没有正确引入菜单栏组件。

没有正确使用菜单栏组件的语法。

版本不兼容。

其他代码错误导致菜单栏组件无法正常工作。

  • 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7627656
  • 这篇博客你也可以参考下：element-ui 组件库 button 源码分析
  • 除此之外, 这篇博客: element-UI样式修改button篇中的 element的各种限定： 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

  • 限定的话主要有以下几方面：

    颜色限定：颜色限定主要包含的样式有：字体颜色(color) 背景颜色(background-color) 边框颜色(border-color)

    primary 主要

    success 成功

    info 信息

    warning 警告

    danger 危险

    plain 朴素

    大小限定：大小限定主要包含样式有 字体大小(font-size) 内边距大小(padding)

    medium 中等

    small 小型

    mini 迷你

    形状限定：形状限定主要包含的就是圆角样式实现的(border-radius)

    round 圆角按钮

    circle 圆形按钮

    介绍完按钮限定，接下来就是修改样式了。

    如果是自己从头开始写项目，那么可以使用普通按钮直接使用：.el-button(样式类名)修改样式，button主要有哪些样式上面也有介绍，这里就不赘述了，不过有一点要注意，如果官方给的四种大小没有你想要的，需要自己修改，不要直接修改按钮的高度(height)；上面提到过官方的按钮是靠字体大小(font-size)和内边距(padding)撑起来的，如果直接高度，可能会导致按钮字体不居中，宽度(width)也一样。颜色、字体颜色的都可以自己加。

    但如过是别人的模板，但是又要自己修改样式，就需要把模板中不同的按钮样式改统一了，那么就需要改不同样式的按钮了

    如果是普通按钮，使用.el-button  就好如：

    .el-button {
  background-color: #000;
  color: red;

}

    如果有各种限定的，.el-button 就不好使了，需要在给类也加上同样的限定，如成功按钮就要 .el-button--success 来修改，别的限定也一样类名如下：

    .el-button--primary 主要按钮

    .el-button--success 成功

    .el-button--info 信息

    .el-button--warning 警告

    .el-button--danger 危险

    .el-button--medium 中等

    .el-button--small 小型

    .el-button--mini 迷你

    如：

    .el-button--info,
.el-button--default,
.el-button--cyan,
.el-button--primary,
.el-button--success,
.el-button--warning,
.el-button--danger {
  border: 1px solid #cococo;
  color: red;
}

    以上这些是可以用来修改限定按钮的样式，但是还有几个限定修改方式不是加限定了是加.is-[限定名]，主要有 plain round circle disabled(这个是html按钮本身的属性，虽然有elementui的样式，但是我没有归类到element的限定中)

    如需修改，需要用下面的方式：

    .el-button--primary.is-plain

    如果是还有别的这种方式的限定，继续 . 就好，如主要按钮(primary)+朴素(plain )+不可用就需要

    .el-button--primary.is-plain.is-disabled

    如：

    .el-button--primary.is-disabled:active {
  background-color: #eee;
  border: 1px solid #ccc;
}

    在此就不一一列举了。

    如果有鼠标悬停的，直接使用伪类选择器 :hover就好。

     

    如：

    .el-button--danger.is-disabled:hover{
  background-color: #eee;
  border: 1px solid #ccc;
}
}