关于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 相关文章推荐
fix-ie5.js扩展在IE5下不能使用的几个方法
Aug 20 Javascript
从阿里妈妈发现的几个不错的表单验证函数
Sep 21 Javascript
javascript OFFICE控件测试代码
Dec 08 Javascript
一个javascript图片阅览组件
Nov 09 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
Aug 21 Javascript
详解Angular4中路由Router类的跳转navigate
Jun 09 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
Aug 08 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
Sep 25 Javascript
深度了解vue.js中hooks的相关知识
Jun 14 Javascript
解决layui的table插件无法多层级获取json数据的问题
Sep 19 Javascript
python实现迭代法求方程组的根过程解析
Nov 25 Javascript
vue中使用router全局守卫实现页面拦截的示例
Oct 23 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
11个PHPer必须要了解的编程规范
2014/09/22 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
laravel 输出最后执行sql 附:whereIn的使用方法
2019/10/10 PHP
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
2007/04/21 Javascript
javascript如何动态加载表格与动态添加表格行
2013/11/27 Javascript
js的Boolean对象初始值示例
2014/03/04 Javascript
js的2种继承方式详解
2014/03/04 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
2014/06/16 Javascript
轻松创建nodejs服务器(10):处理上传图片
2014/12/18 NodeJs
JS创建Tag标签的方法详解
2017/06/09 Javascript
老生常谈javascript的面向对象思想
2017/08/22 Javascript
angularjs 缓存的使用详解
2018/03/19 Javascript
快速解决vue-cli不能初始化webpack模板的问题
2018/03/20 Javascript
JS操作字符串转数字的常见方法示例
2019/10/29 Javascript
vue自定义正在加载动画的例子
2019/11/14 Javascript
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
Python递归实现汉诺塔算法示例
2018/03/19 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
如何将tensorflow训练好的模型移植到Android (MNIST手写数字识别)
2020/04/22 Python
django-orm F对象的使用 按照两个字段的和,乘积排序实例
2020/05/18 Python
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
大二学生学习个人自我评价
2014/01/19 职场文书
学雷锋活动总结范文
2014/04/25 职场文书
支部组织生活会方案
2014/06/10 职场文书
民事授权委托书范文
2014/08/02 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
公安机关纪律作风整顿个人剖析材料材料
2014/10/10 职场文书
2014年物资管理工作总结
2014/12/02 职场文书
2015年班组工作总结
2015/04/20 职场文书
2015年会计年终工作总结
2015/05/26 职场文书
十大最强妖精系宝可梦,哲尔尼亚斯实力最强,第五被称为大力士
2022/03/18 日漫
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS