实现网页中类似vue.use(element)方法,自建高大上组件

在方法实现上,使用vue中axios方法封装实现例子

import axios from ‘axios‘     //导入axios 包
axios.defaults.baseUrl="localhost:8080";
axios.interceptors.request.use((config)=>{
    let token=localstorage.getItem("token");  //本地取token
    if(token){
    config.headers.token="token"; //设置头部携带token;
}
return config;               //记得返回config哦,不然数据请求会出错
});         //一个简单的axios封装已经实现,接下来实现要实现的vue.use()效果

const install=(vue)={              //核心,通过install事件注册;
    if(install.installed ){
     return;               //返回不执行下一步
}
    Object.defineProperties(vue,{
$api(){
return axios;
}
})
}
export default install;

//main.js,接下来就可以在main.js中引用实现vue.use(效果了o)
import api from ‘axios封装所在目录‘
vue.use(api)          //效果实现,是不是很简单

  

原文地址:https://www.cnblogs.com/uimeigui/p/11788479.html

时间: 2024-10-10 15:18:04

实现网页中类似vue.use(element)方法,自建高大上组件的相关文章

css网页中设置背景图片的方法详解

css网页中设置背景图片的方法详解 在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等 用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {background-color:数值}2,背景图片 {background-image: url(URL)|none}3,背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4,背景固定 {background-attachment

网页中添加下划线的方法汇总及优缺点

本文主要介绍了添加下划线样式的几乎所有方法,并且比较了每一种方法的优缺点.没想到之前一直没有注意的下划线还有这么多玄机奥秘! 本文由 nzbin 翻译,艾凌风 校稿.未经许可,禁止转载! 英文出处:css-tricks.com 发表地址:http://web.jobbole.com/89425/ 有很多种添加下划线样式的方法.可能你还记得< Crafting link underlines on Medium >这篇文章.Medium 并没有尝试特殊的方法,只是想创建一个漂亮的看起来正常的下划

Android中WebView获取网页中标题 ,内容, 图片的方法

如题,在Android中WebView获取网页中标题 ,内容, 图片的方法 首先是获取标题,在new WebChromeClient(){}中重写onReceivedTitle()方法 @Override public void onReceivedTitle(WebView view, String title) { super.onReceivedTitle(view, title); // loge.e("__页面标题__"+title); } 获取内容,是参考的这边的 http

在网页中自带字体的方法

为了让网页更美观.更有个性,我们通常需要在网页中使用一些网上下载下来的字体,因为系统自带的字体可选择的余地早已无法满足人们对审美的要求. 怎么用?用户的电脑又没有安装你期望的那种字体.做成图片是可以,不过不方便修改啊,不能大幅度使用啊,不利于SEO啊,速度也比较慢点啊等等一大堆弊端.怎么办?别急,我们用CSS.CSS有这么一种优秀的功能,就是可以自定义字体.下面正式进入正题: CSS自定义字体,让你的字体运用随心所欲! 步骤: 1.下载所需字体.字体下载站提供的字体一般为.TTF格式. 2.字体

转载 | 网页中返回顶部代码(多种方法)

1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 <a href="#top" target="_self">返回顶部</a> 方法二:操作scrooll函数用来控制滚动条的位置(第一个参数是水平位置,第二个参数是垂直位置) <a href="javascript:scroll(0,0)">返回顶部</a>

elementUI + vue + 直接引用vue和element css和js 菜单组件递归

<html> <head> <title>element-ui demo</title> <meta charset="UTF-8"> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head> &

第151天:网页中插入百度地图方法(不需要密钥)

今天分享一个在网页中插入百度地图的方法,不需要密钥哦,前两天,我试了好多次百度开发平台上使用百度地图的方法,都需要申请密钥,申请了,还是用不了,后来,终于发现了一个不需要密钥的方法,希望对需要的朋友有帮助! 1.打开百度地图生成器链接:http://api.map.baidu.com/lbsapi/creatmap/ 2.在左侧填写位置信息 3.设置地图宽高 4.给位置添加标注信息,可以修改标注图标,完成后点击保存 5.获取代码 将代码保存到文件里,可以命名map.html,在页面中引用时,注意

在网页中加入百度地图

一.打开的图生成器 http://api.map.baidu.com/lbsapi/creatmap/ 二.创建地图 1.定位中心点,默认为北京,点击切换,输入公司的具体所在城市和具体地址.这个时候,地图会切换到该地点范围内. 2.设置地图,这一点基本上不用管,只用适当的设置下宽度和高度即可. 3.添加标注,其实网站建设者未必知道该企业的准确位置,往往不知道该标在哪.这时候,我们可以打开http://map.baidu.com/ ,查询到详细坐标,标注上去.这个标记图标是可以换的,根据自己喜欢来

在网页中写入数学公式

今天跟大家分享在网页中使用数学公式. 像这样的公式大家怎么写出来呢? 甚至还有更复杂的: 以前有一种很常见的做法,就是利用数学公式生成器生成一张图片,然后将图片嵌在网页里. 就是先用这个数学公式生成器生成公式的图片,然后在将该img的style属性改成  style="padding:0px;border: none;margin:0px;vertical-align: bottom;"   插入到网页中就可以了. 这种方法可以利用阮一峰的数学公式生成器.具体做法去他的博客看,我就不搬