Vue 3 + Vite + Element Plus
文章平均质量分 93
Vue 3 + TypeScript + Vite + Element Plus + normalize.css + Sass + Pinia + Vue Router4.5.1
小丁学Java
这个作者很懒,什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
✨ Element Plus 小技巧:用 collapse-tags 终结多选框的“选择困难症”!
Element Plus 多选框优化技巧 本文介绍了Element Plus中el-select组件的collapse-tags属性,它能有效解决多选项选择时界面元素被"撑爆"的问题。当开启collapse-tags后,多选框会自动将超出的选项折叠为+N标签,保持界面整洁。搭配collapse-tags-tooltip属性,用户可通过悬停查看被折叠的全部选项,既节省空间又不丢失信息。这种组合特别适用于需要选择多个标签、负责人等场景,能显著提升表单的美观性和用户体验。原创 2025-11-07 14:44:00 · 1219 阅读 · 0 评论 -
从 Vite Proxy 到 Nginx 反向代理:打通前后端分离部署的“最后一公里” ✨
摘要:Vite Proxy 到 Nginx 反向代理的部署转换 本文探讨了前后端分离部署中常见的 API 请求失效问题。开发环境下 Vite 的 proxy 配置能有效解决跨域,但在生产环境(npm run build后)会失效,因为静态文件不具备代理能力。解决方案是通过 Nginx 反向代理:在配置中添加 /api/ 的 location 规则,使用 proxy_pass 将请求转发至后端 API 网关,并确保路径重写正确。文章详细解释了配置要点,包括末尾 / 的重要性,并提供了 Nginx 重载命令。最原创 2025-10-31 17:36:57 · 1052 阅读 · 0 评论 -
终极进化!拥抱 ESLint v9,让你的 Vue 3 + Vite 项目“刀枪不入” ✨
你是否还在为 npm run build 时才发现一堆 TypeScript (TS) 错误而烦恼?是否还在忍受团队成员提交的代码风格五花八门?原创 2025-10-30 19:21:29 · 1255 阅读 · 0 评论 -
全栈实战:从零到一,用 Vue 3 + Spring Boot 实现一个优雅的“用户分配角色”功能
摘要: 本文详细介绍了如何通过Vue 3 + Spring Boot全栈实现"用户分配角色"功能。后端采用MyBatis XML编写高效SQL,通过LEFT JOIN动态标记用户已有角色,并设计RESTful API支持角色批量更新。前端基于<script setup>语法开发可复用的对话框组件,利用v-model实现角色复选框的自动勾选与数据绑定,并通过watch监听实现动态数据加载。联调阶段通过事务日志验证了功能的原子性操作。该方案完整覆盖从接口设计、数据交互到界面实现的原创 2025-10-28 15:35:14 · 552 阅读 · 0 评论 -
Vue Props 小秘密:冒号 (:) 和短横线 (-) 到底听谁的?
本文解析了Vue组件中props命名与使用的核心规则:1)多单词prop在模板中需用kebab-case,JS中用camelCase;2)与HTML原生属性同名时保持原生写法;3)单单词prop直接使用;4)传递非字符串值时必须用冒号(:)进行动态绑定。通过决策流程图、时序图和状态图,清晰展示了不同场景下的props处理逻辑,帮助开发者避免常见错误。原创 2025-10-25 16:05:47 · 647 阅读 · 0 评论 -
Element Plus 小秘密:el-input-number 的 controls-position 到底有啥用?
Element Plus 的 el-input-number 组件提供了 controls-position 属性来控制增减按钮的布局。默认空值时,按钮分列输入框两侧,适合空间充足、需要直观操作的场景;设为 right 时,按钮会垂直排列在右侧,更节省空间且视觉统一,适合表单密集或追求极简设计的场景。这个细节属性体现了组件的灵活性,开发者可根据实际需求选择合适的布局样式来优化用户体验。原创 2025-10-25 10:42:47 · 714 阅读 · 0 评论 -
Vue 侧边栏的“幽灵占位”:我是如何干掉那个空白菜单项的
《Vue侧边栏"幽灵占位"问题排查实录》摘要: 前端开发中遇到一个诡异现象:当后台菜单被设置为隐藏时,侧边栏仍保留空白占位。经过排查发现,问题源于一个计算属性theOnlyOneChild的错误兜底逻辑 - 当所有子菜单隐藏时会错误返回父菜单自身,导致渲染出空DOM节点。最终通过封装shouldShowItem函数实现智能判断:父菜单需有可见子项才渲染,叶子节点直接显示。这一方案既解决了幽灵占位问题,又避免了误伤正常子菜单。案例启示:DOM不存≠不占位,修复时需警惕副作用,复杂逻辑应封装原创 2025-10-23 20:49:46 · 786 阅读 · 0 评论 -
El-Tree 的“坑”与“药”:我是如何修复那个“幽灵勾选”Bug的
摘要: 本文分享了Element Plus的el-tree组件在权限管理场景下遇到的“幽灵勾选”Bug排查过程。由于默认的check-strictly="false"父子节点关联逻辑,当部分子节点被勾选时,父节点会被自动勾选并连带选中所有子节点,导致权限数据异常。解决方案是通过设置check-strictly="true"解除父子关联,同时需在提交时合并半选父节点ID。文章对比了两种模式的适用场景,强调精确权限控制需启用严格模式,并提醒注意半选节点的处理逻辑。(149原创 2025-10-23 15:58:16 · 931 阅读 · 0 评论 -
从“刷新空白”到“豁然开朗”:一次史诗级的 Vue 动态路由调试之旅
摘要: 本文分享了一次Vue动态路由权限系统Bug调试经历。刷新页面后出现空白,排查发现pinia-plugin-persistedstate插件错误地持久化了不可序列化的路由状态,导致出现"僵尸路由"。最终发现是版本升级后paths属性被移除,改用pick属性才解决问题。关键教训:1)警惕破坏性更新;2)坚持查阅官方文档;3)谨慎持久化状态;4)信任工具提示。通过这次调试,作者强调了耐心、细致和尊重文档的重要性。(150字)原创 2025-10-23 14:33:43 · 963 阅读 · 0 评论 -
CSS 探案:为何 Element Plus 的 align=“center“ 全局设置“失灵”了?
Element Plus组件内部的表格布局默认 CSS 规则是:text-align: left原创 2025-10-21 14:25:40 · 1098 阅读 · 0 评论 -
从零到一:手把手教你用 Nginx + Shell 脚本部署 Vue 3 项目
本文详细介绍了如何将Vue 3项目部署到Ubuntu服务器,并实现一键化更新。主要步骤包括: 服务器准备:安装Nginx并配置网站目录 Nginx配置:设置Vue Router的history模式处理规则 本地开发:编写自动化部署脚本deploy.sh,实现打包+上传一体化 部署验证:通过脚本快速完成部署更新 整个过程通过Shell脚本实现自动化,大大简化了日常部署流程,适合快速迭代的前端项目。文末还提供了SSH免密登录等优化建议,进一步提升部署效率。原创 2025-10-11 20:51:47 · 1253 阅读 · 0 评论 -
你项目里的 normalize.css 究竟是何方神圣?
摘要: 在重构管理后台项目时,发现不同浏览器对<body>的默认样式存在差异(Chrome默认margin:8px)。通过对比旧项目,发现其使用了normalize.css——一个由Nicolas Gallagher开发的流行CSS库,专门用于统一浏览器默认样式。该库通过保留合理默认值并修复浏览器差异(而非暴力清零),为项目提供了更稳定的样式基础,有效解决了跨浏览器兼容性问题。 (字数:149) 注:摘要聚焦核心问题与解决方案,省略了技术栈细节和图片引用,符合字数要求且保持信息完整。原创 2025-10-10 16:08:49 · 897 阅读 · 0 评论 -
给 npm install 做一次大扫除:我如何干掉 deprecated inflight 和 glob 警告
摘要 本文分享了如何解决 npm install 时出现的 deprecated inflight 和 glob 警告问题。作者通过 npm ls 命令追踪到警告源头是 style-resources-loader 包,发现其在现代 Vite 项目中已冗余。解决方案包括: 卸载冗余包(节省24个依赖) 清理环境(删除 node_modules 和 lock 文件) 重新安装验证 关键经验: 不要忽视 deprecated 警告 善用 npm ls 排查间接依赖 定期审视项目依赖 拥抱现代工具的内置功能 最终原创 2025-10-09 21:12:53 · 1197 阅读 · 0 评论 -
一次搞定!Vite + Sass 项目中烦人的 legacy-js-api 警告 ⚠️
摘要 本文针对 Vite + Sass 项目中出现的 legacy-js-api 警告,提供了完整的解决方案。该警告源于 Sass 弃用了旧版 JS API,而 Vite 仍在使用旧接口调用。通过分析官方文档,作者锁定问题在于工具链版本适配,而非业务代码。 解决步骤: 定位问题:确认警告来自 Sass 工具链,需升级 Vite。 优化网络:使用 nrm 切换至淘宝源,解决 npm view 查询卡顿问题。 安全升级:创建 Git 分支,通过 npm install @latest 逐步升级 Vite、Vue原创 2025-10-09 20:45:49 · 1143 阅读 · 0 评论
分享