给想学习vue项目的小伙伴

简介

这是去年还是前年创建的项目结构，一直放在github上没有时间去完成，最近这几个星期自己不怎么忙，就花点晚上的时间把它写完

开发配置

1.环境

编辑器：Idea+sublime,因为习惯这两个，别问为什么不使用vscode。框架：vue全家桶+node 接口：豆瓣电影的接口

2.创建

使用vue-cli创建，因为在项目中我要使用less,所以修改一下配置文件,在webpack的配置中

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

配置代理

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

复制代码

3.比较不好处理的地方

<1>.在使用flex布局的时候，mintui这里面好多样式要重写，还有就是他有一个处理默认事件的地方要改一下

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

<2>.请求回来的图片要缓存一下才能使用，使用的是网上提供的方法

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

<3>.购物车数据同不的问题看网上大部分是写方法计算，但是感觉不符合我想要的，还有就是在计算属性的,因为有缓存所以数据不是最新的。即使能关闭缓存我不想多写代码呀，也不怎么适合我的想法，最后用一个数组，正好可以用这个数组监听打对勾这个事件，那我把购物车的数据直接给这个数组，监听这个数组计算总额不就是随时动态变化的了么。

    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>还有一个就是mintui 的checkList样式你自己处理，不要直接用她的，自己写

        <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>最后一个是mintui给你提供了tabbar,但是当父组件跳转到子组件后就会失效，在子组件里失效了，本来是想通过父子组件通信解决，但是太麻烦还是直接判端路由好了

    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 = "";
        }
      }
    }
复制代码

最后我把地址放这：可以拉取修改提交：github.com/Visupervi/-…

转载于:https://juejin.im/post/5d0afb2e6fb9a07edd2a17a2