【踩过的坑】viewUI 按需引用组件报错

最新推荐文章于 2024-05-15 10:07:53 发布
最新推荐文章于 2024-05-15 10:07:53 发布
阅读量879 收藏 1
点赞数
分类专栏： 踩过的坑 文章标签： javascript vue.js webpack 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/helloChou_J/article/details/109772024
版权

在引用 DatePicker 组件时，组件注册不成功，出现以下报错：

 error  in ./node_modules/view-design/src/directives/v-click-outside-x.js

Module parse failed: Unexpected token (126:20)
You may need an appropriate loader to handle this file type.
| 
|                 const normalisedBinding = {
   
|                     ...binding,
|                     ...{
   
|                         modifiers:
最低0.47元/天 解锁文章
helloChou_J
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iView采用组件按需引入时，部分组件报错问题
zyf1910的博客
03-01 768
最近在项目中使用iView组件按需引入时，部分组件引入后会报错，官方文档在按需引入时也没有说明，现在将解决方式记录下来，希望对遇到同样问题的童鞋有帮助。 问题： 通过报错信息可以看到，是 ‘node_modules/_view-design@4.5.0@view-design/src/directives/v-click-outside-x.js’ 这个文件解析失败，需要使用加载器来处理，所以我们就知道应该怎样解决了。 解决方式： 在webpack配置一下，使用babel-loader来处理： ...
vue.js按需引入iview的样式出现错误
芣莨朲
05-07 737
报错信息 根据错误提示信息 You may need an appropriate loader to handle this file type 可以看到，需要适当的加载器对 .ttf 文件和 .woff文件 以及 .woff2文件 进行处理。 解决方法 在 webpack.config.js 中的模块 module 的 规则 rules 添加合适的加载器对 .woff/ttf/woff2...
推荐一个强大的Vue指令库：v-click-outside
最新发布
gitblog_00058的博客
05-15 408
推荐一个强大的Vue指令库：v-click-outside 项目地址:https://gitcode.com/ndelvalle/v-click-outside 在这个充满创新的前端开发世界里，对用户体验的不断提升是每个开发者不懈追求的目标。当涉及到对话框或菜单等元素的交互时，能够快速响应用户的点击事件是非常关键的。今天，我们向您推荐一个非常实用的Vue指令库——v-click-outside，它...
引用iview ui 时报错，很有可能是你写的不对！！！
well2049的博客
08-11 803
刚学习vuejs2.0  ,赶紧还是挺有难度的！！！ 第一次使用时就出现了各种不利。 比如，在main.js里面全局引用iview后，就不需要再单独引用了。 这就说明用法错误。。。。一定切记，在vue2.0里面，  template里面只能有一个节点   所有内容必须被一个div 包裹！！！
ViewUI (iview) 问题解决：使用时报错“Parsing error: x-invalid-end-tag”
东曜说
08-18 718
报错日志 报错原因 ViewUI组件库在渲染其标签时，由于标签是自闭合的，所以包含结束标签时会报错。 解决方案 在项目目录中找到 .eslintrc.js 文件，在 modules.exports 内的 rules 中加入 "vue/no-parsing-error":[2,{"x-invalid-end-tag":false}] 保存后重启项目，终端键入 npm run dev 或 npm run serve 打完收工 ...
Vue 4.1.1 使用 IView UI 以及 引入报错问题解决
Bnana博客
03-31 1565
iview vue 引入 教程 vue iview 引入 问题解决 vue iview 引入控制台报错解决 vue iview css 样式问题解决 vue.config.js main.js View UI vue 中使用 IView UI
vue2按需引入iviewui的部分组件报错error in ./node_modules/view-design/src/directives/v-click-outside-x.js
lifachang的博客
02-05 914
今天使用vue按需引入iviewui的Select、Table、Page等组件，控制栏报错error in ./node_modules/view-design/src/directives/v-click-outside-x.js。排查各种原因后解决方法如下： 第一步：babel按照iviewui官方的按需引入来配置 transform-vue-jsx和transform-runtime是vuecli自动创建的，第3个是iviewui官方引入配置 "plugins": [ "transform-v
ViewUI组件库-其他
06-12
请相信，全新的View UI组件库会带来更强大的功能和更出色的体验。由于现在已经全职维护，这里也可以向大家保证，每1~2 周迭代一个版本。 4.0版本的核心是功能增强和体验优化，基本没有不兼容的，大家可以放心升级。
vue 解决循环引用组件报错的问题
11-30
但是按照普通的组件调用格式来做时报错，错误信息为Unknown custom element: <pop> – did you register the component correctly? For recursive components, make sure to provide the “name” option. 查询了...
ViewUI组件库 v4.1.1
08-13
为您提供ViewUI组件库下载，View UI即为原先的iView，从2019年10月起正式更名为View UI，并使用全新的Logo。iView作者将在新仓库继续开发iView 4.0和后续版本，以及维护工作。原仓库iView作者不再继续提交内容。对于...
ViewUI组件库 v4.0.2
09-28
为您提供ViewUI组件库下载，ViewUI是一套基于Vue.js的UI组件库，主要服务于PC界面的中后台产品。ViewUI为原iView 4.0和后续版本的新命名。特性：高质量、功能丰富友好的API，自由灵活地使用空间使用单文件的Vue组件...
解决ERROR in ./node_modules/vuex/dist/vuex.esm.js
周百万的博客
02-12 6577
2、第二种情况就是，你安装的版本没问题，但是你是在运行情况下安装的，那么他还是会报错，1、如果你是用的是vue2,那应该安装vuex@3版本。如果你是用的是vue3，那么应该安装vuex@4版本。当你安装vuex时，安装完成后可能会出现这样的报错。应该先停止项目，在安装(两次ctri+c)根据不同版本安装完成之后再执行一次就好了。
Vue3项目按需引入 view-ui-plus
Alice_hhu的博客
09-19 2358
Vue3项目按需引入 view-ui-plus。
vue:module parse failed和module build failed的解决方案
KendallBranchett的博客
10-13 4055
Module parse failed: 安装了vue-loader结果显示是最新版：@15.9.8，结果还是不行，看到有的帖子掘金说可能是版本太高不匹配，于是再降为@13试一试 错误原因又变了:module build failed，又看到一篇帖子 TypeError: this.getOptions is not a function (安装stylus)_zhouzhiwengang的专栏-CSDN博客 说是stylus-loader 版本太高了，于是就在命令行重新安装了低版本..
vue 按需引用组件view-design报错
u013994400的博客
04-01 1213
DatePicker 组件引用时：出现以下报错 在 build/webpack.base.conf.js 文件里对应位置添加报错的文件（上面报错信息第一行的 v-click-outside-x.js 文件） // 修改前 module.exports = { module: { rules: [ { test: /\.js$/, loader: 'babel-loader', include: [resolve('src'), reso
关于vue
ddese48644的专栏
06-29 196
Vue项目结构介绍 build 文件夹：用于存放 webpack 相关配置和脚本。 config 文件夹：主要存放配置文件，比如配置开发环境的端口号、开启热加载或开启gzip压缩等。 dist 文件夹：默认命令打包生成的静态资源文件。 node_modules：存放 npm 命令下载的开发环境和生产环境的依赖包。 src: 存放项目源码及需要引用的资源文件。 src下as...
关于困扰我一下午的vue指令 clickoutside.js；以及我对指令的测试结果
weixin_30533797的博客
12-27 439
https://github.com/ElemeFE/element/blob/d419e260d0fc1463ccbc4f5e45e129ec0e972255/src/utils/clickoutside.js 下面的代码是element ui中的clickoutside.js const on = (function() { if (!Vue.prototype.$i...
webpack编译出错You may need an appropriate loader to handle this file type.
热门推荐
weixin_38049458的博客
01-14 6万+
引用css时var footerCss = require("../../css/footer.css");运行报错You may need an appropriate loader to handle this file type. webpack.config.js配置如下 var debug = process.env.NODE_ENV !== "production"; var
View UI组件库表单校验，怎么使用部分字段校验方法
06-13
View UI 是一个基于 Vue.js 的组件库，提供了丰富的 UI 组件和工具函数，其中也包括表单校验的方法。 在 View UI 中，使用部分字段校验方法可以通过在表单项的 `rules` 属性中定义校验规则实现。以下是一个示例： ```vue <template> <div> <Input v-model="name" :rules="nameRules" placeholder="请输入姓名" /> <Input v-model="age" :rules="ageRules" placeholder="请输入年龄" /> <Button @click="submit">提交</Button> </div> </template> <script> export default { data() { return { name: '', age: '' } }, methods: { submit() { // 在此处提交表单数据 } }, computed: { nameRules() { return [ { required: true, message: '姓名不能为空', trigger: 'blur' }, { min: 2, max: 10, message: '姓名长度在 2 到 10 个字符之间', trigger: 'blur' } ] }, ageRules() { return [ { type: 'number', message: '年龄必须为数字', trigger: 'blur' }, { min: 18, max: 60, message: '年龄在 18 到 60 岁之间', trigger: 'blur' } ] } } } </script> ``` 在上面的示例中，我们定义了两个表单项（姓名和年龄），并为它们分别定义了校验规则。在 `rules` 属性中，我们通过返回一个数组来定义校验规则。每个规则包括三个属性： - `required`：是否必填 - `message`：校验失败时的提示信息 - `trigger`：触发校验的事件，例如 `blur`（失去焦点时）、`change`（值改变时）等 在实际应用中，我们可以根据需要定义不同的校验规则，以实现部分字段校验。当用户提交表单时，可以调用 `submit` 方法进行表单提交，并在方法中对表单数据进行校验。如果存在校验失败的情况，可以使用 View UI 提供的弹窗组件或者提示信息组件进行展示。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值