调试工具 vue-devtools Firefox（火狐）

vue-devtools 可以在谷歌浏览器上安装，同样的Firefox也有相同的调试工具，废话少说，直接上图。

安装步骤1

打开Firefox ，可以看到右侧有个打开菜单图标，然后点击附加组件。

图片.png

安装步骤2

进入界面可以看到有搜索框，直接输入dev-tools,会跳转到组件界面。

图片.png

安装步骤3

看到第一个，下周量最多的，就是Even You （作者发布的），进去后啪啪一顿安装。

图片.png 图片.png 图片.png

到这里就完成了安装，跑项目就行了。
等到项目运行起来F12 打开控制台

图片.png

有了vue这个标志就成功了

使用简介

简单一说这个怎么用

componets

首先我们肯定会有vue文件

export default {
  name: 'NonRoad',
  components: { WForm },
  data () {
    return {
      clientHeight: document.body.clientHeight,
      rules: {},
      ............

随便写个vue 文件，名称叫NonRoad,搜索组件名称叫NonRoad，你会发现能找打，点击一下，右侧会显示这个组件相关的data属性和$refs属性，其中data 内会含有router。

图片.png

vuex

这个是会显示该组件使用到的vuex 数据，这里作者没用到所以没有，惊喜不。

图片.png

routing

主要显示当前组件的具体路由数据 从那里来的，要到那里去。

图片.png

以上为作者简单的理解，如果能帮到你，感到高兴。。。