关于iview UI组件的col标签报错 x-invalid-end-tag

最新推荐文章于 2021-11-19 17:24:58 发布
最新推荐文章于 2021-11-19 17:24:58 发布
阅读量9.4k 收藏 2
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiao199306/article/details/80430087
版权

首先描述下问题，我的编辑器是vscode，vue-cli搭建的测试项目，引入了iview UI组件，在页面上使用栅格布局的 col 标签是报错：百度了一下 说实在..eslintrc.js 中rules 中加入这一行代码  "vue/no-parsing-error": [2, { "x-invalid-end-tag": false }] ， 但是你可能会发现这样依然会报错， 具体原因不是很清楚但是解决办法就是在code的首选项设置里面 添加用户配置

"vetur.validation.template": false

这样就完美解决了


君子有攸往
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
基于iView和he-tree-vue的一个拖拽树形组件
12-16
iView是一个知名的Vue.js UI框架，它提供了大量预设的、高质量的UI组件，如按钮、表格、表单等，帮助开发者快速搭建美观的应用。而he-tree-vue则是一个专门针对树形结构的组件库，它在iView的基础上进一步扩展了树形...
iview-admin登录完整代码附后台代码
12-12
1. iview-admin：iview-admin是一款基于Vue.js和iView UI库构建的后台管理系统模板，它提供了一套完整的前端解决方案，包括页面布局、组件使用、路由管理等，大大简化了开发过程。在本项目中，开发者根据iview-admin...
解决view UI组件col报错问题 x-invalid-end-tag
weixin_49784827的博客
10-29 532
这个问题是因为ESlint报错引起的，以下两步可以解决这个报错 1.打开vscode 文件=>首选项=>设置 复制搜索 vetur.validation.template。将选中的勾勾去掉。 2.打开vuecli根目录下的 .eslintrc.js文件，在里面加上 "vue/no-parsing-error": [2, { "x-invalid-end-tag": false }]; 如下 module.exports = { root: true, env: {
vue - iview UI组件的col标签报错 x-invalid-end-tag
weixin_34088583的博客
07-27 560
https://blog.csdn.net/xiao199306/article/details/80430087 转载于:https://www.cnblogs.com/tongbiao/p/9380090.html
使用iView时报"Parsing error: x-invalid-end-tag"错误的解决方案
沧笙踏歌的博客
10-19 3284
使用iview和vue的时候，想用iview的栅格布局，结果报错了 <Col span="6"> <div>col-6</div> </Col> vue Parsing error: x-invalid-end-tag 原因 vue将标签渲染为原生html标签时，由于这些标签是自闭合的，所以有end标签会报错。 解决 1.修改.eslint...
vscode 使用iView时标签报错 Parsing error: x-invalid-end-tag
gyp0307的博客
07-23 974
开发工具：vscode  错误案例： 解决方案： vetur中eslint的问题，在vscode菜单中，文件-&gt;首选项-&gt;设置；找到 “vetur.validation.template”: true 将其改为false，就可关闭eslint的检查，错误消失。 在这里记录一下。...
解决iview标签显示错误问题
qq_37876408的博客
09-25 611
解决iview标签显示错误问题 在vscode中选择文件=>首选项=>设置 将eslint插件设置为关闭
vue-admin-iview：基于ui组件iview的vue引入管理系统界面
02-06
iview的vue-admin ^ _ ^ 演示 ant-design版本 （推荐） 元素版 项目截图 登录 注册 首页 主题切换 搜寻 编辑 图表 字体图标 响应式 技术栈 Vue Vue-Cli 威克斯 Vue路由器 轴距 i18n es6 / 7 webpack2 / 3 减 ....
修改iview-ui tree树结构默认的小三角形源码
06-06
修改iview-ui tree树结构前面得小三角。可以使用ui库自带的icon图标，也可以自己根据项目 需求添加背景图片。 并且包括点击当前的父级节点文字，展开/隐藏 子级菜单，同时背景高亮显示 下载后，直接npm install 就...
详解基于iview-ui的导航栏路径（面包屑）配置
10-17
主要介绍了详解基于iview-ui的导航栏路径（面包屑）配置,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue项目报错：[vue/no-parsing-error] Parsing error: x-invalid-end-tag.eslint-plugin-vue
gao_jun1的博客
10-06 1万+
一、问题描述 在编写vue的template模块时，会报出红线上的错误，但是在正常情况下又不影响项目的正常运行，但是就是看着有些难受。 二、解决方法 1、在vscode的左下角找到设置的按钮，点击设置 2、在搜索框中搜索 Vetur>Validation:Template ，将这一项的勾选去掉即可。 ...
Vue编译中出现 Parsing error: x-invalid-end-tag vue/no-parsing-error 问题
qq_16733389的博客
01-11 1万+
出现这种问题目前笔者发现的有以下几种可能 一、 如果是使用IDEA和WebStorm的小伙伴 在项目根目录下找到.eslintrc.js 文件在rules下面添加 "vue/no-parsing-error": [2, { "x-invalid-end-tag": false }] 重新启动项目即可 二、 如果是使用VSCode 的小伙伴 需要关闭 VSCode 的代码检查 Vetur 使用了一个特定版本的 eslint-plugin-vue，用于检查代码的 <template> 部分。 L
vue项目报错解决：Parsing error: x-invalid-end-tag vue/no-parsing-error
老衲的少女心i~
08-28 6409
报错： Parsing error: x-invalid-end-tag vue/no-parsing-error 原因： View将标签渲染为原生html标签时，由于这些标签是自闭合的，所以有end标签会报错。 解决方法 文件/首选项/设置 在上面的搜索栏输入：vetur.validation.template 取消勾选 ...
[vue/no-parsing-error] Parsing error: x-invalid-end-tag.eslint-plugin-vue
LJJONESEED的博客
11-19 1281
如图报错 解决办法： 第一步：设置 第二步：搜索vetur.validation.template 取消勾选
Parsing error: x-invalid-end-tag vue/no-parsing-error
weixin_45391817的博客
04-12 1329
vue将标签渲染为原生html标签时，由于这些标签是自闭合的，所以有end标签会报错。 解决方案 1：进入设置里面搜索vetur:validation.template 取消选中即可 2：在.eslintrc.js配置文件中将x-invalid-end-tag设置为false即可 rules: { "quotes": [0, "single"], // 禁用引号检查 引号类型 `` "" '' "semi": 0, // 禁用分号检查 [1, "always"]: 需要分号,
常见报错，分析其原因
qq_47443027的博客
03-20 1397
1、- tag <div> has no matching end tag. ：<div>没有匹配的结束标记。 2、Unknown custom element: <RecruModel> - did you register the component correctly? ：未知的自定义元素：<recorumodel>-是否正确注册了组件？，自定义的组件，用了可你注册了吗 3、Invalid handler for event "edit": ..
vscode中iview的标签报错 x-invalid-end-tag
食鱼酱的博客
05-25 1万+
这是vetur中eslint的问题，在vscode菜单中，文件-&gt;首选项-&gt;设置 找到 “vetur.validation.template”: true 将其改为false，就可关闭eslint的检查，错误消失
iviewUI库 Col以及Row 组件用法
热门推荐
weixin_40419104的博客
02-25 1万+
使用row在水平方向创建一行 一将组col插入在row中 每个在col中，键入自己的内容 设置通过col的span参数，指定跨越的范围，其范围是1到24 每个row中的col总和应该为24 如下图这样 注意：非模板/渲染模式下，需使用i-col 给通过row添加gutter属性，给可以的下属col添加间距 我这里给的col间距是30px 给通过row设置参数align为不...
引入iview的组件 特定界面引入 element-ui
最新发布
09-05
引入iview的组件是为了利用其丰富的功能和易于扩展的特性，方便开发高质量的用户界面。iview提供了各种常用的UI组件，如按钮、表单、输入框、下拉菜单等，可以满足大部分基本的界面需求。此外，iview还有一些特殊的组件，如时间选择器、日历、分页器等，可以帮助我们实现一些复杂的交互效果。 然而，在特定界面中，如果需要一些更为专业和复杂的UI组件，可以考虑引入element-ui。element-ui提供了更多的高级组件，如表格、对话框、图表等，可以帮助我们实现更为复杂的业务逻辑。 引入element-ui的过程相对iview来说稍微复杂一些，但元素的样式和交互方式都更为细腻和专业。因此，当我们需要在特定界面中实现一些复杂的UI效果或者满足特定的需求时，可以选择引入element-ui。 不过需要注意的是，由于iview和element-ui是两个不同的UI框架，两者之间有一些冲突问题需要解决。在引入element-ui时，需要根据具体需求来选择使用哪些组件，并避免与已引入的iview组件重复。同时，为了保持界面的一致性，还需要进行一些样式的调整和统一。 总之，引入iview和element-ui都是为了提高界面的质量和用户体验，通过根据不同情况选择合适的UI组件，可以满足不同级别和需求的开发工作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值