vue全家桶（vue-cli,vue-router,vue-resource,vuex）-1

1. vue-cli

   # 全局安装 vue-cli
   $ npm install --global vue-cli
   # 创建一个基于 webpack 模板的新项目
   $ vue init webpack my-project
   # 安装依赖
   $ cd my-project
   $ npm install
   $ npm run dev
   

2. 　vue-router

   import Router from 'vue-router'
   
   Vue.use(Router)
   
   let router=new Router({
     routes: [//路径和页面一一对应
       {
         path: '/home',
         name: 'Home',
         component: Home
       },
        { path: '/', 
       redirect: '/home' },//重定向
     ]
   }); 

   //名称代替路径
   <router-link    class="footer-item"  exact  to="home">首页</router-link>

   //打开页面前验证
   router.beforeEach((to, from, next) => {
     if(to.path!=="/logon"&&!store.state.userInfo.Account){
        next({ path: '/logon' })
        return;
     }else{
      next();
     } 
   })

3. vue-resource

   //config/index.js 设置接口代理
   
   proxyTable: {
       '/api':
        {
              target: 'http://11.111.249.12:11',
              changeOrigin: true, //跨域设置
              pathRewrite:
              {
                 '^/api': ''
               }
       }
   }

   //设置请求头main.js
   
   import VueResource from 'vue-resource'
   
   Vue.use(VueResource);
   
   Vue.http.interceptors.push(function(request, next) {
   
     // modify method
     request.method = 'POST';
   
     // modify headers
     request.headers.set('token',“token”);
   
    // continue to next interceptor
     next();
   
   });

4. vuex

   //它主要分四个部分，state,getters,mutations,actions

   //'./store/user'

   import Vue from 'vue';
   import Vuex from 'vuex';
   
   Vue.use(Vuex);
   
   const userStore=new Vuex.Store({
      state:{
          userInfo:{
              userName:""
          }
      },
      getters:{
          getUserInfo(state){
              return state.userInfo;
          }
      },
      mutations:{
          setUserInfo(state,userInfo){
              state.userInfo=userInfo;
          }
      },
      actions:{
          setUserInfo({commit}){
              commit('setUserInfo');
          }
      }
   
   })
   
   export default userStore;

   import store from './store/user';
   //...
    new Vue({
     el: '#app',
     router,
     store,
     template: '<App/>',
     components: { App }
   })

   //设置使用指定的方法
   
   import store from '@/store/user';
   store.commit('setUserInfo',user)

   //获取使用指定的方法
   //可以直接通过store.state获取变量，也可以通过getters接口
   
   computed:{
       //将一个数组转为用逗号分隔的参数序列
      ...mapGetters({username:'getUserName'})
    },