Ruta de aprendizaje básica de Vue 0 (16) -Descripción gráfica detallada en profundidad de la instalación y uso de vue-devTools y casos detallados (con proceso detallado de análisis de código de caso y proceso de iteración de versión)

1. Introducción

Podemos usar las herramientas de depuración del navegador para verificar si los datos solicitados y los encabezados son correctos, pero si los datos están asignados a un componente, podemos usar una herramienta de terceros para verificar.

2.view-devTools

Para facilitar el proceso de desarrollo de Vuedepuración de un programa, además del navegador tradicional que viene con debugherramientas externas, también podemos a través de una serie de Vueextensiones especializadas proporcionadas para depurar

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

Vue.js-devtools(Xiaodi lo compiló, descomprímalo directamente y arrástrelo a la extensión de Google Chrome, tenga en cuenta que debe estar en modo desarrollador), haga clic para descargar

O compile de acuerdo con los pasos del sitio web oficial:

3. Pasos de instalación

1. Primero ingrese la configuración del navegador, haga clic en 扩展程序

2, abra 开发者模式, haga clic 加载已解压的扩展程序o arrastre y suelte la extensión directamente descomprimida

Nota: La extensión descomprimida es Vue.js-devtools_v3.1.6.crx descargado arriba

3. Después de una instalación exitosa, puede ver:

Haga clic en el cuadro rojo para abrir

4, npm run servedespués de iniciar la aplicación, puede ver la esquina superior derecha del navegador de imágenes del complemento Vue, el mapa 红框一, la representación Vue.js devtoolsha comenzado, haga clic en el diagrama 红框二de un vue

4. Utilice

5. Ejemplos

En cuanto al modelo de desarrollo, si Home.vuelo introducimos axios, si se usan muchas páginas axios, cada página debe ser importada, lo que será muy problemático. En segundo lugar, algunas solicitudes de interfaz se usarán para más de una página, por lo que el axioscódigo lógico solicitado se puede unificar. En un lugar, no escriba muerto en un componente.

Escriba un directorio de carpetas específicamente para administrar estas solicitudes.

=> Estas son las normas y hábitos más básicos en el desarrollo normal.

5.1 ejemplo01

\ 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
Rama ： branch05

descripción de confirmación: a1.76 （example01 —— vue-devTools 使用）

día: a1.76

5.2 ejemplo02

A veces, estas URL también pueden cambiar

\ app \ src \ apis \ index.js => La dirección aquí todavía quiere ser administrada de manera uniforme, así que prepare otro archivo

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

El propósito de esto es facilitar la administración y el mantenimiento unificados. Si hay demasiados componentes, están disponibles en varios lugares, y cada lugar necesita ser modificado, lo que es fácil de modificar y pasar por alto.

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

descripción de confirmación: a1.77 (ejemplo02-vue-devTools use-package axios)

día: a1.77

5.3 Optimización

Puede inyectar el axiosobjeto en su propio componente (o encapsularlo directamente en su propio complemento) y luego usarlo directamente:

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

(Se agregará más tarde)