修改ant-design-vue源码

需求背景

vue2项目,ant-design-vue 1.7.8
table组件如果左边列固定,滚动右边列,滚动的时候大概率出现行对不齐

image.png

网上找了一堆方法,mixin啥的也没生效,最后发现还是修改源码比较省事.
由于vue2 antvue 1.X版本后面已经停止维护了,所以只能自己来.
博客以ant-design-vue 1.7.8为例子修改,别的版本原理类似

1.下载源码

我们先进入源码github

image.png

点击tags按钮,找到自己想要在哪个版本上修改源码就点哪个版本.

image.png

然后下载源码压缩包

2.修改源码

先执行npm install
再执行npm run dev
项目就跑起来了.
跑起来后,根据自己需求修改源码.

改好源代码后,查看package.json,观察项目是怎么打包的.

image.png
我们观察这个package.json发现,这个项目如果你改好源代码后,
需要先执行npm run compile,
再执行npm run dist就行了.

每次修改完源码,都要执行一遍npm run compile重新编译,再执行npm run dist重新打包

3.落地实战

若是项目开发过程中需要修改源码,分两种情况
第一种:前端项目不在服务器打包,而是本地打包传到服务器
卸载原来的插件
npm uninstall ant-design-vue
然后在src下面建个目录,把下载的源码压缩包解压缩放进去,在里面直接修改就好
虽然占用空间大,但简单省事
第二种:前端项目是服务器脚本打包(比如jenkins)
github建个项目,然后把插件源码放进去
然后在github建的项目里修改源码,
package.json里要把项目的name和version改成自己的,
如果有lock文件,要保持一直
改好之后,控制台登录npm,
然后执行npm public发布出去.

第二种修改源码,
建议先在项目里对node_modules的ant-design-vue进行直接源码修改
确定生效后,再去新建的源码项目里找到对应的文件,直接代码覆盖过去.

image.png

比如博主这次要改handleWheel这个函数里面的代码,直接先搜索handleWheel,定义到代码后再修改.然后重新编译打包,发布到npm上.
博主发布的名字叫ant-design-vue-v1-table_scroll

4.替换ant-design-vue

我们按照第三步里的第二种方法,发布到npm后.就可以先卸载项目原来装的ant-design-vue了
然后执行npm install ant-design-vue-v1-table_scroll,安装修改后的插件.
然后在项目文件全区搜索ant-design-vue,对应替换成ant-design-vue-v1-table_scroll.

image.png