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 评论