vue调试工具devtoos 初探；vue阿里图标库的引用；解决子组件内容不刷新的问题；

记录几个比较有用的功能点：

一，关于前端调试

可能是我的意识还是在Visual C++层面，在我的理解里面，如果没有单步跟踪，那就不是在编程。看到之前的前端同事开发程序的时候都是不停的用console.log，感觉效率很不高。所以自己开发的时候无论如何也是需要找到一个最佳调试方法的，之前其实研究过 Javascript 结合vue run dev 一起调试，效果还不错，可以直接在webstorm单步跟踪调试JS代码，这个打算下次有机会再介绍，相信有很多同学没有玩过。

这次是看慕课网有一门可说是有一个专门的vue调试工具，就花时间研究了一下：

1，首先是在chrome 浏览器安装插件：chrome://extensions/，一定要按照zip版本的，然后解压缩之后安装：

中间其实出过不少问题，已经想不起来了，还需要修改插件中的manifest.json 文件中的"persistent": true，之前是false。一定要注意，插件解压之后放置到一个不容易删除的位置存放，还不能删除，因为插件运行是有依赖的。

2，装好之后浏览器工具栏可以看到V图标

前端代码main.js中需要增加代码：   Vue.config.devtools = true，否则V图标是灰色的。

点击彩色V图标，调试栏目才会增加一个Vue栏目：

初步用了一下，主要是能够看到各组件的构成以及相关属性，其他的还没有深入用，不知道能否做到单步跟踪。

二，添加阿里图标库到菜单

由于模板系统集成的图标库有限，肯定要扩充，方法其实很简单，框架都考虑好了，只需要去  http://www.iconfont.cn，下载想要的图标，直接下载svg，文件名字也不用改，全部下载完毕之后在文件夹目录下创建dos bat文件：

for %%i in (*.*) do ren "%%i"  icon-"%%i"  

运行bat文件，统一改文件名为icon-*.svg，然后复制到 src/icons/svg 文件夹下，然后就可以直接用了：

名字还是和阿里图标库上的一致，是不是很方便？至于其他界面如何引用图标，后续需要用的时候再研究，应该也会很方便。

 

三，子组件内有对话框的，下次打开不会重新创建，created方法不会触发

这次由于先打开了网关管理的对话框，然后再去增加站点的，由于新增网关需要选择所属站点，而新加的站点并没有在新增网关对话框中出现，因为查询站点是在新增网关对话框的created方法中加载，后来尝试了很多方法试图重新获取站点信息，包括actived等方法都不行，最好找出了如下方法，记录一下：

在子组件对话框中添加handleDialogClose响应关闭事件：

  <el-dialog
    :title="!dataForm.id ? '新增' : ( !editable ? '详情' : '修改') "
    :close-on-click-modal="false"
    :before-close="handleDialogClose"
    :visible.sync="visible">

处理代码如下：

      handleDialogClose () {
        this.$emit('refreshDataList', false)
      },

调用之前就有的refreshDataList，刷新父组件，区别于真实刷新，传值false只是为了统治父组件关闭子组件

在父组件中：<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>，

      getDataList (refresh) {
        console.log(refresh)
        if (!refresh) {
          this.addOrUpdateVisible = false
          return
        }
      }

如此，就能通过父组件动态关闭子组件，确保每次都能重新构建对话框。