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此博客