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

Posted uimeigui

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了实现网页中类似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)          //效果实现,是不是很简单

  

以上是关于实现网页中类似vue.use(element)方法,自建高大上组件的主要内容,如果未能解决你的问题,请参考以下文章

vue自定义组件(通过Vue.use()来使用)即install的使用

vue+element+axios实现分页

Vue实现element默认展开和选中

[转] vue自定义组件(通过Vue.use()来使用)即install的使用

13.Vue+Element UI实现复制内容

vue中使用element-ui实现分页