第一个完整vue项目（Q.life）

项目预览

技术要点

vue-cli

搭建项目

vue-router

1. 多级子路由配置页面

{
      path: '/home',
      name: 'home',
      component: Home,
      children:[{
        path:'moneycode',
        component: MoneyCode
      },{
        path:'moneyto',
        component: Moneyto
      },{
        path:'exchange',
        component: Exchange
      },{
        path:'trade',
        component: Trade,
        redirect: '/home/trade/buying',
        children:[{
          path:'buying',
          component:Buying
        },{
          path:'sellout',
          component:SellOut
        },{
          path:'orderlist',
          component:OrderList
        }]
      }]
    }

2. 页面跳转

that.$router.push('/login');

3. 路由传参（仅取参数）

this.$route.query.account

axios

挂载到vue实例上

axios.defaults.withCredentials=true;//让ajax携带cookie
Vue.prototype.$axios = axios;

请求后台数据

    that.$axios({
      url:data.domain+'/start/index?my=true',
      headers:{
        'X-Requested-With': 'XMLHttpRequest'
      }
    }).then((res)=>{
    //  console.log( '用户信息',res);
      if(res.data.memberinfo){
        that.$store.commit('setUserInfo',res.data.memberinfo);
        that.userName = data.userInfo.memberinfo_nickname;
        that.userId = data.userInfo.memberinfo_id;
      }else{
        that.$store.commit('tips',that.$t('home.info'));
        setTimeout(function(){
          that.$router.push('/');
        },1500)
      }
    }).catch(error=>{
      console.log(error);
      if(error.response.status === 403){
        that.$router.push('/login');
      }
    });

不足：没有进行二次封装，每次都得带着请求头，form data数据每次都要带处理方法

    transformRequest: [function (data) {
      // Do whatever you want to transform the data
      let ret = '';
      for (let it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }],

vuex

• state存放数据，mutations提供储存数据的方法

state: {
    domain:'http://8908.youtuoapp.com', //后台请求的地址
    userInfo: JSON.parse(sessionStorage.getItem('user-info')),
    userMoney: JSON.parse(sessionStorage.getItem('user-money')),
    tipsInfo:'',
    loadingShow:false

  },
  mutations: {
    //保存用户信息到sessionStorage
    setUserInfo(state, info) {
      state.userInfo = info;
      sessionStorage.setItem('user-info', JSON.stringify(info));
    },
    setMoney(state, info) {
      state.userMoney = info;
      sessionStorage.setItem('user-money', JSON.stringify(info));
    },
    tips(state, tips){
      state.tipsInfo = tips;
      setTimeout(()=>{
        state.tipsInfo='';
      },1500)
    },
    loading(state, loading){
      state.loadingShow = loading;
    }
  }

• 使用

存放

    that.$store.commit('setUserInfo',res.data.memberinfo);

拿取

    this.$store.state.userInfo

• 利用vuex以组件形式实现了两个小功能 提示框tips 加载等待loading

其他操作

• provide+inject 更新数据后刷新页面

app.vue

 <router-view v-if="isRouterAlive"></router-view>

 data(){
    return{
      isRouterAlive:true
    }
  },
 provide(){
    return{
      reload:this.reload
    }
  },
  methods:{
    reload(){
      this.isRouterAlive = false;
      this.$nextTick(function(){
        this.isRouterAlive = true;
      })
    }
  }

其他页面

    inject:['reload'],

使用

    that.reload();

用到的一些插件

• 轮播 Swiper
• 二维码生成 qrcodejs2
• 复制内容 VueClipboard
• 多语言切换 VueI18n