Regarding issues related to Vue.use in axios

This article mainly introduces to you the relevant information about the inability to use Vue.use() in axios. The article introduces it in detail through the example code. It has certain reference learning value for everyone's understanding and learning. Friends who need it can Reference

Preface

I have been learning axios recently and encountered some problems during use. I feel it is necessary to share with everyone, about For the basic knowledge of axios, you can refer to this article: Basic introductory usage tutorial of axios. I won’t say much below, let’s take a look at the detailed introduction.

Question

I believe many people will use Vue.use()## when using Vue to use other people’s components. # . For example: Vue.use(VueRouter), Vue.use(MintUI). But when using axios, you don’t need to use Vue.use(axios), you can use it directly. Then why is this?

Answer

Because axios does not install.

What does that mean? Next, we customize a component that requires

Vue.use() , that is, a component with install. You will understand it after reading this.

Define components

Generate template vue init webpack-simple custom-global-component

custom-global-component is The name of the new folder

Then press Enter

cd custom-global-component to enter the folder

npm install Install the modules needed this time

npm run dev Run the project

If it can be opened normally, proceed to the next step

This is the current project directory:

Project directory

1. Create the folders and files as shown below

Project directory

2. Define a component in Loading.vue

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

3.Introduce Loading.vue into jndex.js and export

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

4.Introduce the index under the loading file in main.js

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

5. Write the defined component tag

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

6 in App.vue. Everyone should understand when you see this. When using axios, The reason why it can be used directly without using

Vue.use(axios) is because the developer did not write the install step when encapsulating axios. As for why it was not written, that is unknown.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement multiple file downloads in WeChat applet

Explain the Object object in JS in detail

How to use vue.js to realize that the pop-up box only bounces once

Detailed interpretation of the trie prefix tree in javascript

Detailed interpretation of todoMVC code in Vue

The above is the detailed content of Regarding issues related to Vue.use in axios. For more information, please follow other related articles on the PHP Chinese website!