element源码调试

一直用vue开发，PC端的后台系统使用的UI库一直是element，以前也没想过什么情况需要去看源码调试源码，反正就是一个UI库，研究API就是了。

后来发现，有时候发现了一些问题，网上的文章所有的答案都一样，很少去验证，这时候要自己去看看源码或者调试一下。上个星期遇见说element的form表单用v-if会造成校验失败，当然，API很明确的给出了动态删减表单的方法，直接用v-if当然是一个偷懒取巧的方法，不过还是去研究了一下怎么调试element源码。

先去GitHub下载element的代码，建议直接下载压缩包，我用git拉好慢。下载之后进入目录执行install初始化，建议使用npm，虽然比较慢，但是不会出错。用cnpm试了很多次都会出现Cannot find module 'chokidar’的错误，需要手动下载这个依赖之后再启动，而且不一定能成功，有可能还需要到examples里面启动，反正这个项目用cnpm乱得很，不建议使用。

npm run dev 启动成功之后：

打开8085端口就可以直接访问。

接着就是看examples目录，我们看到的element官网就是在这个目录里面，页面代码在docs下面的zh-CN，页面都是.md文件。不同语言版本都在，可以自己修改看看。

接下来就是调试组件源码了，组件的源码都在packages里面，找到对应的组件，修改一下代码看一下响应。

这边主要是看看form表单用v-if出错的问题，看看源码：

this.$on(‘el.form.addField’, (field) => { if (field) { this.fields.push(field); }});

初始化的时候就把需要校验的添加到数组里面，校验的方法validate直接循环去校验，中间除了调用提供的动态添加删除的方法之外没有其他方法更新这个fields，所以用v-if会造成校验失败。

看了看element的源码，发现如果自己想撸其中某一个组件，对着element的源码，很容易就能造一个差不多的组件。