如何在自己的项目中调试element ui的源码

补充一种新方式

table或其他组件也可以用该方式进入element ui的源码

console.log(this.$refs.elTable.clearSelection)

elTable表示table组件的ref值, clearSelection是table组件提供的一个方法, 此时点击chrome输出的那段内容,就可以直接进入源代码了

我是全量引入方式

一. 取消element ui的全局引入

即注释掉这段代码

// import ElementUI from 'element-ui';
// Vue.use(ElementUI);

二. 保留element ui样式的引入

即保留这段代码

import 'element-ui/lib/theme-chalk/index.css';

三. 对需要调试的组件进行单独引入

就像这样:

<template>
  <div class="about">
    <el-dropdown>
      <span class="el-dropdown-link">
        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>黄金糕</el-dropdown-item>
        <el-dropdown-item>狮子头</el-dropdown-item>
        <el-dropdown-item>螺蛳粉</el-dropdown-item>
        <el-dropdown-item disabled>双皮奶</el-dropdown-item>
        <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import ElDropdown from 'element-ui/packages/dropdown'
import ElDropdownMenu from 'element-ui/packages/dropdown-menu'
import ElDropdownItem from 'element-ui/packages/dropdown-item'

export default {
  components: {
      'el-dropdown': ElDropdown, 
      'el-dropdown-menu': ElDropdownMenu, 
      'el-dropdown-item': ElDropdownItem
  }
}
</script>

四. 然后再进入对应的源代码文件, 加入debugger调试

我是通过插件babel-plugin-component按需引入的

一. 取消对需要调试组件的按需引入

改为这种引入方式

<template>
  <div class="about">
    <el-dropdown>
      <span class="el-dropdown-link">
        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>黄金糕</el-dropdown-item>
        <el-dropdown-item>狮子头</el-dropdown-item>
        <el-dropdown-item>螺蛳粉</el-dropdown-item>
        <el-dropdown-item disabled>双皮奶</el-dropdown-item>
        <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import ElDropdown from 'element-ui/packages/dropdown'
import ElDropdownMenu from 'element-ui/packages/dropdown-menu'
import ElDropdownItem from 'element-ui/packages/dropdown-item'

export default {
  components: {
      'el-dropdown': ElDropdown, 
      'el-dropdown-menu': ElDropdownMenu, 
      'el-dropdown-item': ElDropdownItem
  }
}
</script>

如果缺少样式， 那么先全量引入一次element-ui的样式, 不然一个个引入太麻烦了

现在你就可以愉快的debug了

为什么要调试element ui的源码?

• 用于尽可能快的找到问题的根源，以及看能否通过其他方式绕过这个问题。毕竟时间不等人。

• 去理解element ui组件的实现原理。能力的增强通常就是这么不知不觉。