路由表（基本配置-01）

import Vue from \'vue\';
import App from \'./App.vue\';
import PageA from \'./pages/PageA\';
import PageB from \'./pages/PageB\';
import PageC from \'./pages/PageC\';
import PageD from \'./pages/PageD\';
import PageE from \'./pages/PageE\';
import PageF from \'./pages/PageF\';
import \'bootstrap/dist/css/bootstrap.min.css\';


Vue.config.productionTip = false;

// 第2步：导入vuex
import Vuex from \'vuex\';
Vue.use(Vuex);

// 第3步： 构建vuex的store

const store = new Vuex.Store({
  // 所有的状态(共享数据)都在放在state
  state: {
    count: 200,
    list: [
      {id:1, name:\'棒棒糖\'},
      {id:2, name:\'尿不湿\'}
    ]
  },
  getters: {
    size(state) {
      return state.list.length;
    },
    doubleCount(state) {
      return state.count * 2;
    }
  },
  // 第1步：定义mutation
  mutations:{    
    increment(state, value) {      
      state.count += value.step;
    },
    push(state, value) {
      state.list.push(value);
    }
  },
  actions: {
    // action方法的第1个参数为上下文数, 通过context下state或commit操作state状态
    incrementAsync({ commit } , value) {      
      setTimeout(() => {
        commit(\'increment\', value);
      } , 1000);
      
    },
    patch({ commit } ,value) {
      console.log(value);
      commit(\'increment\' , {step: value.step});
      commit(\'push\' , value.commodity);
    }
  }
});



import VueRouter from \'vue-router\';
Vue.use(VueRouter);

const routes = [
  { path: \'/\', redirect: \'/a\'},
  { path: \'/a\', name: \'a\', component: PageA},
  { path: \'/b\', name: \'b\', component: PageB},
  { path: \'/c\', name: \'c\', component: PageC},
  { path: \'/d\', name: \'d\', component: PageD},
  { path: \'/e\', name: \'e\', component: PageE},
  { path: \'/f\', name: \'f\', component: PageF},
];




const router = new VueRouter({
  routes
});

// 全局响应式共享对象
Vue.prototype.store = Vue.observable({
  count: 50
});

// 第1步：原型上添加vue类型的对象,总线
Vue.prototype.bus = new Vue();



// 根组件
new Vue({
  data: {
    globalCount: 100
  },
  // 第4步：注入到根组件中
  store,
  router,
  render: h => h(App),
}).$mount(\'#app\')