Analysis on axios's inability to use Vue. use (), axiosvue. use

Analysis on axios's inability to use Vue. use (), axiosvue. use

Preface

I have encountered some problems in using axios recently. I feel it is necessary to share with you the basic knowledge about axios. For details, refer to this article: how to get started with axios, I won't talk much about it below. Let's take a look at the detailed introduction.

Problem

I believe many people will use Vue when using others' components.Vue.use(). For example:Vue.use(VueRouter),Vue.use(MintUI). However, axios does not need to be used.Vue.use(axios). Why?

Answer

Because axios does not have install.

What does it mean? Next we will customize a needVue.use() The install component.

Define Components

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

Custom-global-component is the name of the newly created folder.

Then press ENTER

Cd custom-global-component enter this folder

Npm install the required modules

Npm run dev run project

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

This is the current project directory:

Project directory

1. create folders and files in the example

Project directory

2. Define a component in Loading. vue

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

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

// Import LoadingComponent from './loading. vue' // defines the Loading object const Loading = {// install is the default method. When the component is used, the install method is called and a parameter of the Vue class is passed. Install: function (Vue) {Vue. component ('loading', LoadingComponent) }}// export default Loading

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

// The/index of './components/loading/Index' can be left empty. webpack will automatically find and load the index. If it is another name, you need to write it. Import Loading from '. /components/loading/Index' // use (Loading) is required at this time. If no Vue is written. if you use (), the browser will report an error. You can try Vue. use (Loading)

5. Write the defined component tag <Loading> </Loading> in App. vue.

<template> <div id="app"> 
6. You should understand it here. When using axios, you do not need to useVue.use(axios)The reason is that the developer did not write the install step when encapsulating axios. I don't know why I didn't write it.
Summary
The above is all the content of this article. I hope the content of this article has some reference and learning value for everyone's learning or work. If you have any questions, please leave a message to us, thank you for your support.