- 博客(14)
- 收藏
- 关注
RSS订阅原创 Vue学习笔记-文件上传组件封装（单文件 / 多文件 / 进度条 / 预览）
本文介绍了基于ElementPlus封装通用上传组件BaseUpload的实现过程。该组件支持单/多文件上传、类型/大小限制、进度条显示、预览回显等功能，通过v-model绑定数据，自动处理token请求头，可灵活应用于头像、附件等上传场景。核心代码包括上传校验、回调处理和表单集成，使用时可仅配置action和v-model即可实现80%常见上传需求，显著提升开发效率和维护性。
2025-12-29 10:44:06
712
原创 Vue 学习笔记-表单最佳实践（封装 + 校验 + 动态表单）
本文分享了基于Vue3+ElementPlus封装通用表单组件的实践。作者针对后台系统常见的表单需求（多种控件、校验、复用等），设计了一套配置驱动的解决方案。通过JSON配置表单项，封装BaseForm组件自动渲染不同控件，并实现校验、重置、数据回显等功能。组件支持与页面或弹窗灵活组合，显著提升开发效率。后续只需配置表单结构即可快速完成开发，为文件上传组件封装奠定了基础。
2025-12-25 15:48:11
341
原创 Vue学习笔记-树形结构封装 + 异步加载
本文分享了基于Vue3和ElementPlus封装可复用树形组件的实践经验。作者以BaseTree.vue为核心组件，支持多层级树结构展示、异步加载子节点、节点勾选等功能。通过props接收树形数据、懒加载函数等配置项，使用v-model绑定勾选节点，并暴露节点点击事件。文章详细介绍了组件封装思路、核心代码实现，以及如何与后台API结合获取部门树数据。该组件可灵活应用于部门管理、权限配置等常见后台场景，实现一次封装多处复用。
2025-12-23 12:00:00
418
原创 Vue学习笔记-分页表格最佳实践（封装 Table + 分页组件）
本文介绍了如何封装一个通用的Vue分页表格组件BaseTable，结合BasePagination实现高效开发。通过组件化设计，将常见的表格分页功能（自动请求、loading状态、参数处理等）封装成可复用组件，使列表页面代码从几十行缩减到5行以内。文章详细展示了组件的实现过程，包括分页控制、数据请求、插槽支持等功能，并提供了具体使用示例。该方案能显著提升后台管理系统的开发效率，实现"写一次，到处用"的目标。
2025-12-20 12:00:00
1891
原创 Vue学习笔记-Axios 全局封装（自动带 Token、统一响应处理）
《Vue项目中Axios的封装实践》摘要 本文详细记录了在Vue项目中封装Axios的过程，旨在实现统一、规范的API调用。主要内容包括：创建axios实例并配置基础URL和超时时间；通过请求拦截器自动携带Token；利用响应拦截器统一处理错误和规范化返回数据；在main.js中全局挂载消息提示组件；创建API模块实现业务接口的清晰管理。文章还涵盖了登录页面的具体实现、跨域问题解决方案，并提出了后续扩展方向（如Token自动刷新、多环境切换等）。通过这套封装方案，项目获得了成熟的API调用能力，使代码更易维
2025-12-14 18:00:00
1160
原创 Vue学习笔记-首页布局+Echarts使用
Vue开发者分享后台系统首页Dashboard开发心得，重点介绍使用Echarts实现数据可视化。文章详细记录了开发过程：1) 采用Element UI组件搭建三部分布局结构（欢迎区、统计卡片、图表区）；2) 集成Echarts实现四种动态图表（折线图、饼图、柱状图、实时面积图）；3) 响应式设计适配不同屏幕；4) 未来扩展计划包括接入后端API数据。作者强调保持界面简洁的同时，通过数据可视化提升用户体验，为后续功能扩展奠定基础。
2025-12-12 08:00:00
402
原创 Vue学习笔记-模拟登录（含登录页面、Token 存储、路由守卫）
本文记录了Vue学习者如何为后台系统添加登录控制功能的过程。主要内容包括：1) 创建带表单验证和动画效果的登录页面，实现模拟登录API；2) 修改路由结构，添加登录页路由；3) 配置路由守卫实现权限控制；4) 在布局头部添加退出登录功能；5) 使用localStorage存储token实现登录状态保持。通过这套方案，系统具备了完整的登录流程、路由拦截和权限控制等基础安全功能，为后续实现token刷新、权限管理等更复杂的安全机制奠定了基础。
2025-12-11 08:30:00
586
原创 Vue学习笔记-多级菜单 + 图标（递归渲染、自动展开、收缩模式）
本文详细记录了使用Vue3和Element Plus实现后台管理系统多级菜单的全过程。主要内容包括：1）引入Element Plus组件库和图标库；2）设计树形菜单结构，支持无限嵌套；3）通过递归渲染实现多级菜单展示；4）使用el-menu组件优化菜单交互，实现自动展开父级菜单；5）为菜单项添加动态图标映射功能；6）采用现代化UI设计风格美化侧边栏。该方案不仅实现了基础功能，还通过Pinia状态管理、路由配置优化等方式提升了系统的可扩展性，为后续接入真实API和权限系统奠定了基础。
2025-12-10 08:30:00
924
原创 Vue学习笔记-左侧菜单优化：高亮、激活状态、折叠侧边栏
本文记录了Vue3后台管理系统左侧菜单栏的优化过程。作者通过使用VueRouter的useRoute实现路由自动匹配高亮功能，并添加了折叠菜单功能，通过控制宽度变化和显示隐藏文字实现基础折叠效果。文章详细介绍了如何在Header添加折叠按钮、在Layout中管理折叠状态、以及为Sidebar添加响应式样式。此外，还优化了菜单激活状态视觉效果，包括左侧高亮条和hover效果。这些改进使菜单栏具备了后台系统的基本功能特性，为后续实现多级菜单、图标美化等功能奠定了基础。
2025-12-09 08:00:00
611
原创 Vue学习笔记-全局布局与通用页面结构（头部+页脚 + 左侧菜单）
本文记录了Vue学习者构建管理后台全局布局的过程。通过创建Layout组件，拆分为Header、Sidebar和Footer三个子组件，实现了后台系统的基本框架结构。重点包括：1) 采用flex布局实现整体页面结构；2) 编写静态菜单组件；3) 修改路由配置为嵌套结构，使所有页面共用布局外壳。最终效果包含顶部导航栏、左侧菜单栏、主内容区和底部页脚，为后续功能扩展奠定了基础。下一步计划优化菜单功能，添加高亮、折叠和子菜单等特性。
2025-12-08 08:30:00
950
原创 Vue学习笔记-路由与页面跳转（Vue Router）
本文记录了Vue3项目中配置VueRouter实现页面跳转的过程。主要内容包括：1)安装VueRouter并创建路由配置文件；2)在main.js注册路由；3)创建Home和About两个示例页面；4)使用router-link和router-view组件实现基本跳转；5)通过useRouter实现编程式导航；6)配置动态路由获取参数；7)以TodoList为例演示实际应用。文章详细介绍了从零开始配置路由的完整步骤，并比较了不同跳转方式的使用场景，为后续实现更复杂的页面布局奠定了基础。
2025-12-07 08:30:00
1832
原创 Vue学习笔记-基础语法与响应式数据（ref、reactive、v-model）
本文记录了Vue3学习笔记，重点介绍了Composition API的核心用法。首先讲解setup()函数的基本使用，以及响应式数据管理工具ref(用于基本类型)和reactive(用于对象/数组)的用法。然后详细说明模板语法，包括插值表达式、属性绑定(v-bind)、事件绑定(v-on)、条件渲染(v-if/v-show)和循环渲染(v-for)。最后通过实现一个简单的TodoList小项目，综合运用了v-model双向绑定、方法调用等知识点，将响应式数据与模板渲染相结合。
2025-12-06 08:30:00
468
原创 Vue学习笔记-项目结构与文件结构
本文记录了Vue学习者在2025年12月整理的Vue项目结构和文件配置要点。主要内容包括：1) 使用Vue CLI创建的标准项目目录结构；2) 关键文件功能说明，如index.html(挂载点)、main.js(应用入口)、路由配置等；3) 典型.vue文件的三部分结构(template模板、script逻辑、style样式)；4) 项目配置(package.json依赖管理、vite.config.js构建配置)。
2025-12-05 08:15:00
424
原创 Vue学习笔记-开发环境搭建（Node.js+WebStorm+npm）
本文记录了搭建Vue本地开发环境的完整流程。首先需要安装Node.js（含npm）作为运行环境，推荐使用LTS稳定版。为提高下载速度，建议配置淘宝镜像源。接着全局安装Vue CLI脚手架工具，并配置WebStorm IDE的Vue插件支持。通过vue create命令创建项目后，即可在WebStorm中实现语法高亮、智能提示等开发功能。文章还提供了常见问题解决方案，如Windows权限错误、端口占用等。这套基于Node.js+Vue CLI+WebStorm的环境既适合初学者入门，又能满足专业开发需求，为后
2025-11-28 16:09:05
805
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人