ruoyi-nbcio-plus的Vue3前端升级组件后出现的问题(二)

简介: ruoyi-nbcio-plus的Vue3前端升级组件后出现的问题(二)

5 篇文章0 订阅

订阅专栏

更多ruoyi-nbcio功能请看演示系统

gitee源代码地址

前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio

演示地址: http://218.75.87.38:9666

更多nbcio-boot功能请看演示系统

gitee源代码地址

后端代码: https://gitee.com/nbacheng/nbcio-boot

前端代码:https://gitee.com/nbacheng/nbcio-vue.git

在线演示(包括H5) : http://218.75.87.38:9888

7、修正图标显示问题,就是下面图标插件使用的svg指定自己的icons的svg目录,有需要新的可以到相应网站进行下载,如Iconify Design: All popular icon sets, one framework.

createSvgIconsPlugin({
        // 指定需要缓存的图标文件夹
        iconDirs: [resolve(pathSrc, "assets/icons/svg")],
        // 指定symbolId格式
        symbolId: "icon-[dir]-[name]",
      }),

8、有组件升级后出现下面问题,目前还不知道是什么原因

at async ModuleLoader.import (node:internal/modules/esm/loader:336:24) {
  [cause]: Error: Cannot find module 'F:\codestudy\nbcio-oa\plus\ruoyi-nbcio-vue3\node_modules\@rollup\rollup-win32-x64-msvc\rollup.win32-x64-msvc.node'. Please verify that the package.json has a valid "main" entry
      at tryPackage (node:internal/modules/cjs/loader:437:19)
      at Module._findPath (node:internal/modules/cjs/loader:705:18)
      at Module._resolveFilename (node:internal/modules/cjs/loader:1120:27)
      at Module._load (node:internal/modules/cjs/loader:975:27)
      at Module.require (node:internal/modules/cjs/loader:1225:19)
      at require (node:internal/modules/helpers:177:18)
      at requireWithFriendlyError (F:\codestudy\nbcio-oa\plus\ruoyi-nbcio-vue3\node_modules\rollup\dist\native.js:69:10)
      at Object.<anonymous> (F:\codestudy\nbcio-oa\plus\ruoyi-nbcio-vue3\node_modules\rollup\dist\native.js:96:76)
    path: 'F:\\codestudy\\nbcio-oa\\plus\\ruoyi-nbcio-vue3\\node_modules\\@rollup\\rollup-win32-x64-msvc\\package.json',
    requestPath: '@rollup/rollup-win32-x64-msvc'

9、出现下面的错误

主要是下面插件要升级一下

"unplugin-auto-import": "^0.17.5",
    "unplugin-icons": "^0.18.5",
    "unplugin-vue-components": "^0.26.0",
failed to load config from F:\codestudy\nbcio-oa\plus\ruoyi-nbcio-vue3\vite.config.ts
error when starting dev server:
Error: [auto-import] identifier toRef already defined with vue
    at F:\codestudy\nbcio-oa\plus\ruoyi-nbcio-vue3\node_modules\unplugin-auto-import\dist\chunk-HA63LRAS.cjs:250:17
    at Array.forEach (<anonymous>)
    at F:\codestudy\nbcio-oa\plus\ruoyi-nbcio-vue3\node_modules\unplugin-auto-import\dist\chunk-HA63LRAS.cjs:270:13
    at F:\codestudy\nbcio-oa\plus\ruoyi-nbcio-vue3\node_modules\unplugin\dist\index.js:1605:32
    at F:\codestudy\nbcio-oa\plus\ruoyi-nbcio-vue3\vite.config.ts:109:32
    at loadConfigFromFile (file:///F:/codestudy/nbcio-oa/plus/ruoyi-nbcio-vue3/node_modules/vite/dist/node/chunks/dep-G-px366b.js:68040:15)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

10、出现下面的警告

也是升级一下unocss组件就可以

plugin 'unocss:transformers:pre' uses deprecated 'enforce' option. Use 'order' option instead.
plugin 'unocss:transformers:pre' uses deprecated 'transform' option. Use 'handler' option instead.
plugin 'unocss:global' uses deprecated 'enforce' option. Use 'order' option instead.
plugin 'unocss:global' uses deprecated 'transform' option. Use 'handler' option instead.
plugin 'unocss:transformers:default' uses deprecated 'enforce' option. Use 'order' option instead.
plugin 'unocss:transformers:default' uses deprecated 'transform' option. Use 'handler' option instead.
plugin 'unocss:transformers:post' uses deprecated 'enforce' option. Use 'order' option instead.

这次vue3组件升级与主页调整初步结束,结束后主页界面如下:


相关文章
|
18天前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
155 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
1月前
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
121 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
1月前
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
84 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
3月前
|
监控 前端开发 数据可视化
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库,旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入,帮助开发者轻松实现3D场景与React项目的无缝融合。
287 8
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
|
3月前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
286 2
|
3月前
|
前端开发 JavaScript 开发者
揭秘前端高手的秘密武器:深度解析递归组件与动态组件的奥妙,让你代码效率翻倍!
【10月更文挑战第23天】在Web开发中,组件化已成为主流。本文深入探讨了递归组件与动态组件的概念、应用及实现方式。递归组件通过在组件内部调用自身,适用于处理层级结构数据,如菜单和树形控件。动态组件则根据数据变化动态切换组件显示,适用于不同业务逻辑下的组件展示。通过示例,展示了这两种组件的实现方法及其在实际开发中的应用价值。
67 1
|
4月前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
119 1
|
3月前
|
前端开发 JavaScript 安全
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第7天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤。包括项目准备、安装 `javascript-obfuscator`、配置 Vite 构建以应用混淆,以及最终构建项目进行混淆。通过这些步骤,可以有效提升前端代码的安全性,防止被他人轻易分析和盗用。
714 0
|
4月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
333 14
|
4月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
87 0

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    详解智能编码在前端研发的创新应用
  • 4
    巧用通义灵码,提升前端研发效率
  • 5
    智能编码在前端研发的创新应用
  • 6
    VSCode AI提效工具,通义灵码前端开发体验
  • 7
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 9
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
  • 10
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
  • 1
    前端起dev从110秒减少到7秒, 开发体验大幅提升
    15
  • 2
    无前端经验如何快速搭建游戏站:使用 windsurf 从零到上线的详细指南
    29
  • 3
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
    37
  • 4
    VSCode AI提效工具,通义灵码前端开发体验
    89
  • 5
    开箱即用的GO后台管理系统 Kratos Admin - 前端权限
    11
  • 6
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    43
  • 7
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    78
  • 8
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    33
  • 9
    巧用通义灵码,提升前端研发效率
    107
  • 10
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    155