关于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 相关文章推荐
Jquery 表单取值赋值的一些基本操作
Oct 11 Javascript
JQuery Ajax 跨域访问的解决方案
Mar 12 Javascript
asp.net+js 实现无刷新上传解析csv文件的代码
May 17 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
May 06 Javascript
jQuery 复合选择器应用的几个例子
Sep 11 Javascript
jQuery插件windowScroll实现单屏滚动特效
Jul 14 Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 Javascript
JavaScript每天必学之基础知识
Sep 17 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
Aug 12 Javascript
从零开始封装自己的自定义Vue组件
Oct 09 Javascript
vue实现行列转换的一种方法
Aug 06 Javascript
Node.js控制台彩色输出的方法与原理实例详解
Dec 01 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
如何在smarty中增加类似foreach的功能自动加载数据
2013/06/26 PHP
php实现的树形结构数据存取类实例
2014/11/29 PHP
PHP使用递归生成文章树
2015/04/21 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
关于hashchangebroker和statehashable的补充文档
2011/08/08 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
2013/06/08 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
对于Form表单reset方法的新认识
2014/03/05 Javascript
jQuery scroll事件实现监控滚动条分页示例
2014/04/04 Javascript
js显示当前日期时间和星期几
2015/10/22 Javascript
使用JS实现图片展示瀑布流效果的实例代码
2016/09/12 Javascript
js实现旋转木马效果
2017/03/17 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
react中Suspense的使用详解
2019/09/01 Javascript
python将xml xsl文件生成html文件存储示例讲解
2013/12/03 Python
Python实现的简单算术游戏实例
2015/05/26 Python
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
详解使用Python处理文件目录的相关方法
2015/10/16 Python
Flask框架学习笔记之表单基础介绍与表单提交方式
2019/08/12 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
python与idea的集成的实现
2020/11/20 Python
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
介绍下java.util.Arrays类
2012/10/16 面试题
大学生自我鉴定范文
2013/12/28 职场文书
通信生自我鉴定
2014/01/18 职场文书
幼儿园教研活动方案
2014/01/19 职场文书
高中生物教学反思
2014/02/05 职场文书
药剂专业自荐信范文
2014/04/16 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书
Python实现socket库网络通信套接字
2021/06/04 Python
为什么在foreach循环中JAVA集合不能添加或删除元素
2021/06/11 Java/Android
python 离散点图画法的实现
2022/04/01 Python