Concernant les problèmes liés à Vue.use dans axios-js tutoriel-php.cn

Concernant les problèmes liés à Vue.use dans axios

亚连

Libérer： 2018-06-12 12:57:51

original

1843 Les gens l'ont consulté

Cet article vous présente principalement les informations pertinentes sur l'impossibilité d'utiliser Vue.use() dans axios. L'article le présente en détail à travers un exemple de code. Il a une certaine valeur d'apprentissage de référence pour la compréhension et l'apprentissage de tous. j'en ai besoin peut Référence

Avant-propos

J'ai récemment appris axios et j'ai rencontré quelques problèmes lors de son utilisation. Je pense qu'il est nécessaire de le partager. avec tout le monde. À propos Pour les connaissances de base d'axios, vous pouvez vous référer à cet article : Tutoriel d'introduction de base d'axios Je ne dirai pas grand-chose ci-dessous, jetons un œil à l'introduction détaillée.

Problème

Je pense que beaucoup de gens utiliseront Vue.use() lorsqu'ils utiliseront Vue pour utiliser les composants d'autres personnes. Par exemple : Vue.use(VueRouter), Vue.use(MintUI). Mais lorsque vous utilisez axios, vous n'avez pas besoin d'utiliser Vue.use(axios) et pouvez être utilisé directement. Alors pourquoi ça ?

Réponse

Parce qu'axios ne s'installe pas.

Qu'est-ce que cela signifie ? Ensuite, nous personnalisons un composant qui nécessite Vue.use() , c'est-à-dire un composant avec installation Vous le comprendrez après avoir lu ceci.

Définir le composant

Générer un modèle vue init webpack-simple custom-global-component

custom-global-component est Nommez le nouveau dossier

et appuyez sur Entrée

cd custom-global-component Entrez le dossier

npm install Installez les modules nécessaires cette fois

npm run dev Exécutez le projet

S'il peut être ouvert normalement, passez à l'étape suivante

Voici le répertoire actuel du projet :

Répertoire du projet

1. Créez les dossiers et fichiers comme indiqué ci-dessous

Répertoire du projet

2. Définir un composant dans Loading.vue

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

Copier après la connexion

3. Introduire Loading.vue dans jndex.js et exporter

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

Copier après la connexion

4. Introduisez l'index sous le fichier de chargement dans main.js

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

Copier après la connexion

5. Écrivez la balise de composant définie

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

Copier après la connexion

dans App.vue. lorsque vous utilisez axios, la raison pour laquelle vous pouvez l'utiliser directement sans utiliser Vue.use(axios) est que le développeur n'a pas écrit l'étape d'installation lors de l'empaquetage d'axios. Quant à savoir pourquoi il n’a pas été écrit, cela est inconnu.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.