如何基于vant进行二次开发

为什么要二次开发

最重要的一个问题还是效率问题，团队需要整体的UI风格，相同的配色，相同的功能组件，如果每个人独自开发那就大大浪费人力。虽然vant已经封装的不错了，但距离业务需求还差一点距离。第二点是设计师视觉走查的时候特别耗时，扣像素级别的问题，因此避免前端开发同学多次被折磨，做成统一的完事儿，同时也提升了走查的效率。归根结底，效率是第一生产力！

如何二次开发

有两种选择：
1、基于vant再封装一次组件
2、clone源码，直接改
第二点灵活性大，可以随意定制，甚至更改原来组件的逻辑

原来的组件选项文字是不支持换行的，单纯再封装组件无法满足业务需求，所以必须改源码。上官网把的源码克隆下来。 把依赖安装好就可以直接开发了，开发过程中遇到几个问题。

1、 vant组件图片不能本地化

源码中用到的组件全部是cdn图片，没有本地的图片资源目录，关键是框架本身也不支持。解决办法具体可以看这里，但也没说的很完整。vant的文档是又vant-cli这个项目驱动的，vant本身是组件的源码。所以具体代码代码的规则是由vant-cli控制。因此这里又需要去改vant-cli的源码。

注意，改vant的packages目录下的vant-cli是没用的，因为依赖的是node_modules中的。这里建议把vant-cli私有化了，放到自己的本地npm仓库做定制化改造。

因为打包是用的webpack，所以改webpack的配置文件就行。
在上面的代码加上一条图片的loader就行。注意需要把url-loader和file-loader这两个依赖给安装上，改完之后npm publish，再在vant的项目中更新这个包。

.fit-text {
color: inherit;
width: 100%;
overflow: hidden;
background-image: url('../assets/loading_circle.png');
}

大功告成，接下来看看build会不会有问题。果然编译报错：

error  in ./es/index.js                                                                      下午3:00:41

Module build failed (from ./node_modules/babel-loader/lib/index.js): TypeError: Cannot convert undefined or null to object 

根据issue里面提供的方法，改造build的逻辑就OK。

2、隐藏不需要的组件

直接修改vant.config.js里的菜单入口即可。

只露出自己项目需要的组件，其他的不会对外暴露。

3、新增组件

按照现有组件的规范，编写组件逻辑就行，这里就不展开说了，找一个组件看看源码就一清二楚。

个人知乎，欢迎关注：https://www.zhihu.com/people/iamaddy

欢迎关注公众号【入门游戏开发】