elementUI源码修改定制

1.修改elementUI源码

首先从Git上克隆代码或者下载代码包

进入文件夹打开终端或Git Bash Here，运行npm install 安装依赖包。npm run dev 打开网页http://localhost:8085/，会看到elementUI首页

进入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 。

2.定制elementUI

有时我们会觉得elementUI库太大，这时我们可以删减项目不需要的组件达到目的

　　在element文件夹，找到components.json文件，删除项目不要的组件配置即可

原配置

我删减后的配置

这样打包后的lib文件夹就会小很多，这里需要提示一下，因笔者开发模式不是webpack模块化开发，而是每个页面需要用到，故把cnd资源下载下来用，后期发现容器空间不足，才会想办法删减不需要组件。我用到的是打包后的lib/index.js(此文件是所有组件模块的集合)，lib/theme-chalk/index.css(此文件是所有组件模块的样式)，相当于elementUI官网cnd引的两个文件。希望对看到这篇博客的你有所帮助。

有些地方借鉴https://segmentfault.com/a/1190000010932321此博客