Vue项目修改第三方依赖中的方法

前置知识

在前端工程化项目中，一定会存在一个package.json 的文件，它就像一个大管家，管理着这个项目的相关信息。其中会dependencies会存储该项目的依赖关系，当我们初始化一个项目时，会npm包管理器会自动把这些依赖下载到node_modules 文件夹内。

需求来源

公司的项目中使用到了某个第三方的库，但该库有个方法Fun有一丝丝不符合项目的需求，因此萌发修改第三方依赖库A方法的想法。

修改方法

1. 直接拷贝该第三方库的所有文件放置到自己的项目中 (不推荐)。

• 缺点: 以我自身需求为例，我本意只想改其中的一个方法Fun， 但却拷贝了整个依赖文件，一下子就增加了项目的总体大小。
• 优点: 拷贝整个依赖到本项目中，修改起来方便—>简单方便且快捷。

2. 使用Vue的extends来继承第三方依赖库

• 缺点: 需要一同把第三方组件使用到的依赖放置到本项目中。
• 优点: 对本项目改动小

实现步骤

这里只介绍方法2的步骤

1. 首先在找到项目存储组件的目录，一般都是components文件夹,并在该目录下新建一个组件A。
2. 在A中引入第三方依赖，并让A继承该依赖

import dragTreeTable from "drag-tree-table";
export default {
  name: "dragTreeTable2",
  extends: dragTreeTable,
  components: {
    row,
    column,
    space,
  },
};
</script>

3. 如果第三方依赖有使用到其他依赖，即一并引入即可(可在node_modules目录下找到该依赖，便可以查看其是否有引入其他文件)。
4. 在methods中重写我们需要改动的方法Fun即可

  methods: {
    filter(x, y) {
      //重写的内容
    },
  },

5. 在需要使用到的地方，引入我们组件创建的组件A，会发现我们已经更改成功第三方依赖库的内容的。

---

总结

其实就是使用了extends 来继承了第三方依赖，然后重写该依赖内部的方法，达到修改第三方依赖中的东西的一个小知识点。