如何修改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 */