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

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.