關(guān)于axios不能使用Vue.use()淺析
前言
最近在學(xué)習(xí)axios，在使用過程遇到了一些問題，覺著有必要給大家分享下，關(guān)于axios的基本知識(shí)大家可以參考這篇文章：axios基本入門用法教程 ，下面話不多說了，來一起看看詳細(xì)的介紹吧。
問題
相信很多人在用Vue使用別人的組件時(shí)，會(huì)用到 Vue.use() 。例如：Vue.use(VueRouter) 、 Vue.use(MintUI) 。但是用 axios時(shí)，就不需要用 Vue.use(axios) ，就能直接使用。那這是為什么吶？
答案
因?yàn)?axios 沒有 install。
什么意思呢？接下來我們自定義一個(gè)需要 Vue.use() 的組件，也就是有 install 的組件，看完之后就明白了。
定義組件
生成模版 vue init webpack-simple custom-global-component
custom-global-component 為新建的文件夾名稱
然后一路回車
cd custom-global-component 進(jìn)入該文件夾
npm install 安裝本次需要的模塊
npm run dev 運(yùn)行項(xiàng)目
如果能正常打開，進(jìn)行下一步
這是當(dāng)前項(xiàng)目目錄：
項(xiàng)目目錄
1.創(chuàng)建如下圖中的文件夾和文件
項(xiàng)目目錄
2.在 Loading.vue 中定義一個(gè)組件
<template> <div class="loading-box"> Loading... </div> </template>
3.在 jndex.js 中 引入 Loading.vue ，并導(dǎo)出
// 引入組件
import LoadingComponent from './loading.vue'
// 定義 Loading 對(duì)象
const Loading={
// install 是默認(rèn)的方法。當(dāng)外界在 use 這個(gè)組件的時(shí)候，就會(huì)調(diào)用本身的 install 方法，同時(shí)傳一個(gè) Vue 這個(gè)類的參數(shù)。
install:function(Vue){
Vue.component('Loading',LoadingComponent)
}
}
// 導(dǎo)出
export default Loading
4.在 main.js 中引入 loading 文件下的 index
// 其中'./components/loading/index' 的 /index 可以不寫，webpack會(huì)自動(dòng)找到并加載 index 。如果是其他的名字就需要寫上。 import Loading from './components/loading/index' // 這時(shí)需要 use(Loading)，如果不寫 Vue.use()的話，瀏覽器會(huì)報(bào)錯(cuò)，大家可以試一下 Vue.use(Loading)
5.在App.vue里面寫入定義好的組件標(biāo)簽 <Loading></Loading>
<template> <div id="app"> <h1>vue-loading</h1> <Loading></Loading> </div> </template>
6.看到這兒大家應(yīng)該就明白了吧，用 axios時(shí)，之所以不需要用 Vue.use(axios) ，就能直接使用，是因?yàn)殚_發(fā)者在封裝 axios 時(shí)，沒有寫 install 這一步。至于為啥沒寫，那就不得而知了。
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
vue elementUI table 自定義表頭和行合并的實(shí)例代碼
這篇文章主要介紹了vue elementUI table 自定義表頭和行合并的實(shí)例代碼，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
vue如何實(shí)現(xiàn)pc和移動(dòng)端布局詳細(xì)代碼
這篇文章主要給大家介紹了關(guān)于vue如何實(shí)現(xiàn)pc和移動(dòng)端布局的相關(guān)資料, Vue響應(yīng)式布局適配是一種根據(jù)設(shè)備特性自動(dòng)調(diào)整布局的方法,文中通過代碼以及圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
詳解vue-meta如何讓你更優(yōu)雅的管理頭部標(biāo)簽
這篇文章主要介紹了詳解vue-meta如何讓你更優(yōu)雅的管理頭部標(biāo)簽，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要為大家詳細(xì)介紹了vue組件如何被其他項(xiàng)目引用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
vue3前端實(shí)現(xiàn)全屏顯示及元素垂直填滿頁面效果
這篇文章主要給大家介紹了關(guān)于vue3前端實(shí)現(xiàn)全屏顯示及元素垂直填滿頁面效果的相關(guān)資料,文中還給大家介紹了vue3實(shí)現(xiàn)某一個(gè)元素全屏之后就黑屏了的解決辦法,需要的朋友可以參考下2024-02-02![詳解vue.js+UEditor集成 [前后端分離項(xiàng)目]](http://img.jbzj.com/images/xgimg/bcimg5.png)
詳解vue.js+UEditor集成 [前后端分離項(xiàng)目]
本篇文章主要介紹了詳解vue.js+UEditor集成 [前后端分離項(xiàng)目] ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了vue3.0 vant popup渲染不出來問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue中v-show添加表達(dá)式的問題(判斷是否顯示)
這篇文章主要介紹了關(guān)于Vue中v-show中添加表達(dá)式用于判斷是否顯示的問題,很多朋友經(jīng)常會(huì)遇到這樣的需求，有數(shù)據(jù)來源和標(biāo)簽類型兩行選項(xiàng)，需要實(shí)現(xiàn)點(diǎn)擊上面的某個(gè)數(shù)據(jù)來源時(shí)，標(biāo)簽類型自動(dòng)切換功能，感興趣的朋友一起看看吧2018-03-03
Vue中狀態(tài)管理器(vuex)詳解以及實(shí)際應(yīng)用場(chǎng)景
Vuex是一個(gè)專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,下面這篇文章主要給大家介紹了關(guān)于Vue中狀態(tài)管理器(vuex)詳解以及實(shí)際應(yīng)用場(chǎng)景的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
分享12個(gè)Vue開發(fā)中的性能優(yōu)化小技巧(實(shí)用!)
一般來說,你不需要太關(guān)心vue的運(yùn)行時(shí)性能,它在運(yùn)行時(shí)非?？?但付出的代價(jià)是初始化時(shí)相對(duì)較慢,下面這篇文章主要給大家分享介紹了十二個(gè)Vue開發(fā)中的性能優(yōu)化小技巧,需要的朋友可以參考下2022-02-02