IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> Vue 新手期练手出现问题记录与解决方案——Vue练手项目“小问题“,强迫症患者福音——持续更新ing -> 正文阅读

[JavaScript知识库]Vue 新手期练手出现问题记录与解决方案——Vue练手项目“小问题“,强迫症患者福音——持续更新ing

Vue 新手期练手出现问题记录与解决方案

一、环境依赖:VScode + Vue 2.7.10 + @vue/cli 5.0.8

# 查看当前环境的Vue版本
npm list vue
# 查看vue-cli版本
Vue -v

node -v 
npm -v

img

img

二、<template> 首个template下划波浪线

package.json修改"parserOptions"

"requireConfigFile" : false

img

三、vue eslint 报错 Component name “xx” should always be multi-word.

lj玩意,原因是eslint会依照大驼峰等规则严格检查代码格式,建议直接关闭,没有一点意义

配置 .eslintrc.js文件,如果没有该文件,则在package.json修改即可:

"multi-word-component-names": "off"


// 完整如下
"rules": {
		"multi-word-component-names": "off"
}

img

如果还是显示,再试试重启一次即可。

四、eslint警告:定义未使用,** is defined but never used eslint

img

解决方法修改package.json;

"no-unused-vars":"off"

img

五、Vetur回退版本

Vetur0.30.0版本后举出现各种问题,建议回退版本,操作如下:img

img

六、已声明“xx”,但从未读取其值。ts(6133)

可以直接忽略,如图:

img

七、 Already included file name ‘××ב differs from file name ‘××ב only in casing. Vetur(1261)

img

Vue 引入路径正确的,但一直报错,原因可能是源码中是组件 Name 引起的,解决方案:

解决方式一:把文件名的后缀vue去掉就好了

img

解决方式二:把路径前面的点改成@

img

建议不写.vue

八、ESLint 报 ‘require‘ is not defined no-undef

方法一:需要修改下 eslint 的配置,一般 eslint 配置文件为 .eslintrc.js

// .eslintrc.js
module.exports = {
  env: {
    node: true // 只需将该项设置为 true 即可
  },
  //此处省略其他配置
};

方法二:在eslintrc.js中的module.exports内添加如下代码块:

  "globals":{
    "error": true
  }

方法三:我的方法,确认没写错后重启即可

九、The “xx-com” component has been registered but not used vue/no-unused-components

img

方法一:直接使用

字面意思,创建并导入(注册)了组件却未使用,在导入vue中使用即可。

或者一劳永逸,按照以下修改:

方法二:修改项目的package.json

在package.json中找到eslintConfig下的rules,增加"vue/no-unused-components": "off"即可:

"rules": {
    "vue/no-unused-components": "off"
  }

img

方法三:修改项目的eslintrc.js

如果项目中有eslintrc.js文件,在该js模块中找到rules,增加上"vue/no-unused-components": “off”

rules: {
  'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  "vue/no-unused-components": "off"
}

没有eslintrc.js,就不贴图了.jpg.

以上两种使用其中任意一种都可以,如果两个文件都修改了的话,eslintrc.js文件的优先级较高。

十、did you register the component correctly? For recursive componen

典中典,和组件的命名与驼峰命名有关,大致意思是你是否正确地注册了这个组件?对于递归组件:

错误的:

img

正确的:

img

十一、Parsing error: end-tag-with-attributes vue/no-parsing-error

解析错误,额我是蠢东西,这是个蠢bug,我把变量写到</>里了。

十二、Cannot read property ‘push‘ of undefined

错误提示: Cannot read property ‘push’ of undefined,无法读取未定义的 "push "的属性,是因为数组的问题

方法一:

这个是因为你要push的不是一个数组,解决:你需要将你定义的参数设为数组

data = []

方法二:

还有一种情况是你设置了数组,但你在刷新后还是会报这个错,那是因为刷新后你定义的参数就为undefined了

解决:所以你需要在js里加个判断就行了

if(this.data === undefined) {
  this.data = []
}
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-09-30 00:43:36  更:2022-09-30 00:44:31 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/17 16:18:57-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码