Vue 0基础学习路线（16）—— 图解深度详述vue-devTools的安装和使用及详细案例（附详细案例代码解析过程及版本迭代过程）

1. 引言

我们可以用浏览器的调试工具，查看请求的数据和头是否正确，但是有没有把数据赋给某个组件，我们可以借助第三方工具查看。

2. vue-devTools

为了更方便的在开发过程中对Vue程序进行调试，除了传统的浏览器自带的 debug 工具以外，我们还可以通过一些专门为 Vue 提供的扩展插件来进行调试

参考：https://github.com/vuejs/vue-devtools

Vue.js-devtools(小迪编译好的，直接解压好后拖入谷歌浏览器的扩展中即可，注意一定要在开发者模式下)，点击下载

或者按官网步骤编译：

3. 安装步骤

1、首先进入浏览器设置，点击 扩展程序

2、开启 开发者模式，点击 加载已解压的扩展程序 或者 直接拖拽已解压的扩展程序

注：已解压的扩展程序就是上面下载的 Vue.js-devtools_v3.1.6.crx

3、安装成功以后就可以看到：

点击红框处开启

4、通过 npm run serve 启动应用以后，即可看到浏览器右上角的 Vue 插件图片，图 红框一 处，表示 Vue.js devtools 已启动，点击图 红框二 的 vue 一项

4. 使用

5. 实例

关于开发模式，如在Home.vue，我们引入axios，如果很多页面都用到axios，则每个页面都需要引入，会很麻烦，其二是有些接口请求不只一个页面会用到，因此axios请求的逻辑代码可以统一放在一个地方，不要在一个组件中写死。

专门写一个文件夹目录，管理这些请求。

=> 这是平常开发的时候最基本的规范和习惯。

5.1 example01

\app\src\apis\index.js

import axios from 'axios'
 
export async function getItems() {
    
    
 
    let rs = await axios({
    
    
        url: '/api/items'
    });
 
    return rs;
}

\app\src\views\Home.vue

<template>
    <div>
        Home
    </div>
</template>

<script>
    import * as apis from '@/apis'

    export default {
    
    
        name: "Home",

        data() {
    
    
            return {
    
    
                items: []
            }
        },

        async created() {
    
    
            let rs = await apis.getItems();

            this.items = rs.data;
        }
    }
</script>

参考：https://https://github.com/6xiaoDi/blog-vue-Novice/tree/a1.76
Branch： branch05

commit description：a1.76（example01——vue-devTools使用）

tag：a1.76

5.2 example02

有的时候可能这些url也可能会发生变化

\app\src\apis\index.js => 这里的地址还想统一管理，则再准备一个文件

\app\src\apis\URLS.js

export default {
    
    
    'ITEMS': '/api/items'
}

\app\src\apis\index.js

import axios from 'axios'
import URLS from './URLS'
 
export async function getItems() {
    
    
    let rs = await axios({
    
    
        url: URLS.ITEMS
    });
 
    return rs;
}

这样做的目的是，方便统一管理和维护，如果组件过多，各个地方都有，每个地方都需要修改，容易修改漏了。

参考：https://https://github.com/6xiaoDi/blog-vue-Novice/tree/a1.77
Branch： branch05

commit description：a1.77（example02——vue-devTools使用-封装axios）

tag：a1.77

5.3 优化

可以把axios对象注入自己的组件（或者直接封装成自己的插件），到时直接使用：

import axios from 'axios'
 
Vue.prototype.$http = axios;

（后续待补充）