In Bezug auf Probleme im Zusammenhang mit Vue.use in Axios

Dieser Artikel stellt Ihnen hauptsächlich die relevanten Informationen zur Verwendung von Vue.use() in Axios vor Ich brauche es Referenz

Vorwort

Ich habe kürzlich Axios gelernt und bin bei der Verwendung auf einige Probleme gestoßen. Ich halte es für notwendig, es zu teilen Mit allen. Informationen zu den Grundkenntnissen von Axios finden Sie in diesem Artikel: Grundlegendes Einführungs-Tutorial zu Axios. Ich werde unten nicht viel sagen, werfen wir einen Blick auf die detaillierte Einführung.

Problem

Ich glaube, dass viele Leute Vue.use() verwenden werden, wenn sie Vue verwenden, um die Komponenten anderer Leute zu verwenden. Zum Beispiel: Vue.use(VueRouter), Vue.use(MintUI). Wenn Sie jedoch Axios verwenden, müssen Sie Vue.use(axios) nicht verwenden und können es direkt verwenden. Warum ist das dann so?

Antwort

Weil Axios nicht installiert wird.

Was bedeutet das? Als nächstes passen wir eine Komponente an, die Vue.use() erfordert, also eine Komponente mit Installation. Nachdem Sie dies gelesen haben, werden Sie es verstehen.

Komponente definieren

Vorlage Vue Init Webpack-simple Custom-Global-Component generieren

Custom-Global-Component ist Benennen Sie den neuen Ordner

und drücken Sie die Eingabetaste

cd custom-global-component. Geben Sie den Ordner

npm install ein. Installieren Sie die diesmal benötigten Module

npm run dev Führen Sie das Projekt aus

Wenn es normal geöffnet werden kann, fahren Sie mit dem nächsten Schritt fort

Dies ist das aktuelle Projektverzeichnis:

Projektverzeichnis

1. Erstellen Sie die Ordner und Dateien wie unten gezeigt

Projektverzeichnis

2. Definieren Sie eine Komponente in Loading.vue

<template>
 <p class="loading-box">
 Loading...
 </p>
</template>

3. Führen Sie Loading.vue in jndex.js ein und exportieren Sie

// 引入组件
import LoadingComponent from './loading.vue'
// 定义 Loading 对象
const Loading={
 // install 是默认的方法。当外界在 use 这个组件的时候，就会调用本身的 install 方法，同时传一个 Vue 这个类的参数。
 install:function(Vue){
 Vue.component('Loading',LoadingComponent)
 }
}
// 导出
export default Loading

4. Fügen Sie den Index unter der Ladedatei in main.js ein

// 其中'./components/loading/index' 的 /index 可以不写，webpack会自动找到并加载 index 。如果是其他的名字就需要写上。
import Loading from './components/loading/index'
// 这时需要 use(Loading)，如果不写 Vue.use()的话，浏览器会报错，大家可以试一下
Vue.use(Loading)

5 Das definierte Komponenten-Tag

<template>
 <p id="app">
 <h1 id="vue-loading">vue-loading</h1>
 <Loading></Loading>
 </p>
</template>

6 Sie sollten es verstehen, wenn Sie dies sehen. Der Grund, warum es direkt ohne verwendet werden kann Die Verwendung von Vue.use(axios) liegt daran, dass der Entwickler den Installationsschritt beim Kapseln von Axios nicht geschrieben hat. Warum es nicht geschrieben wurde, ist unbekannt.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie mehrere Dateidownloads in WeChat-Miniprogrammen

Erklären Sie das Object-Objekt in JS im Detail

So verwenden Sie vue.js, um zu erkennen, dass das Popup-Fenster nur einmal angezeigt wird

Detaillierte Interpretation des Trie-Präfixbaums in Javascript

Detaillierte Interpretation des todoMVC-Codes in Vue

Das obige ist der detaillierte Inhalt vonIn Bezug auf Probleme im Zusammenhang mit Vue.use in Axios. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!