修改element ui源码无效

问题场景

vue项目中使用element ui中的环行进度条,需求更改进度条未满部分的背景颜色,保持项目风格一致;
在这里插入图片描述
element ui官方文档并没有暴露方法进行修改未满状态的颜色,于是找到项目node_modules\element-ui\packages\progress\src下的progress.vue进行修改:
在这里插入图片描述

stroke为未满状态下的颜色,更改后重启项目发现并没有用。是因为项目引用的是源码打包后生成的lib文件夹下的代码。
在这里插入图片描述

解决问题

1、将github上element ui源码下载下来

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

下载 完成是一个名为element ui的文件夹
在这里插入图片描述

2、将文件夹用vscode打开并下载依赖
npm install (注意:npm install有时报错,换cnpm install)

下载依赖完成后文件夹下出现node_modules文件夹

3、修改packagesprogress.vue

在这里插入图片描述

4、修改完成后执行 npm run dist

成功编译后生成lib文件夹
在这里插入图片描述

5、把生成的lib文件夹复制到项目路径node_modules\element-ui替换掉lib文件夹,重启项目

未满的进度条颜色由白色变为深色

在这里插入图片描述

我们可以把包发布到npm包管理器

1、进入cmd命令窗口,进入下载的elementui文件夹下,执行npm init,进入重命名包名、版本号

在这里插入图片描述

2、登录npm,执行npm login,输入用户名、密码和邮箱后若报错
在这里插入图片描述
这里执行npm config set registry https://registry.npmjs.org切换镜像

重新输入用户名、密码和邮箱后成功登录
在这里插入图片描述

执行 npm publish 推送发布
在这里插入图片描述

3、将项目中package.json文件中devDependencies, “element-ui”: “^2.15.1”,改为如:
"element-ui-liu": "^2.15.9"
“你的包名”: “^你的版本号”

重启项目

在这里插入图片描述

  • 3
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@才华有限公司

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值