修改element-ui 加补丁方法，以修改el-input示例_patch-package 修改elementui

示例：修改el-input为空时自动标红，对于不在form内的必填输入起到提醒作用
注：本效果通过以下样式即可实现，本文重在打补丁方法。

  ::v-deep  .el-input__inner {
    color: red !important;
    border-color: red !important;
  }
1
2
3
4

效果

  <div>
    <el-input emptywarn style="width: 100px" v-model="input1" ></el-input>
    <el-input emptywarn style="width: 100px" v-model="input2" ></el-input>
  </div>
1
2
3
4

步骤

思路：修改node modules中elment-ui中源码，利用patch-package生成补丁，在npm install之后利用补丁合并修改。

1. 修改elment-ui中源码，项目run dev运行模式下，样式引用elment-ui/package/themchalk/src
   ，run build 模式样式文件在elment-ui/lib/themchalk 如果只修改样式，可以直接改对应文件
   。 非仅修改样式改动的文件较多，推荐下载源码修改，生成dist文件，替换有改动的文件。
   1.1 下载elment-ui,git clone git@github.com:ElemeFE/element.git
   1.2 按需修改，本例修改如下
   packages/input/src/input.vue

props 添加  emptywarn: Boolean,
method 添加
      inputEmptywarn() {
        return this.emptywarn && (this.value === null || String(this.value) === '');
      },
动态class添加如下图      
1
2
3
4
5
6

packages/theme-chalk/src/input.scss

1.3 生成目标文件
elementui 建议node v11 开发，否则容易gyp err， node-sass 版本问题等。
推荐安装 nvm管理node版本，否则替换node11后原来的项目node出问题
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
安装完成后
nvm install 11 （安装node11） （后续可以nvm ls 查看版本 nvm use 切换）
node -v 查验
element根目录 yarn install （npm install 容易出webpack版本依赖等问题）
npm run dev 验证
npm run dist 生成lib目录
根据修改内容的关键词ide全局搜索查看都修改了那些文件，逐一替换项目中nodelmodule中对应文件。
lib和package都要各自对应替换
替换后在自己项目验证功能（此时的修改已经可用，但是npm intall会重置nodelmodule）
1.4 生成补丁，持久化修改
npm intsall patch-package
npx patch-package element-ui 会多出patches文件夹，里面会生成patch文件
package.json文件scripts字段内添加
“postinstall”: “patch-package” （表示npm install后自动应用自己的patch文件合并到node modules）
1.5 验证
npm unintsall element-ui
npm intsall element-ui
npm intsall 修改依旧有效

其他

如果修改在dev有效线上无效，说明element lib下没替换完整

如果引起ide对element标签不索引，原因很多，可将ide设置这俩去掉重新勾选下。不能的话参考
https://www.cnblogs.com/imyjy/p/16922739.html