Itinéraire d'apprentissage de base Vue 0 (16) -Description détaillée détaillée de l'installation et de l'utilisation de vue-devTools et des cas détaillés (avec processus d'analyse détaillée du code de cas et processus d'itération de version)

1. Introduction

Nous pouvons utiliser les outils de débogage du navigateur pour vérifier si les données et en-têtes demandés sont corrects, mais si les données sont affectées à un composant, nous pouvons utiliser des outils tiers pour vérifier.

2. vue-devTools

Afin de faciliter le processus de développement de Vuedébogage d'un programme, en plus du navigateur traditionnel fourni avec debugdes outils externes, nous pouvons également via un certain nombre d' Vueextensions spécialisées fournies pour le débogage

Référence: https://github.com/vuejs/vue-devtools

Vue.js-devtools(Compilé par Xiaodi, décompressez-le directement et faites-le glisser dans l'extension de Google Chrome. Notez qu'il doit être en mode développeur), cliquez pour télécharger

Ou compilez selon les étapes du site officiel:

3. Étapes d'installation

1. Entrez d'abord les paramètres du navigateur, cliquez sur 扩展程序

2, ouvrez 开发者模式, cliquez 加载已解压的扩展程序ou faites glisser et déposez l'extension directement décompressée

Remarque: l'extension décompressée est le Vue.js-devtools_v3.1.6.crx téléchargé ci-dessus

3. Une fois l'installation réussie, vous pouvez voir:

Cliquez sur la case rouge pour ouvrir

4, npm run serveaprès avoir démarré l'application, vous pouvez voir le coin supérieur droit du navigateur d'image du plug-in Vue, carte 红框一, la représentation Vue.js devtoolsa commencé, cliquez sur le diagramme 红框二d'une vue

4. Utilisez

5. Exemples

Concernant le modèle de développement, si Home.vuenous l'introduisons axios, si de nombreuses pages sont utilisées axios, chaque page doit être importée, ce qui sera très gênant. Deuxièmement, certaines requêtes d'interface seront utilisées pour plus d'une page, donc le axioscode logique demandé pourra être unifié En un seul endroit, n'écrivez pas mort dans un composant.

Écrivez un répertoire de dossiers spécifiquement pour gérer ces demandes.

=> Ce sont les normes et habitudes les plus élémentaires du développement normal.

5.1 exemple01

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

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

jour ： a1.76

5.2 exemple02

Parfois, ces URL peuvent également changer

\ app \ src \ apis \ index.js => L'adresse ici veut toujours être gérée uniformément, alors préparez un autre fichier

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

Le but est de faciliter la gestion et la maintenance unifiées: s'il y a trop de composants, ils sont disponibles à divers endroits, et chaque endroit doit être modifié, ce qui est facile à modifier et à manquer.

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

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

jour ： a1.77

5.3 Optimisation

Vous pouvez injecter des axiosobjets dans vos propres composants (ou les encapsuler directement dans vos propres plug-ins), puis les utiliser directement:

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

(À ajouter plus tard)