Vue want to learn to project a small partner

Brief introduction

This is the last year or the year before to create the project structure has been placed no time to complete on github, this recently myself very busy few weeks, it's time to spend the night to finish it

Development configuration

1. Environment

Editor: Idea + sublime, because these two habits, do not ask why not use vscode. Framework: vue family bucket + node interfaces: IMDb Interface

2. Create

Created using vue-cli, because the project I want to use less, so modify the configuration file, the configuration of the webpack

      {
       test:'/\.less$/',
       loader:'vue-loader',
       options:vueLoaderConfig
     }
复制代码

Configuration Agent

    proxyTable: {
       '/api':{
           target:"https://douban.uieee.com/v2",
           changeOrigin:true,
           pathRewrite:{
           '^/api':''
       }
   }
   },

复制代码

3. Local relatively poor treatment

<1> In the layout using flex time, mintui there is a lot of style to be rewritten, and that he has a default event processing place to change it

if(e.cancelBubble ){
    e.preventDefault()
}
复制代码

<2> The request back to cache images in order to use it, use the method available online

let _u = moveArr[i].images.medium.substring(8);
<img :src="https://images.weserv.nl/?url=_u"/>
复制代码

<3>. Cart looking at the same data online is not a problem most of the write method of calculation, but the feeling does not meet what I want, there is in the calculation of the property, so the data cache because there are not up to date. Even if we can turn off caching I do not want to write code for it, nor how fit my idea, and finally with an array, the array can be used just listens checkmark this event, then I put the shopping cart data directly to the array, monitoring the the total array of computing is not ready yet dynamic.

    watch: {
      'checkboxModel': {
        handler() {
          this.allCount = 0;
          if (this.checkboxModel.length !== this.goodsList.length) {
            this.checked = false;
          } else {
            this.checked = true;
          }
          this.checkboxModel.forEach((item, index) => {
            this.allCount += item.count * 2333;
          })
        },
        deep: true
      },
    }
复制代码

<4> There is a mintui of checkList you deal with their own style, do not directly use her own writing

        <label class="mint-checklist">
        <span class="mint-checkbox" id="mint-checkbox">
          <input type="checkbox" class="mint-checkbox-input" v-model="checkboxModel" :value="item">
          <span class="mint-checkbox-core"></span>
        </span>
          <span class="mint-checkbox-label">
        </span>
        </label>
        
        
复制代码

      .mint-checklist {
        .mint-checkbox {
          font-size: 12px;

          .mint-checkbox-core {
            width: 15px;
            height: 15px;
            position: absolute;
            top: 50%;
            left: 15px;
            -webkit-transform: translate(0, 50%);
            -moz-transform: translate(0, 50%);
            -ms-transform: translate(0, -50%);
            -o-transform: translate(0, -50%);
            transform: translate(0, -50%);
          }

          .mint-checkbox-core:after {
            top: 1px;
            left: 4px;
          }
        }

        .mint-checkbox-label {
          font-size: 12px;
          top: 50%;
          position: absolute;
          left: 30px;
          -webkit-transform: translate(0, 50%);
          -moz-transform: translate(0, 50%);
          -ms-transform: translate(0, -50%);
          -o-transform: translate(0, -50%);
          transform: translate(0, -50%);
        }

        .comTotal {
          position: absolute;
          font-size: 12px;
          top: 50%;
          -webkit-transform: translate(0, 50%);
          -moz-transform: translate(0, 50%);
          -ms-transform: translate(0, -50%);
          -o-transform: translate(0, -50%);
          transform: translate(0, -50%);
          right: 90px;
        }
      }
复制代码

<5> The last one is mintui gives you tabbar, but when the parent component sub-assembly will fail to jump in the sub-assembly in failure, his son wanted to address components communicate through, but too much trouble or direct sub-end well routing

    watch: {
      'selected': {
        handler() {
          if (this.selected === "homeComponent") {
            this.$router.push(
              {
                path: '/homeComponent'
              })
          }
          if(this.selected === 'shopCar'){
            this.$router.push(
              {
                path:'/shopCar'
            })
          }
        }
      },
      '$route'(to){
        if(to.path.indexOf("movieDetails") == -1){
          this.selected = "";
        }
      }
    }
复制代码

Finally, I put it to address: You can pull modify submitted: github.com/Visupervi/-...

Reproduced in: https: //juejin.im/post/5d0afb2e6fb9a07edd2a17a2