vue动态引入及axios封装(基础和进阶)---小白入门

最近总结了一下vue的基础和进阶的方法,想给大家分享一下,小菜鸟献丑啦!!!

一.vue基础

本例是通过2.x版本的vue来介绍:
通过 vue init webpack demo,然后 npm install axios 安装axios, 创建一个基于webpack的一个名为demo的项目,目录结构如下:

首先,我们找到入口文件main.js,一般的话,比如我们要请求接口使用各种ui框架,我们都会在main的js引入,这里我们引入axios来举例.

1.axios的基础用法.

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'

Vue.config.productionTip = false

Vue.prototype.$axios = axios; // 有没有觉得这个方法这样写似曾相识

/* eslint-disable no-new */
new Vue({
   
  el: '#app',
  router,
  components: {
    App },
  template: '<App/>'
})

比如:我想引入一个axios当做请求的一个工具,我在main.js全局引入,通过$axios这样引入,这样可以再其他页面通过this.$axios 调用此方法,紧接着,我们又会想到,既然请求有了,那么我们怎么样做到给请求做一下拦截呢?

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'

Vue.config.productionTip = false

Vue.prototype.$axios = axios; // 有没有觉得这个方法这样写似曾相识

//以登录为例
function getToken(){
   
	let token = sessionStorage.getItem('token') || '';
    return token;
}
//设置请求拦截
axios.interceptors.request.use(
	config => {
   
		if(getToken){
   
			config.headers["token"] = getToken();
		}
		return config;
	},
    error =