新版的vue cli默认没有自动创建router.js 和 store.js

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Index from './views/Index.vue'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            name: 'index',
            component: Index
        },
        {
            path: '/about',
            name: 'about',
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
        },
        {
            path: '/info/:id',
            name: 'info',
            component: () => import('./views/ShopInfo.vue')
        }
        ,
        {
            path: '/guid',
            name: 'guid',
            component: () => import('./views/Guid.vue')
        }
    ]
})

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        user: {}, shops: [], baseUrl: 'http://plateform.com:81', shopInfo: {}
    },
    getters: {
        user(state) {
            return state.user;
        },
        shops(state) {
            return state.shops;
        },
        baseUrl(state) {
            return state.baseUrl;
        },
        shopInfo(state) {
            return state.shopInfo;
        }
    },
    mutations: {
        setUser(state, user) {
            state.user = user
        },
        setShops(state, shops) {
            shops.forEach((v) => {
                state.shops.push(v)
            })
        },
        setShopInfo(state, shopInfo) {
            state.shopInfo = shopInfo;
        }
    },
    actions: {
        //Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
        getShopInfo({state, commit}, param) {
            return new Promise((resolve,reject)=>{
                console.log('getShopInfo')
                axios.get(state.baseUrl + '/api/shop/' + param.id)
                    .then((data) => {
                        console.log(data)
                        commit('setShopInfo', data.data)
                        resolve();
                    })
                    .catch((err) => {
                        console.log(err)
                        reject();
                    })
            })
        }
    }
})

main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'//引入sotre
import router from './router'//引入router
import axios from 'axios'

Vue.config.productionTip = false
router.beforeEach((to, from, next) => {
    console.log('进入守卫')
    console.log(to)
})
new Vue({
    store,
    router,
    render: h => h(App)
}).$mount('#app')

import Vue from 'vue'
import App from './App.vue'
import store from './store'//引入sotre
import router from './router'//引入router
import axios from 'axios'

Vue.config.productionTip = false
router.beforeEach((to, from, next) => {
    console.log('进入守卫')
    console.log(to)
})
new Vue({
    store,
    router,
    render: h => h(App)
}).$mount('#app')