IT源码网

vue的main.js讲解

luoye 2021年02月16日 编程语言 238 0
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) 
});

 

发布评论
IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

vue的过渡效果讲解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。