Vue 0 basic learning route (16)-Graphical in-depth detailed description of the installation and use of vue-devTools and detailed cases (with detailed case code analysis process and version iteration process)

1 Introduction

We can use the browser's debugging tools to check whether the requested data and headers are correct, but whether the data is assigned to a component, we can use a third-party tool to check.

2.view-devTools

In order to facilitate the development process of Vuedebugging a program, in addition to the traditional browser that comes with debugoutside tools, we can also through a number of specialized Vueextensions provided for debugging

Reference: https://github.com/vuejs/vue-devtools

Vue.js-devtools(Xiaodi compiled it, unzip it directly and drag it into the extension of Google Chrome, please note that it must be in developer mode), click to download

Or compile according to the steps of the official website:

3. Installation steps

1. First enter the browser settings, click 扩展程序

2, open 开发者模式, click 加载已解压的扩展程序or drag and drop directly unpacked extension

Note: The decompressed extension is the Vue.js-devtools_v3.1.6.crx downloaded above

3. After successful installation, you can see:

Click the red box to open

4, by npm run serveafter starting the application, you can see the upper right corner of the Vue plug-in picture browser, map 红框一, the representation Vue.js devtoolshas started, click on the diagram 红框二of a vue

4. Use

5. Examples

Regarding the development model, if Home.vuewe introduce it axios, if many pages are used axios, each page needs to be imported, which will be very troublesome. Second, some interface requests will be used for more than one page, so the axiosrequested logic code can be unified In one place, don't write dead in one component.

Write a folder directory specifically to manage these requests.

=> This is the most basic norms and habits in normal development.

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使用）

day ： a1.76

5.2 example02

Sometimes these URLs may also change

\app\src\apis\index.js => The address here still wants to be managed uniformly, so prepare another file

\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;
}

The purpose of this is to facilitate unified management and maintenance. If there are too many components, they are available in various places, and each place needs to be modified, which is easy to modify and miss.

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

commit description: a1.77 (example02-vue-devTools use-package axios)

day ： a1.77

5.3 Optimization

You can inject the axiosobject into your own component (or directly encapsulate it into your own plug-in), and then use it directly:

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

(To be added later)