修改element ui源码，删除node_modules重新npm install 时组件失效

失效原因

（1）直接修改element ui源码的方法，如果删除之前修改的node_modules依赖，重新npm install 时，之前的修改方法会失效。
（2）项目开发，一般是多人协作的方法，由于node_modules文件太大，一般都没有放到服务器上。这样就要求，其他开发人员也需要进行源码的修改，替换各自的node_modules操作才可以使用。

解决办法（重新在项目里开发新的组件）

时间线组件为例

操作步骤：
1、在公共组件目录重新创建自定义一个组件，这里新建一个自定义组件文件夹，创建一个时间线元素的组件，eg：TimeLineItem.vue。同时在创建一个公共组件js 我这里命名为index.js

 

2、在TimeLineItem.vue文件中，写入自己的组件，这里我的改动比较小，就直接粘贴了element ui源码中时间线组件，item.vue的源码 

 3、重新修改后的组件内容如下：

<!--
 * @Descripttion: 重新封装的自定义时间线item组件 
 * @Date: 2022-08-20 11:26:43 
 * @LastEditTime: 2020-09-02 11:41:47
 -->
<template>
  <li class="el-timeline-item">
    <div class="el-timeline-item__tail"></div>

    <div v-if="!$slots.dot"
      class="el-timeline-item__node"
      :class="[
        `el-timeline-item__node--${size || ''}`,
        `el-timeline-item__node--${type || ''}`
      ]"
      :style="{
        backgroundColor: color
      }"
    >
      <i v-if="icon"
        class="el-timeline-item__icon"
        :class="icon"
      ></i>
    </div>
    <div v-if="$slots.dot" class="el-timeline-item__dot">
      <slot name="dot"></slot>
    </div>

    <div class="el-timeline-item__wrapper">
      <div v-if="!hideTimestamp && placement === 'top'"
        class="el-timeline-item__timestamp is-top">
        {{timestamp}}<br/>
        <span class="el-timeline-item-timestamp_span">{{timestampSpan}}</span>
      </div>

      <div class="el-timeline-item__content">
        <slot></slot>
      </div>

      <div v-if="!hideTimestamp && placement === 'bottom'"
        class="el-timeline-item__timestamp is-bottom">
        {{timestamp}}
      </div>
    </div>
  </li>
</template>

<script>
  export default {
    name: 'UserDefinedTimelineItem',

    inject: ['timeline'],

    props: {
      timestamp: String,
      timestampSpan: String,

      hideTimestamp: {
        type: Boolean,
        default: false
      },

      placement: {
        type: String,
        default: 'bottom'
      },

      type: String,

      color: String,

      size: {
        type: String,
        default: 'normal'
      },

      icon: String
    }
  };
</script>

<style lang='scss' scoped>

</style>

其中el-timeline-item-timestamp_span为我自己新增加的内容
4、如何使用自己的组件
（1）局部使用，直接在需要该组件的父组件中，引入该组件,注册之后，之间使用即可

<time-line-item> </time-line-item>

import TimeLineItem from "./TimeLineItem.vue"

components: {
    TimeLineItem
  }

（2）全局注册使用
在公共组件index.js文件里直接引入，然后全局注册

import TimeLineItem from "./TimeLineItem.vue"

export default (Vue) => {
  Vue.component("TimeLineItem", TimeLineItem)
}

在main.js文件中引入，然后使用Vue.use方法 

import timeLineItem  from '@/components/UserDefinedCom/index.js'
Vue.use(timeLineItem)

最后在所需要使用的父组件内直接使用即可

<time-line-item> </time-line-item>