修改npm包的源码并发布

最近使用iview的时候遇到了问题,框架本身缺少功能,需要进行修改,于是根据网上的教程修改了iview的源码并且发布到了npm上,过程中遇到了一些问题,这里记录一下

起因是Cascader这个组件需要有一个鼠标移上去显示title的效果,我现在鼠标移到江苏上希望能显示一个小标题

<Cascader :data="data" :value.sync="value1" @on-change="setTitle" >
    </Cascader>

如果是element的话很好做,因为element组件中如果有嵌套的话会在html代码中显示,那么只要在对应的li标签加上:title绑定数据就行了,但是iview有点坑,直接一个大组件,里面没有对应的html代码,直接用:title绑定,只有最外层有效果,里面的没效果,想直接操纵dom又因为vue的数据刷新导致dom丢失绑定的事件,经过思考决定修改iview的源码实现效果

在node_modules文件夹中找到了iview,在在components文件夹下找到了cascader组件,修改起来倒是很简单,在其子组件casitem中的li标签加上:title="data.label"即可
但是直接改动node_modules是不起效果的,经过查询,决定把修改后的iview当作自己的包发布到npm上,在项目里面用自己的包,过程如下:

1. 首先在github上pull iview的源码到本地
2. 修改源代码,改动package.json里面的名称,作者,版本号,其实如果改动代码能够完善框架的话可以先fork然后联系作者pull一下,但是我这里急着要用就干脆改成自己的
3. npm login,输入用户名,密码,邮箱,如果报错的话有可能是源出错,因为国内用的是npm的淘宝镜像,登陆需要切换到npm的官方源,命令是npm config set registry https://registry.npmjs.org
4. 运行npm publish上传到npm
   打开npm网站,就能看到自己的包了.
   回到项目,在package.json中把iview换成自己包的名字,npm install.
   main.js中也要修改以下

//iview-mz是我的包名
import iView from 'iview-mz';
import 'iview-mz/dist/styles/iview.css';    

到这里,修改npm依赖包的源码算是初步有了认识,以后会尝试封装自己的组件发布到npm上