vue的main.js

import Vue from 'vue';

import App from './App.vue';



//================http 请求===========================//

import request from './lib/request/request';
Vue.prototype.$request = request;




//=======================饿了么UI===================//
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(ElementUI)




//==============路由配置======================//
import Router from 'vue-router'
import header from './components/header/header.vue'
import menu from './components/menu/menu.vue'
import child from './components/headerchild/headerchild.vue';
Vue.use(Router);
const routerArr=[
  {
    path:'/',
    component:header
  },
  {
    path:'/header',
    component:header,
    children:[
      {
        path:'child',
        component:child
      },
    ]
  },
];

let router=new Router({
  mode:'history',
  routes:routerArr
});




//================vuex=======================//
import Vuex from 'vuex'
Vue.use(Vuex);
let store=new Vuex.Store({
  state:{
    totalPrice:0
  },
  mutations:{
    increase(state,price){
     state.totalPrice+=price;
    },
    decrease(state,price){
      state.totalPrice-=price;
    }
  },
  actions:{   //和后端交互，异步
    increa(context,id){
     /* api(xxx,function () {
        context.commit('increase',id);
      })*/

    }
  }
})
//this.$store.state.totalPrice      获得数据
//this.$store.commit('decrease',5); 执行mutation方法，不能直接和后端交互
//this.$store.dispatch('decrease',5); 执行actions方法，和后端异步交互，再执行mutation

//================实例化对象=======================//


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
});

 

转载于:https://www.cnblogs.com/norm/p/7606743.html