大纲

2019-11-02 本文已影响0人稻草人_9ac7

每日生鲜知识体系

二、Sticky 粘性布局(吸顶) 请看有赞ui文档

三、sku 商品规格

SKU全称为Stock Keeping Unit（库存量单位），即库存进出计量的基本单元，可以是以件，盒，托盘等为单位。SKU这是对于大型连锁超市DC（配送中心）物流管理的一个必要的方法。现在已经被引申为产品统一编号的简称，每种产品均对应有唯一的SKU号。单品：对一种商品而言，当其品牌、型号、配置、等级、花色、包装容量、单位、生产日期、保质期、用途、价格、产地等属性中任一属性与其他商品存在不同时，可称为一个单品。

四、滚动后跳转页面返回顶部问题

const routes = [...];
const router = new Router({
  scrollBehavior: () => ({
    y: 0
  }),
  routes
});

五、filter的使用

// 在mixin里面定义filters
export default {
  data() {
    return {};
  },

  filters: {
    fomatDate(time) {
      let date = new Date(time);
      let Y = date.getFullYear();
      let M = date.getMonth() + 1;
      let D = date.getDate();
      return `${Y}年-${M}月-${D}日`;
    },

    formatMoney(num) {
      return '￥' + num / 100;
    }

  },

  methods: {
    $loading(flag) {
      if (flag) {
        this.$toast.loading("努力加载中...");
      } else {
        this.$toast.clear();
      }
    }
  }
};

// 使用
 <span class="price">{{item.price | formatMoney }}</span>

六、组件的事件传参问题

七、keep-alive

// router的配置
{
    path: "list",
    meta: {
      title: "商品列表",
      keepAlive: true //表示需要缓存
    },
    component: () => import("@/views/product/list/index")
},

// app.vue配置
<template>
  <div>
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

八、登陆和注册共用组件

判断页面是注册还是登陆
mixin的使用
正则表达式

九、组件内的路由守卫

  data() {
    return {
      // 从哪个页面跳过来
      from: "",
      phone: "15013795539",
      smsCode: "",
      password: ""
    };
  },

  beforeRouteEnter(to, from, next) {
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    // console.log('router',this);
    console.log(to.path, from.path);
    next(vm => {
      // 通过 `vm` 访问组件实例
      console.log(vm.from);
      vm.from = from.path;
    });
  },

十、token和axios拦截器

// import axios from "axios";
import store from "../store";
import router from "../router";
// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_URL, // api 的 VUE_APP_URL
  timeout: 50000 // 请求超时时间(因为需要调试后台,所以设置得比较大)
});

// request拦截器,在请求之前做一些处理
service.interceptors.request.use(
  config => {
    if (store.state.token) {
      // 给请求头添加user-token
      config.headers["user-token"] = store.state.token;
    }
    return config;
  },
  error => {
    console.log(error); // for debug
    return Promise.reject(error);
  }
);

十一、路由守卫之登录验证

在需要登录的路由上添加 needLogin: true

{
    path: 'submit',
    meta: {
       title: '确认订单',
       needLogin: true
    },
    component: ()=>import('@/views/order/children/submit')
}

在路由守卫进行判断

router.beforeEach((to, from, next) => {
  let { title, needLogin } = to.meta;
  let { isLogin } = store.state;
  document.title = title;

  if (needLogin && !isLogin) {
    next({
      path: "/login"
    });
  } else {
    next();
  }
});

十二、需要登陆的接口,可以使用axios统一进行拦截

service.interceptors.response.use(
  response => {
    const res = response.data;
    if (res.code == "666") {
      return res;
    } else if (res.code == "603") {
      // code为603代表token已经失效,
      // 提示用户,然后跳转到登陆页面
      router.push("/login");
    } else {
      return Promise.reject({
        message: res.msg
      });
    }
  },
  error => {
    return Promise.reject(error);
  }
);

十三、vuex模块化

// cart.js
export default {
    state: {
        preOrderId: ''
    },

    mutations: {
        updatePreOrderId(state, payload) {
            state.preOrderId = payload;
        }
    }
}

// index.js
export default Vuex.Store({
    modules: {
        cart
    }
})

// 使用
  computed: {
    preOrderId() {
      return this.$store.state.cart.preOrderId;
    }
  },

十四、阻止form表单的默认行为

  <form onsubmit="return false;"></form>

十五、router的history模式(了解)

http://huruqing.cn/docs/Vue/advance/03.router.html

十六、devtools

十六、active-class

http://huruqing.cn/docs/Vue/advance/03.router.html

十七、定制主题和按需加载组件

定制主题的原理,通过修改less变量来实现

http://huruqing.cn/docs/Vant/list/101-%E5%AE%9A%E5%88%B6%E4%B8%BB%E9%A2%98%E6%A0%B7%E5%BC%8F.html

十八、rem

http://huruqing.cn/docs/Vue/advance/06.rem.html

vue-cli3用rem进行适配步骤

安装手淘的flexible,插件名称叫amfe-flexible
```
npm i amfe-flexible --save-dev
```
在main.js导入
```
import 'amfe-flexible'
```

在/vue.config.js添加px2rem插件,把项目中的px转为rem

const autoprefixer = require("autoprefixer");
const pxtorem = require("postcss-pxtorem");

module.exports = {
  // 关闭eslint检查
  lintOnSave: false,
  // 配置css前缀,px转rem
  css: {
    loaderOptions: {
        // 后处理器配置
      postcss: {
        plugins: [
          // 配置样式前缀
          autoprefixer(),
          // 把px转为rem
          pxtorem({
            rootValue: 37.5,
            propList: ["*"]
          })
        ]
      }
    }
  }
};

十九、父子通信踩坑指南

有一种场景: 父给子传参(本例是username),子组件通过input标签修改后再传回给父的情况

例1, 子组件有输入的情况, 使用原生js实现

通过event.target.value获取输入况的值,如果想使用v-model请看例子2(无异步请求)和例子3(有异步请求)

// 父组件
<template>
  <div>
      <p>
        父组件的username: {{username}}
      </p>

      <Child :username="username" @changeName="changeName"/>
  </div>
</template>

<script>
import Child from './Child'
export default {
  components: {
    Child
  },

  data() {
    return {
      username: 'huruqing'
    }
  },

  methods: {
    changeName(data) {
      this.username = data;
    }
  }
};
</script>

// 子组件
<template>
  <div>
    <hr />
    <p>
      子组件的username:
      <input type="text" :value="username" @input="fn" />
    </p>
  </div>
</template>

<script>
export default {
  props: {
    username: {
      type: String,
      required: true
    }
  },

  methods: {
    fn(evnet) {
      // console.log(event.target.value);
      let value = event.target.value;
      this.$emit("changeName", value);
    }
  }
};
</script>

例子2

通过定义个中间变量来实现父子传参(没有异步请求),同时也能使用v-model

// 父组件
<template>
  <div>
    <p>父组件的username: {{username}}</p>
    <Child :username="username" @changeName="changeName" />
  </div>
</template>
<script>
import Child from "./Child";
export default {
  components: {
    Child
  },
  data() {
    return {
      username: ""
    };
  },
  methods: {
    changeName(data) {
      this.username = data;
    }
  }
};
</script>

// 子组件
<template>
  <div>
    <hr />
    <p>
      子组件的username:
      <input type="text" v-model="username2" @input="fn" />
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username2: ""
    };
  },

  props: ["username"],

    created() {
        this.username2 = this.username;
    },

  methods: {
    fn() {
      this.$emit("changeName", this.username2);
    }
  }
};
</script>

例子3 通过定义个中间变量来实现父子传参(有异步请求),同时也能使用v-model

ps: 需要用watch来监听username的变化,如果用created只能拿到第一次的值

// 父组件
<template>
  <div>
    <p>父组件的username: {{username}}</p>
    <Child :username="username" @changeName="changeName" />
  </div>
</template>
<script>
import Child from "./Child";
export default {
  components: {
    Child
  },
  data() {
    return {
      username: ""
    };
  },

  created() {
    this.getData();
  },
  methods: {
    getData() {
      // 获得数据 username
      setTimeout(() => {
        let res = "huruqing";
        this.username = res;
      }, 5000);
    },

    changeName(data) {
      this.username = data;
    }
  }
};
</script>

// 子组件
<template>
  <div>
    <hr />
    <p>
      子组件的username:
      <input type="text" v-model="username2" @input="fn" />
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username2: ""
    };
  },

  props: ["username"],

  //   created() {
  //     console.log("username", this.username);
  //     this.username2 = this.username;
  //   },

  watch: {
    username: {
      handler(newVal, oldVal) {
        console.log("username的值:", newVal);
        this.username2 = newVal;
      },
      immediate: true
    }
  },

  methods: {
    fn() {
      this.$emit("changeName", this.username2);
    }
  }
};
</script>

二十、vuex踩坑指南

手动更改state的值,却发现值没有变化
原因: 我们使用了本地持久化插件 vuex-persistedstate,只有使用mutation修改state的值才会生效,手动修改无效,state的值都会存储到localStoreage里面,如果想修改默认的初始值,需要先清除localStoreage里面的数据,清除方法有两种:
- 清除localStoreage某个值,使用localStoreage.removeItem('vuex');
- localStoreage.clear(); 清除所有的缓存信息
类似十九点父子通信的情况,有以下应用场景
从vuex取值,修改后重新存储,并且使用的input标签进行修改

例子(没有异步请求情况), 有异步操作的情况像十九那样,使用watch监听

<template>
  <div>
    <div>vuex里的username {{username}}</div>

    <hr />
    <p>
      子组件的username:
      <input type="text" v-model="username2" @input="fn" />
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username2: ""
    };
  },

  computed: {
    username() {
      return this.$store.state.username;
    }
  },

  created() {
    console.log("username", this.username);
    this.username2 = this.username;
  },

  methods: {
    fn() {
      this.$store.commit("updateUsername", this.username2);
    }
  }
};
</script>

二十一、$toast轻提示的处理

设置默认显示时间

import Vue from 'vue';
import {Toast} from 'vant'
Toast.setDefaultOptions({
  duration: 500
});
Vue.use(Toast);

错误提示问题,根据不同的情况去做处理

// 在mixin封装一个$faild 的方法
   // 封裝失敗的提示
$fail(err) {
    debugger;
    if (typeof err === 'object') {
        if (err.code !=603) {
            this.$toast.fail(err.message);
        }

    } else {
        this.$toast.fail(err);
    }
},

ps: 当我们要对错误进行提示的时候就调用上面的方法this.$fail(xxObj)

二十二、性能优化

使用cdn https://www.bootcdn.cn/

// 用script导入库
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>

// vue.config.js(vue-cli3)的配置
module.exports = {
  configureWebpack: {
    externals: {
      axios: "axios" // 配置使用CDN
    }
  }
}

压缩图片 https://tinypng.com/
默认图片占位

大纲