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

irpas 02-07 1417

失效原因

（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、重新修改后的组件内容如下：

<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>