关于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 相关文章推荐
各情景下元素宽高的获取实现代码
Sep 13 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
jQuery实现列表内容的动态载入特效
Aug 08 Javascript
深入理解Node.js中的进程管理
Mar 13 Javascript
vue实现表格增删改查效果的实例代码
Jul 18 Javascript
基于Vue实现后台系统权限控制的示例代码
Aug 29 Javascript
详解使用create-react-app添加css modules、sasss和antd
Jul 31 Javascript
详解js模板引擎art template数组渲染的方法
Oct 09 Javascript
京东优选小程序的实现代码示例
Feb 25 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
Mar 04 Javascript
部署vue+Springboot前后端分离项目的步骤实现
May 31 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
Nov 09 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
如何在WIN2K下安装PHP4.04
2006/10/09 PHP
分享一个PHP数据流应用的简单例子
2012/06/01 PHP
如何判断php mysqli扩展类是否开启
2016/12/24 PHP
prototype.js的Ajax对象
2006/09/23 Javascript
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
2011/09/20 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
js获取url中&quot;?&quot;后面的字串方法
2014/05/15 Javascript
JavaScript简介
2015/02/15 Javascript
ES6新特征数字、数组、字符串
2016/10/01 Javascript
Bootstrap 3 进度条的实现
2017/02/22 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
2017/06/14 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
Vertx基于EventBus发送接受自定义对象
2020/11/16 Javascript
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
Python实现的检测网站挂马程序
2014/11/30 Python
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
python使用PyCharm进行远程开发和调试
2017/11/02 Python
python 将md5转为16字节的方法
2018/05/29 Python
使用python批量读取word文档并整理关键信息到excel表格的实例
2018/11/07 Python
OpenCV里的imshow()和Matplotlib.pyplot的imshow()的实现
2019/11/25 Python
解决Python图形界面中设置尺寸的问题
2020/03/05 Python
PyQt5连接MySQL及QMYSQL driver not loaded错误解决
2020/04/29 Python
英国游戏机和游戏购物网站:365games.co.uk
2018/06/18 全球购物
应届生.NET方向面试题
2015/05/23 面试题
人力资源管理专业应届生求职信
2013/09/28 职场文书
团日活动总结书格式
2014/05/08 职场文书
教师党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2014年大学团支部工作总结
2014/12/02 职场文书
文明倡议书
2015/01/19 职场文书
个人党性分析总结
2015/03/05 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
幼儿园心得体会范文
2016/01/21 职场文书
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL