Vue常见报错及解决方案

news2024/11/17 9:56:38

写代码的过程中一定会遇到报错,遇到报错不要担心,认真分析就可以解决报错,同时积累经验,早日成为大牛👍 本文会整理一些在编码过程中遇到的常见报错,共同学习。


一、报错结构

二、常见问题总结及解决方法

Mixed spaces and tabs

Unexpected keyword 'const'

Module not found: Error: Can't resolve '....' in '....'

 Element is missing end tag

TypeError: Cannot read properties of undefined (reading '...') 

TypeError: ...forEach is not a function

'...' is not defined / no-undef


一、报错结构

报错信息一般会包含这几部分:错误类型、错误位置、错误描述、错误规则和问题数量。

如上图:

报错类型为编译错误;

错误位置在D:\myel\src\views\admin\AdminView.vue中的第四行第2个字符;(报错位置不一定每次都是准确的,但是可以根据提示缩小范围)

错误描述 当前错误Mixed spaces and tabs指space空格和tab空格混合了(可根据翻译来判断错误);

错误规则 no-mixed-spaces-and-tabs指space空格和tab空格不能混合使用;

错误数量 统计当前有几个报错 error需要解决,warning根据实际情况看需不需要立即解决。

二、常见问题总结及解决方法

Mixed spaces and tabs

空格混合使用了

解决方法:1、在当前页面格式化代码 2、在.eslintrc.js文件的rules中添加"no-mixed-spaces-and-tabs": "off"

Unexpected keyword 'const'

没有预料到的关键字const

仔细看这几行代码就可以发现, 53行结尾的应为分号写成了逗号

解决办法:将53行逗号改为分号

Module not found: Error: Can't resolve '....' in '....'

模块找不到:不能resolve(兑现,发现,解决)../views/admin/DashVeiw.vue

在D:\myel\src\router

 这种情况一般是路由中配置的文件路径写错了

解决办法:将路径改为正确路径(小技巧:使用自动提示的路径或者复制文件名,避免手误打错)

 Element is missing end tag

元素缺少一个结束标签

是当前文件的<div class="login">缺少后半个</div>

 解决方法:分析好html的结构,将缺少的结束标签添加上

TypeError: Cannot read properties of undefined (reading '...') 

不能读取undefined的属性

 原因是挂载时有dom节点但是数据还没获取,当时那个数据可能为空

解决方法:在当前标签(同时用了v-for的话就上一级标签)加上v-if判断该数据是否存在

用[]或.指定数据时都可能会出现这个错误,要记得使用v-if

TypeError: ...forEach is not a function

...没有forEach方法

当前数据不是个数组

 解决方法:分析数据的结构,找到真正需要遍历的对象

'...' is not defined / no-undef

...没有定义

 解决办法:找到报错位置,按照提示导入相应关键字


平时要记得积累并解决报错,提高自己的纠错能力!💪

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/410085.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

微信小程序跳转外部链接

微信小程序跳转外部链接 在开发小程序过程中&#xff0c;我们可能会有这样的需求&#xff0c;在小程序中打开H5或者外部链接 实现方法如下&#xff1a; 1、配置业务域名 小程序管理后台——开发(开发管理)——开发设置&#xff1a;新增业务域名 在这里将你需要的外部链接域…

超详细的正则表达式的使用方法,学不会找我

正则表达式的基本使用 前言&#xff1a; 在我们开发过程中&#xff0c;有很多地方需要用到正则表达式。如验证用户登录信息、手机号、邮箱地址等等。那你都会正则表达式的哪几个方法呢&#xff1f; 首先&#xff0c;我们要知道什么是正则表达式。 正则表达式的定义&#xff…

节流还在用JS吗?CSS也可以实现哦

函数节流是一个我们在项目开发中常用的优化手段&#xff0c;可以有效避免函数过于频繁的执行。一般函数节流用在scroll页面滚动&#xff0c;鼠标移动等。 为什么需要节流呢&#xff0c;因为触发一次事件就会执行一次事件&#xff0c;这样就形成了大量操作dom,会出现卡顿的情况…

ES6模块化(默认导入导出、按需导入导出、直接导入)

一、介绍ES6模块化 ES6 模块化规范是浏览器端与服务器端通用的模块化规范&#xff0c;ES6模块化的出现前端开发者不再需要额外的学习其他的模块化规范。 二、ES6 模块化规范中定义&#xff1a; 1.每个 js 文件都是一个独立的模块 2.导入其它模块成员使用 import 关键字 3.向外…

React组件——类组件

一、组件的概念 使用组件的方式进行编程&#xff0c;可以提高开发效率&#xff0c;提高组件的复用性、提高代码的可维护性和可扩展性 React定义组件的方式有两种 类组件:React16.8版本之前几乎React使用的都是类组件 函数组件:React16.8之后&#xff0c;函数式组件使用的越…

2023高频前端面试题(含答案)

一、简单页面 1、CSS选择器样式优先级 2、CSS实现三列布局&#xff08;左右固定宽度&#xff0c;中间自适应&#xff09; &#xff08;1&#xff09;CSS浮动 第一个float:left&#xff0c;第二个float:right&#xff0c;第三个设置margin-left和margin-right &#xff08;2&am…

什么是Mixin?带你了解Vue中的Mixin混入

什么是Mixin&#xff1f;本篇文章带大家了解一下Vue中的Mixin混入&#xff0c;介绍Mixin和Vuex的区别&#xff0c;Mixin的使用方法&#xff0c;希望对大家有所帮助&#xff01; Vue框架现在基本上已经占据了前端的半壁江山&#xff0c;Vue的数据驱动和组件化的思想深入人心。Vu…

web前端-JavaScript中的数组详解

&#x1f41a;作者简介&#xff1a;苏凉&#xff08;专注于网络爬虫&#xff0c;数据分析&#xff0c;正在学习前端的路上&#xff09; &#x1f433;博客主页&#xff1a;苏凉.py的博客 &#x1f310;系列总专栏&#xff1a;web前端基础教程 &#x1f451;名言警句&#xff1a…

我用尽了洪荒之力,解开了ChatGPT 写前端代码的封印,结果...

我用尽了洪荒之力&#xff0c;解开了ChatGPT 写前端代码的封印介绍ChapGPT 听起来好得令人难以置信&#xff0c;所以让我们让它为我们编写一些 JS 代码。我想看看它是否可以解决我作为前端开发人员每天所做的任务。是驴子是马拉出来溜溜&#xff0c;我们还是直接进入主题一探究…

Vite + Vue3 +Vant4构建项目时,按需引入使用Toast组件,引用 showToast 时出现编译报错的解决方案

Vite Vue3 Vant4构建项目时&#xff0c;按需引入使用Toast组件&#xff0c;引用 showToast 时出现编译报错的解决方案 文章目录Vite Vue3 Vant4构建项目时&#xff0c;按需引入使用Toast组件&#xff0c;引用 showToast 时出现编译报错的解决方案一.问题定位二.以下为完整解决…

React+Mobx|基本使用、模块化

欢迎来到我的博客 📔博主是一名大学在读本科生,主要学习方向是前端。 🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏 🛠目前正在学习的是🔥 R e a c t 框架 React框架 Reac

【小程序项目开发 -- 京东商城】uni-app 商品分类页面(上)

&#x1f935;‍♂️ 个人主页: 计算机魔术师 &#x1f468;‍&#x1f4bb; 作者简介&#xff1a;CSDN内容合伙人&#xff0c;全栈领域优质创作者。 &#x1f310; 推荐一款找工作神器网站: 点击跳转牛客网 |笔试题库|面试经验|实习招聘内推| 还没有账户的小伙伴 速速点击链接…

前端 --- HTML

文章目录1. HTML 结构1.1 HTML 文件基本结构1.2 VsCode 中 使用 HTML 的快捷键2. HTML 常见标签2.1 注释标签2.2 标题标签2.3 段落标签2.4 换行标签2.5 格式化标签2.6 图片标签2.7 超链接标签2.8 表格标签2.9 列表标签2.10 表单标签form 标签input 标签① 文本框② 密码框③ 单…

Vue中实现路由跳转的三种方式详细分解

vue中实现路由跳转的三种方式 目录 vue中实现路由跳转的三种方式 一、使用vue-router 1.下载vue-router模块到当前工程 2.在main.js中引入VueRouter函数 3.添加到Vue.use()身上 – 注册全局RouterLink和RouterView组件 4.创建路由规则数组 – 路径和组件名对应关系 5…

CSS flex布局最后一行左对齐的常用方法

一、justify-content 在CSS flex布局中&#xff0c;justify-content属性定义了浏览器之间&#xff0c;如何分配顺着弹性容器主轴 (或者网格行轴) 的元素之间及其周围的空间&#xff0c;可以控制列表的水平对齐方式&#xff0c; justify-content: center; /* 居中排列 */ …

Visual Studio 2022 给创建的类/接口加头注释

Visual Studio 2022 给类加注释 找到文件路径 一般在C盘&#xff1a; C:\Program Files\Microsoft Visual Studio\2022\Professional\Common7\IDE\ItemTemplates\CSharp\Code\2052\Class 如图&#xff1a; 修改这个.cs文件 using System; using System.Collections.Generic…

Linux驱动开发——串口设备驱动

Linux驱动开发——串口设备驱动 一、串口简介 串口全称叫做串行接口&#xff0c;通常也叫做 COM 接口&#xff0c;串行接口指的是数据一个一个的顺序传输&#xff0c;通信线路简单。使用两条线即可实现双向通信&#xff0c;一条用于发送&#xff0c;一条用于接收。串口通信距…

C++ Linux Web Server 面试基础篇-计网(一)

⭐️我叫忆_恒心&#xff0c;一名喜欢书写博客的在读研究生&#x1f468;‍&#x1f393;。 如果觉得本文能帮到您&#xff0c;麻烦点个赞&#x1f44d;呗&#xff01; 近期会不断在专栏里进行更新讲解博客~~~ 有什么问题的小伙伴 欢迎留言提问欧&#xff0c;喜欢的小伙伴给个三…

纯代码22步绘制唯美的日夜交替动画(原生HTML+CSS+JS实现,CV即可运行+保姆级步骤教程)

文章目录前言一、HTML(index.html)1. 加入元素二、CSS(style.css)2. 重置浏览器样式3.设置字体样式4.将我们的元素居中5.设置背景颜色6.设置动画显示的位置7.设置夜晚时的背景色8.将动画显示的区域设置为圆型9.绘制白天时天空的样子10.绘制夜晚时天空的样子11.创建昼夜交替动画…

vue3 项目搭建教程(基于create-vue,vite,Vite + Vue)

vue3 项目搭建教程&#xff08;基于create-vue&#xff0c;vite&#xff0c;Vite Vue&#xff09; 目录 一、搭建vue3 项目前提条件 二、通过create-vue搭建vue3 项目 三、搭建一个 Vite 项目 四、构建一个 Vite Vue 项目 五、打开Vue 项目管理器 六、Vite Vue 项目目…