如何修改ElementUI源码

链接:https://www.jianshu.com/p/e745787118d0

安装

    首先将ElementUI的官方源码库clone下来

https://github.com/ElemeFE/element.git
cd element
npm install

打包

    安装完依赖后运行打包命令npm run dist
    执行完成后可以发现根目录下多了lib文件夹,这个文件夹中的文件就是打包后的组件及样式,和我们使用npm install element-ui下载下来的依赖包中的lib文件夹内容相同,也就是我们使用时引用的资源。

目录结构

修改

    packages文件夹中存放的就是各种组件源码,可以根据需要去进行修改,修改完成后重新执行npm run dist就会重新打包,覆盖lib文件夹

如果仅仅修改了逻辑部分,没有修改样式的话到这里就完了,如果还想修改源码样式往下看

问题

    修改后将lib文件夹中文件替换你项目中/node_module/element-ui/lib中的文件,即可使用你修改后的组件,如果只是修改了逻辑你会发现一切运行正常,但是如果修改了样式你会发现样式没有生效。

 

 

    /packages/theme-chaik下是elementUI各个组件的样式文件,目录结构如下

image.png

    源码中样式采用sass进行预编译,所以如果要修改源码样式就需要在src文件夹下找到相应的样式进行修改,修改完成后在theme-chalk文件夹下, npm install安装以来,安装完后使用npm run build对样式进行编译和打包,(样式打包使用的是gulp工具),打包后文件会覆盖theme-chalk下的lib文件夹。

    修改完逻辑和样式,并对样式文件进行重打包后,返回根目录下npm run dist即可打包生成最后的文件。完成后将根目录下lib文件夹替换自己项目中/node_module/element-ui/lib即可。

注意:

vue项目中的node-module/element-UI  文件夹中没有build文件夹。所以无法直接修改项目中的element-ui.只能通过上述方式进行修改。

上述方式有一个问题是:eslint语法检测。这个时候需要把eslint关掉。如何关掉呢?

修改改配置文件。忽略掉eslint检测

如果是单纯的vue项目。用这种方式即可:

https://blog.csdn.net/fengshiying/article/details/82081185

也可直接在代码中写注释,忽略掉该部分eslint的检测

只需在代码块的头部尾部分别添加

/* eslint-disable */

即可。

  1. /* eslint-disable */

  2.  
  3. var ******

  4. ****

  5. *****

  6.  
  7. /* eslint-disable */

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值