1.axios的配置

main.js

import Vue from 'vue'import App from './App.vue'// 引入 路由import VueRouter from 'vue-router'// 引入 路由配置文件import routes from './router.config'// 引入 vuex入口文件import store from './store/index'// 引入 axiosimport axios from 'axios'// 引入 loading 组件import Loading from './components/loading'Vue.use(VueRouter);Vue.use(Loading);// 关于axios配置axios.interceptors.request.use(function(config){	// 发送请求	store.dispatch('showLoading');	return config;},function(error){	return Promise.reject(error);});axios.interceptors.response.use(function(response){	// 请求回来	store.dispatch('hideLoading');	return response;},function(error){	return Promise.reject(error);});// 配置请求的根路径// axios.default.baseURL = 'http://localhost:8080';// 设置默认头部信息 post// axios.default.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';// 把axios对象挂到Vue原型上Vue.prototype.$http = axios;// 创建 路由const router = new VueRouter({	mode:'history', // 删除 url 中的'#'号,切换路径模式	scrollBehavior:() => ({y:0}), // 滚动条滚动的行为,不加这个默认就会记忆原来滚动条的位置	routes // routes 等价于 routes:routes});require('./assets/css/base.css'); // 全局引入new Vue({  	el: '#app',  	router,  	store,  	render: h => h(App)})

 

2. 组件中的使用

Home.vue

 

3.静态数据

 

4.效果图