关于使用elementui开发vue项目小总结（24栅格宽度溢出，打包部署路径报错）

最新推荐文章于 2024-07-18 11:11:53 发布
最新推荐文章于 2024-07-18 11:11:53 发布
阅读量1.1k 收藏
点赞数 1
分类专栏： vue专栏 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45932733/article/details/108007017
版权
本文总结了使用ElementUI开发Vue项目时遇到的24栅格宽度溢出和打包部署后资源路径报错的问题。对于宽度溢出，解决方案是为父容器设置合适的宽度；对于路径报错，需要在src目录下调整文件路径，并在build对象中配置，对于小图标报错，需修改util.js文件，根据新版本说明进行修正。
摘要由CSDN通过智能技术生成

关于使用elementui开发vue项目小总结（使用cli3创建项目）

1.在使用24栅格布局时，对于宽度溢出问题的解决
<div>
	<el-row>
      <el-col :span="12"><div class="grid-content bg-purple"><line-chart/></div></el-col></
最低0.47元/天 解锁文章
前端小白QAQ
关注
专栏目录
vue3 - vite项目打包部署服务器上线后图片不显示并且路径中存在undefined字眼，本地开发环境下正常显示图像没任何问题，但build编译打包后上传到线上服务器后再打开就不显示了，路径有问题
高级前端工程师
08-18 3877
vue3，vite，图片不显示，图像加载失败，打包后图片路径不对，前面多了一个undefined，本地没问题只要打包上线就报错，vue3 vite项目解决部署线上图片URL失效问题，使用本地图片打包后不显示，本地资源路径，本地图片图标，图标不显示，打包后图片失效的问题，访问图片/图标不显示的问题，vue3+vite打包后图片路径错误不显示，背景图打包之后访问路径错误问题的解决，打包部署到服务器上却显示路径undefined问题，图片url域名错误，导致无法显示，还是报错显示不了，如何解决，无效，还是不行，r
关于ElementUI中使用Layout布局排列一行row的元素溢出问题的解决方案
weixin_44259299的博客
07-20 1370
今天在vue中使用elementui的layout布局制作页面的时候，发现我明明只定义了一行row的col，但是有元素却溢出到了下面一行去了
解决element ui select multiple 超出宽度的问题
壮乡码农
01-29 884
/*解决element ui select multiple 超出宽度的问题*/ .el-select__tags-text { display: inline-block; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
【前端8】element ui常见页面布局：注意事项
最新发布
定期分享我的发现和想法，感谢你的陪伴和支持
07-18 5762
Element UI 是一个基于 Vue.js 的组件库，提供了丰富的 UI 组件和布局工具，帮助开发者快速构建美观、响应式的前端页面。在使用 Element UI 进行页面布局时，有一些常见的注意事项，可以帮助你避免常见的问题，并提升开发效率和用户体验。 本文将介绍这些注意事项，帮助你在使用 Element UI 时更加得心应手。 注意，el-container不能嵌套使用
Vue学习24----ElementUi(Pc框架)的使用
翟浩浩Android专栏
04-10 327
element UI的使用步骤： 1.找官网 http://element.eleme.io/#/zh-CN/component/quickstart 2.安装 cnpm i element-ui -S -S表示 --save 3.在main.js中引入element UI的css 和 插件 import ElementUI from 'element-ui'; im...
element-ui的layout将24等分换为48等分
weixin_30333885的博客
04-18 710
按住ctr箭点击element-ui/packages/theme-chalk/src/index";，再按住ctr贱点击col.scss跳转，将跳转到的col.scss中的24换为48（ctr+r）【针对webstorm】 转载于:https://www.cnblogs.com/xiaoleilei123/p/10728209.html...
ElementUI的row col布局在span超过24时仍并在一起的解决方案
Future1994的博客
12-14 1264
1、首先要注意，row 的 type 必须是 flex。
使用vscode创建Vue2项目的坑一些总结（创建项目，使用局部elementUI配置，sass的安装以及报错解决）
qq_51135343的博客
11-20 1394
Module not found: can’t resolve ‘sass-loader’ in ， vue项目搭建 ，vue踩坑, elementUI , sass, sass报错
【vite+vue3】一个项目包含多个小项目并实现多项目单独打包部署访问
q1ngqingsky的博客
04-06 6730
1. projectA项目和projectB项目中均要保留index.html、main.ts/js 、App.vue 这三个文件可以直接复制粘贴src下的index.html、main.ts/js 、App.vue文件内容，需要注意的是main.ts路径引入的变化,以及路由的路径引入正确与否。公司有两个项目，UI界面以及框架是一致的，且有很多个公用的组件可以共同使用。所以想着在一个大的项目里实现两个小项目：projectA和projectB项目，公共部分提取出来。3. 配置package.json。
Vue3 - Vite 使用 vite-plugin-require-transform 插件运行或打包时出现报错，vue3 + vite 项目执行 build 打包时出现各种问题错误（保证完美解决）
王佳斌
01-01 6019
vue3，vite，vite-plugin-require-transform，打包报错，运行报错，npm run build出现一堆报错，执行打包命令后出现报错怎么办，vue3+vite使用vite-plugin-require-transform插件build打包时报错如何解决，vue3项目中运行打包出现了很多警告提示报错，vue3使用阿里云ali-oss插件sdk导致打包报错解决方法，vue引入ali-oss阿里云oss的sdk运行build打包时报错，vite打包失败，import * as _vi
通过display：block设置span不超出el-col宽度
weixin_41102672的博客
05-24 605
在elementui中，通过display：block设置span不超出el-col宽度
element-ui layout布局 铺满整个空间方法
weixin_47970316的博客
12-14 3896
element-ui 布局铺满整个空间方法
Element：设置el-input宽度大小
热门推荐
az44yao的专栏
07-07 4万+
方法1. 利用Layout布局 下方审批人输入框太长，导致界面像假村花东施 解决办法： 使用Layout中的col组件，并设置其:span属性大小，:span为24时，铺满赤道、为8时就是占1/3，其他以此类推。 <el-form-item label="审批人"> <el-col :span="8"> <el-input v-model="formInline.user" placeholder="审批人">.
vue.js中Element-UI组件 页面布局
qq_15571919的博客
03-06 1392
vue.js中Element-UI组件 之 页面布局 一、开发环境的搭建 （1）普通的开发 第一步 ： 引入 index.css文件 第二步 : 引入elementui。js （2）模块化开发：需要在项目中安装element-ui模块 二、常用布局 el-row 、el-col 可以实现24格栅格布局，如果布局较复杂，可以嵌套使用 el-container 作为 布局容器 （可以嵌套使用） 内部可包含el-header(顶栏） el-aside(侧边栏）,el-main(
关于el-row中gutter属性未生效的原因
weixin_44240448的博客
04-12 2583
出现el-row中gutter属性未生效的几种情况
element-ui el-col 奇数份
qq_36262395的博客
03-11 3118
在elementui中，el-col 默认以24划分，当划分份数为奇数时，24不能整除，如何解决？ 答：定义动态类，结合css解决。 例子：分5份 <el-col :xs="12" :sm="12" :lg="lgSpan" class="card-panel-col" v-for="item in panelData"> <div class="card-panel"> <div class="num">{{item.num}}</.
Element-UI学习之旅-Layout布局
weixin_43387852的博客
04-15 3514
你能获得什么？ 如何安装Element-UI,如何使用Layout布局.
Layout(栅格)布局组件的使用 [ElementUI]
m0_57001006的博客
07-18 2063
在ElementUI中布局组件将页面划分为了多个行(row),每个行中最多有24栏(也就时24列)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值