关于axios不能使用Vue.use()浅析


Posted in Javascript onJanuary 12, 2018

前言

最近在学习axios,在使用过程遇到了一些问题,觉着有必要给大家分享下,关于axios的基本知识大家可以参考这篇文章:axios基本入门用法教程 ,下面话不多说了,来一起看看详细的介绍吧。

问题

相信很多人在用Vue使用别人的组件时,会用到 Vue.use() 。例如:Vue.use(VueRouter)Vue.use(MintUI) 。但是用 axios时,就不需要用 Vue.use(axios) ,就能直接使用。那这是为什么呐?

答案

因为 axios 没有 install。

什么意思呢?接下来我们自定义一个需要 Vue.use() 的组件,也就是有 install 的组件,看完之后就明白了。

定义组件

生成模版  vue init webpack-simple custom-global-component

custom-global-component 为新建的文件夹名称

然后一路回车

cd custom-global-component 进入该文件夹

npm install 安装本次需要的模块

npm run dev 运行项目

如果能正常打开,进行下一步

这是当前项目目录:

关于axios不能使用Vue.use()浅析
项目目录

1.创建如下图中的文件夹和文件

关于axios不能使用Vue.use()浅析

项目目录

2.在 Loading.vue 中定义一个组件

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

3.在 jndex.js 中 引入 Loading.vue ,并导出

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

4.在 main.js 中引入 loading 文件下的 index

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

5.在App.vue里面写入定义好的组件标签 <Loading></Loading>

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

6.看到这儿大家应该就明白了吧,用 axios时,之所以不需要用 Vue.use(axios) ,就能直接使用,是因为开发者在封装 axios 时,没有写 install 这一步。至于为啥没写,那就不得而知了。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript 混合的构造函数和原型方式,动态原型方式
Dec 07 Javascript
js post提交调用方法
Feb 12 Javascript
node.js中的fs.futimesSync方法使用说明
Dec 17 Javascript
深入分析javascript中的错误处理机制
Jul 17 Javascript
文件上传的几个示例分享【推荐】
Dec 16 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
Mar 07 Javascript
AngularJS实现controller控制器间共享数据的方法示例
Oct 30 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
Nov 27 Javascript
详解JavaScript的BUG和错误
May 07 Javascript
小程序tab页无法传递参数的方法
Aug 03 Javascript
使用nvm和nrm优化node.js工作流的方法
Jan 17 Javascript
在 HTML 页面中使用 React的场景分析
Jan 18 Javascript
Vuex 进阶之模块化组织详解
Jan 12 #Javascript
动态Axios的配置步骤详解
Jan 12 #Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 #Javascript
使用JS获取SessionStorage的值
Jan 12 #Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
Jan 12 #Javascript
web前端vue filter 过滤器
Jan 12 #Javascript
你可能不知道的前端算法之文字避让(inMap)
Jan 12 #Javascript
You might like
深入apache host的配置详解
2013/06/09 PHP
解析smarty 截取字符串函数 truncate的用法介绍
2013/06/20 PHP
PHP导航下拉菜单的实现如此简单
2013/09/22 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
Yii2――使用数据库操作汇总(增删查改、事务)
2016/12/19 PHP
php将字符串转换为数组实例讲解
2020/05/05 PHP
js url传值中文乱码之解决之道
2009/11/20 Javascript
精通Javascript系列之数据类型 字符串
2011/06/08 Javascript
JS获取页面input控件中所有text控件并追加样式属性
2013/02/25 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
2015/05/14 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
基于gulp合并压缩Seajs模块的方式说明
2016/06/14 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
2017/03/08 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
2017/09/08 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
2020/10/24 Javascript
[38:54]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第一场 11.28
2020/12/01 DOTA
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
Python实现基于TCP UDP协议的IPv4 IPv6模式客户端和服务端功能示例
2018/03/22 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
Python 支付整合开发包的实现
2019/01/23 Python
Python 解析简单的XML数据
2020/07/24 Python
加拿大最大的书店:Indigo
2017/01/01 全球购物
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
大学生职业生涯规划书汇总
2014/03/20 职场文书
新课培训心得体会
2014/09/03 职场文书
开展批评与自我批评心得体会
2014/10/17 职场文书
悬空寺导游词
2015/02/05 职场文书
网聊搭讪开场白
2015/05/28 职场文书
2016新教师岗前培训心得体会
2016/01/08 职场文书
MySQL注入基础练习
2021/05/30 MySQL
pytorch fine-tune 预训练的模型操作
2021/06/03 Python
JavaScript流程控制(分支)
2021/12/06 Javascript
我的收音机情缘
2022/04/05 无线电