zoukankan      html  css  js  c++  java
  • 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)
    });
  • 相关阅读:
    IOException while loading persisted sessions:java.io.EOFException
    Android Studio | 详细安装教程
    Android -- 关闭AsyncTask(异步任务)
    钢铁侠传-文言文
    http协议 get/post 请求 解析XML
    HTTP状态码大全
    jquery+ajax 类百度输入框
    这就是知识点
    关于Eclipse+SVN 开发配置
    企业信息化快速开发平台--JeeSite
  • 原文地址:https://www.cnblogs.com/norm/p/7606743.html
Copyright © 2011-2022 走看看