美文网首页
大纲

大纲

作者: 稻草人_9ac7 | 来源:发表于2019-11-02 09:06 被阅读0次

    每日生鲜知识体系

    相关资料

    需求地址

    接口地址

    二、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>

    八、登陆和注册共用组件

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

    九、组件内的路由守卫

      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);
  }
);

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

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

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

    2. 在路由守卫进行判断

      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进行适配步骤

    1. 安装手淘的flexible,插件名称叫amfe-flexible

      npm i amfe-flexible --save-dev

    2. 在main.js导入

      import 'amfe-flexible'

    3. 在/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踩坑指南

    1. 手动更改state的值,却发现值没有变化
      原因: 我们使用了本地持久化插件 vuex-persistedstate,只有使用mutation修改state的值才会生效,手动修改无效,state的值都会存储到localStoreage里面,如果想修改默认的初始值,需要先清除localStoreage里面的数据,清除方法有两种:
      • 清除localStoreage某个值,使用localStoreage.removeItem('vuex');
      • localStoreage.clear(); 清除所有的缓存信息
    2. 类似十九点父子通信的情况,有以下应用场景
      从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轻提示的处理

    1. 设置默认显示时间

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

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

      // 在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)

    二十二、性能优化

    1. 使用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
    }
  }
}

    2. 压缩图片 https://tinypng.com/

    3. 默认图片占位

    相关文章

      网友评论

          本文标题：大纲

          本文链接：https://www.haomeiwen.com/subject/dljcbctx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|大纲|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！