The problem

Many people use vue.use () when using other people’s components with Vue. Examples: vue.use (VueRouter), vue.use (MintUI). But with Axios, you don’t need to use vue.use (axios), you can just use it. So why is that?

The answer

Because Axios does not install.

What does that mean? Use () : use(); use() : use(); use() : use();

Define the components

Vue init webpack-simple custom-global-component custom-global-component to create the template vue init webpack-simple custom-global-component custom-global-component to create the new folder name and press CD custom- global-Component Go to the NPM install folder to install the required module. NPM run dev If the running project can be opened, go to the next step

Here is the current project directory:

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

3. Import loading. vue into index.js and export it

// Import LoadingComponent from'./loading.vue'// Define Loading object const Loading={// install is the default method. When the outside world uses the component, it calls its own install method and passes an argument to the Vue class. install:function(Vue){
        Vue.component('Loading'LoadingComponent)}} // Exportexport default Loading
Copy the code

4. Import the index under loading file into main.js

/ / which'./components/loading/index'Webpack will automatically find and load the index. If it's any other name, it needs to be written. import Loading from'./components/loading/index'Use (Loading); use(Loading); use(Loading);Copy the code

5. Write the defined component label to app. vue

<template>
  <div id="app">
    <h1>vue-loading</h1>
    <Loading></Loading>
  </div>
</template>
Copy the code

Vue.use(axios) can be used directly because the developer did not write install step when encapsulating axios. Why it wasn’t, that’s unclear.