element-ui layout布局

本文记录了一位开发者在Vue项目中使用Element UI时遇到的布局异常和样式缺失问题。通过分析,发现是缺少CSS导入导致的。在引入'element-ui/lib/theme-chalk/index.css'后,布局和样式恢复正常,侧边栏布局问题得到解决,按钮样式也显示正确。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天在新建的vue中需要用到el组件的布局,但是侧边栏总会占一行,需要展示的页面会在侧边栏的下边,如下图:
在这里插入图片描述
而且,侧边栏菜单的样式也没有。li标签还有原始的小点,如下:
在这里插入图片描述
(其实在这里就该意识到是css的问题)
然后我新建的一个空项目,复制element官网上的例子,安装element-ui依赖:

npm install --save element-ui 

在main.js中:

import Element from 'element-ui'
Vue.use(Element)

但是还是出现下面的奇怪情况:
在这里插入图片描述
原来还需要在main.js中引入css:

import 'element-ui/lib/theme-chalk/index.css';

然后布局就正常了:
在这里插入图片描述
然后在我的项目中也引入css,布局也正常了:
在这里插入图片描述
el-button的样式也随之显示出来了。。。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值