vue2关闭eslint校验（vuecli关闭eslint）



1，eslint校验功能关闭。

module.export={

  lintOnsave:false

}

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

jsconfig.json配置别名@提示

{

  "compilerOptions":{

    "baseUrl":"https://blog.csdn.net/u0/article/details/",

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

  },

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

}

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

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

路径：routerindex.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）

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

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

// import _ from "lodash";

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

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方法进行模拟数据

注意：在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（注意静态路径）

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

nextTick官网解释:

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

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

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 }

  }

})

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/76337.html