vue中node_modules中第三方模块的修改使用详解

当我们使用 Vue 框架进行前端开发时，通常会依赖不同的第三方模块。如果在实际开发过程中，我们发现某一个第三方模块的功能不满足我们的需求，需求修改这个模块。那么如何在 Vue 项目中修改使用第三方模块功能呢？

下面是修改使用 Node_modules 中第三方模块的步骤：

1. 将需要修改的第三方模块从 node_modules 中复制到 src 中

cp -r node_modules/package-name src/package-name

该命令将 node_modules 中的 package-name 模块复制到 src 目录下。此时，我们可以修改 package-name 模块的代码。

2. 修改 package-name 模块的代码

在 src/package-name 目录下，对 package-name 进行代码修改。修改完成后，package-name 模块就变成了我们自定义的模块，我们可以在项目中直接引用修改后的 package-name 模块。

3. 在项目中引用修改后的 package-name 模块

在需要使用修改后的 package-name 模块的文件中引用，引用方式与之前一样：

import package from 'package-name'

这里的 package-name 就是我们修改后的模块名。

下面是一个示例说明：

示例一：修改 Element-UI 中的 el-input 组件的样式

1. 复制 el-input 组件到 src 目录下

sh
cp -r node_modules/element-ui/packages/input src/input

1. 修改 src/input/style/index.scss 文件，添加自定义的样式

css
.el-input {
background-color: #f5f5f5;
}

1. 在项目中引用自定义的 el-input 组件

javascript
import Input from '@/input';
...
components: {
'el-input': Input
},
...

修改后，el-input 组件的背景色就变成了 #f5f5f5。

示例二：修改 lodash 中的某个方法来满足业务需求

1. 复制 lodash 中的该方法到 src 目录下

sh
cp node_modules/lodash/add.js src/lodash_custom/add.js

1. 修改 src/lodash_custom/add.js 文件，添加自定义的代码

``` javascript
import { baseFlatten } from './_baseFlatten.js'
import { isArrayLikeObject } from './isArrayLikeObject.js'
import { last } from './last.js'
import { rest } from './rest.js'

function add (...args) {
const array = baseFlatten(args)
return (isArrayLikeObject(args[0]) ? array : last(args)).reduce((pre, cur) => pre + cur)
}

export default add
```

1. 在项目中引用自定义的 add 方法

javascript
import add from '@/lodash_custom/add'
...
let sum = add(1,2,3) // 6
...

修改后，add 方法的参数可以为任意类型的数组或者多个数字，返回这些数字的和。