vue2项目“尚品会”开发知识点

小小1992

已于 2024-10-25 11:21:58 修改

阅读量343

点赞数 2

文章标签： vue.js javascript 前端

于 2024-09-14 10:20:31 首次发布

本文链接：https://blog.youkuaiyun.com/u014645827/article/details/142058570

版权

1，eslint校验功能关闭。

---在根目录下，创建一个vue.config.js
比如:声明变量但是没有使用eslint校验工具报错。

module.export={

lintOnsave:false

}

2.src文件夹简写方法，配置别名。

jsconfig.json配置别名@提示

{

"compilerOptions":{

"baseUrl":"./",

"paths": {"@/*": ["src/*"]},

},

"exclude": ["node_modules","dist"],

}

3.重复点击同一个路由导航，路由导航的参数没有变化，从而造成该报错

Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location

路径：router\index.js

import Router from 'vue-router'

const originalPush = Router.prototype.push

Router.prototype.push = function push(location) {

return originalPush.call(this, location).catch((err) => err)

}

4.全局组件，不需要注册

main.js

import Typenav from '@/components/Typenav/Typenav'

// 注册全局组件

Vue.component(Typenav.name,Typenav)

页面直接<Typenav></Typenav> 不需要import

5.vue2跨域问题（vue.config.js配置失效）

config目录下index.js文件里面

proxyTable: {
'/': {
target: 'http://gmall-h5-api.atguigu.cn/',
changeOrigin: true,
pathRewrite: {
'^/': ''
}
}
}

6.防抖和节流（插件
Lodash）

Throttle （节流）用于限制函数调用频率，它在规定的时间内最多执行一次。把频繁的触发变成少量的
Debounce （防抖）用于防止重复调用，它在事件连续触发结束后的指定时间才会执行一次。不管时间多长，只执行最后一次

vue包里面已经有lodash不需要单独安装了

// import _ from "lodash";

import throttle from "lodash"; //默认暴露不需要添加{} 按需引入

// 修改nav当前背景颜色
    // changeIndex(index) {
    //   this.currIndex = index;
    // },
    // 修改nav当前背景颜色---防抖（快速划过nav时  节流）
    changeIndex: _.throttle(function (index) {
      this.currIndex = index;
    }, 50),

7.moke模拟数据

http://mockjs.com/ 官方地址（注意：mockjs【并非mock.js mock-js】）
# 安装
npm install mockjs

第一步:安装依赖包mockjs

第二部：在src文件夹下创建一个文件夹，文件夹mock文件夹。

第三步:准备模拟的数据

把mock数据需要的图片放置于public文件夹中！

比如:listContainer中的轮播图的数据

banner.json(在mock文件夹下)

[

{

"id": "1",

"imgUrl": "/images/banner1.jpg"

},

{

"id": "2",

"imgUrl": "/images/banner2.jpg"

},

{

"id": "3",

"imgUrl": "/images/banner3.jpg"

},

{

"id": "4",

"imgUrl": "/images/banner4.jpg"

}

]

第四步：在mock文件夹中创建一个mockServe.js文件(在mock文件夹下)

通过Mock.mock方法进行模拟数据

//先引入mockjs模块
import Mock from 'mockjs';
//把JSON数据格式引入进来[JSON数据格式根本没有对外暴露，但是可以引入]
//webpack默认对外暴露的：图片、JSON数据格式
import banner from './banner.json';
import floor from './floor.json';

//mock数据:第一个参数请求地址   第二个参数：请求数据
Mock.mock("/mock/banner",{code:200,data:banner});//模拟首页大的轮播图的数据
Mock.mock("/mock/floor",{code:200,data:floor});

注意：在mockServe.js文件当中对于banner.json||floor.json的数据没有暴露，但是可以在mockServe模块中使用。

对于webpack当中一些模块：图片、json，不需要对外暴露，因为默认就是对外暴露。

第六步:回到入口文件，引入mockServe.js

8.vue引入swiper

1》安装npm install swiper@5 (不报错)

2》在具体vue文件中引入css和swiper

// 引入swiper

import "swiper/css/swiper.css"（若多个文件使用则可放在main.js）

import Swiper from "swiper";

3》初始化swiper（注意静态路径）

<template>
  
        <!--banner轮播-->
        <div class="swiper-container" ref="cur">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="item in bannerlist" :key="item.id">
              <img :src="require('@/assets/images' + item.imgUrl)" />
            </div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>

          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>
      </div>

</template>
mounted() {
    this.$store.dispatch("getBannerList"); //异步的

    // console.log(this.$store.state.home.bannerList);
    // this.$store.state.home.bannerList;
    //     动态效果为什么没有出来？
    // Swiper需要获取到轮播图的节点DOM，才能给swiper轮播添加动态效果，
    //异步导致节点不完整 因为没有获取到节点。
    // 方法1可以解决
    setTimeout(() => {
      var navSwiper = new Swiper(".swiper-container", {
        loop: true,

        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
          //点击小球的时候也切换图片
          clickable: true,
        },
        // 如果需要前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    }, 2000);
  },

4》Swiper在Vue项目中使用完美解决方案watch+nextTick

nextTick官网解释:

在下次DOM更新, 循环结束之后,执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。

watch:监听属性，watch可以检测到属性值的变化，当属性值发生变化的时候，可以出发一次。

watch: {
    // 2:Swiper在Vue项目中使用完美解决方案watch+nextTick
    bannerlist: {
      handler(newValue, oldValue) {
        this.$nextTick(() => {
          var navSwiper = new Swiper(this.$refs.cur, {
            loop: true,

            // 如果需要分页器
            pagination: {
              el: ".swiper-pagination",
              //点击小球的时候也切换图片
              clickable: true,
            },
            // 如果需要前进后退按钮
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },
          });
        });
      },
    },
  },

9.Object.assign的使用

Object.assign是ES6新添加的接口，主要的用途是用来合并多个JavaScript的对象。

Object.assign()接口可以接收多个参数，第一个参数是目标对象，后面的都是源对象，assign方法将多个原对象的属性和方法都合并到了目标对象上面，如果在这个过程中出现同名的属性（方法），后合并的属性（方法）会覆盖之前的同名属性（方法）。

assign的基本用法如下：

let a={a:'',b:'',c:''}

let b={a:1} ;

let c={c:3}

Object.assign(a,b,c)

{a: 1, b: '', c: 3} //输出结果

var target = {a : 1}; //目标对象
var source1 = {b : 2}; //源对象1
var source2 = {c : 3}; //源对象2
var source3 = {c : 4}; //源对象3，和source2中的对象有同名属性c
Object.assign(target,source1,source2,source3);
//结果如下：
//{a:1,b:2,c:4}

10.报错处理

Uncaught (in promise) TypeError: this.getDate is not a function

this指向错误

解决方法：

let that = this;

that.getDate();

11.滚动行为

export default new Router({

routes:routes,//key value一致省略value

// 滚动行为

scrollBehavior (to, from, savedPosition) {

// return 期望滚动到哪个的位置

// 始终滚动到顶部

return { y: 0 }

}

})