main.js这是js的入口文件

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

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

// 使用element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI);

// 全局的（一个一个比较麻烦）
// axios.request({
//   url: XXX,
//   method: "get"
// });

// 通过使用原型链 这样所有的组件都可以通过$axios去访问了
Vue.prototype.$axios = axios;


Vue.config.productionTip = false;

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

App.vue页面级App组件

<template>
<div id="app">
    <MyHeader></MyHeader>
    <router-view></router-view>
    <MyFooter></MyFooter>
</div>
</template>

<script>
import MyHeader from "./components/MyHeader"
import MyFooter from "./components/MyFooter"
export default {
name: 'App',
components: {
    MyHeader,
    MyFooter,
}
}
</script>

<style>
body {
    margin: 0;
    padding: 0;
}
</style>

router-index.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../components/headers/Home'
import Course from '../components/headers/Course'


Vue.use(Router);

export default new Router({
routes: [
    {
    path: '/',
    name: 'home',
    component: Home
    },
    {
    path: '/course',
    name: 'course',
    component: Course
    }
]
})

Vuex+axios的使用

store.js

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex);

export default new Vuex.Store({
// this.$store.state.name    拿数据
state: {
    name: '1',
},
// 对state中的数据进行处理
// this.$store.getters.new_name    拿数据
getters: {
    new_name: function (state) {
    return state.name + 'xxx';
    },
    new_new_name: function (state, getters) {
    return getters.new_name + '000';
    },
},
mutations: {
    change_data: function (state, data) {
    // 自己处理change_data事件的
    state.name = data;
    }
}
})

Course.vue

<template>
<div>
<h1>course</h1>
{{name}}
{{new_name}}
<hr>
{{try_again}}
</div>
</template>

<script>
    export default {
        name: "Course",
    data(){
        return {
            name : this.$store.state.name,
            new_name: this.$store.getters.new_new_name,
            try_again: '',
        }
    },
    // 方法执行完会改版数据但是不会刷新
    // methods: {
    //     my_click: function () {
    //       this.$store.commit("change_data", '到到')
    //     }
    // },
    // 能够监听到数据的改变能够实时跟新
    // computed: {
    //     name: function () {
    //       return  this.$store.state.name;
    //     }
    // }

    mounted(){
        let that = this;
        this.$axios.request({
            url: "http://127.0.0.1:8000/tryagain/",
            method: 'get',

        }).then(function (data) {
            // success do something~~
            that.try_again = data.data
        }).catch(function (data) {
            // fail do something~~
        })
        // 单纯的发get请求
        // this.$axios.get("url", {}).then()
    }

    }
</script>

<style scoped>

</style>