修改ElementUI源码小计

定制Element-UI按钮样式
本文介绍如何通过修改Element-UI源码来自定义按钮样式,包括克隆仓库、安装依赖、定位并修改按钮组件等步骤。

在使用element-ui的时候,有些功能不能满足我们的需求,就需要修改源码来满足。阅读官方给的教程,对于我这小菜鸟过于简略,结合自己的实践整理一下修改方法:

克隆element官方的仓库到本地

git clone https://github.com/ElemeFE/el...

下载到本地之后安装依赖包

cd element && npm install
npm run dev

依赖包安装成后在 默认会在 http://localhost:8085/打开本地网页,会看到element首页

进入element文件夹,packages文件夹就是我们要修改源码的目录文件夹

比如我们进入 button文件夹里面的src文件,找到button.vue,我们修改class="el-button",添加class="el-button el-button-customize"一个自定义的class,然后保存。切换本地element首页,找到button组件,可以用审查元素查看,就会看到class="el-button el-button-customize"已经被修改了。

切换到命令行工具 执行

npm run dist

命令行执行完毕,会在element文件夹里面生成lib文件夹

复制lib文件夹到自己的项目目录

找到node_modules并进入,找到element-ui文件夹替换里面的lib文件夹

验证是否成功

进入自己的项目文件目录,打开并运行项目,然后找到任意的button组件,验证button是否添加了自定义的el-button-customize 。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值