- 博客(153)
- 收藏
- 关注
RSS订阅
原创 windsurf的配置和项目规则、工作流、agent技巧使用
如果你是前端开发工程师，尤其是负责中后台项目、管理后台、业务配置平台这类复杂工程，那么Windsurf不只是一个“会补代码”的 AI 工具，它更适合作为一个真正参与工程协作的智能开发助手。MCP如何配置与使用Workflow工作流怎么设计项目规则与全局规则如何约束 AI 输出Memory记忆机制怎么服务持续开发SkillAgent应该如何理解和规范使用在真实 Vue 3 + TS + Vite 项目中的推荐实践。
2026-04-23 18:04:36
618
1
原创 windsurf下载安装使用教程
Windsurf 是一款以开发者需求为核心的现代化 AI 编辑器，它不仅提升了代码编写的效率，还通过深度协作功能带来前所未有的智能开发体验。无论是个人开发还是团队项目，它都能为用户提供强大的支持，是未来开发工具的新标杆。希望文章对大家有所帮助，后续我还会继续进行编写windsurf具体遇到的问题和解决办法的。
2025-09-08 14:59:34
5696
原创 Webpack vs Vite 构建工程化实战（Vue 项目深度解析）
本文针对Vue2+Webpack开发中的性能痛点，深入解析工程化优化方案。首先展示完整的Vue2 Webpack配置示例，包括入口设置、Loader规则（Vue/JS/CSS/静态资源）、插件系统（VueLoader/HtmlWebpack/MiniCssExtract等）、开发服务器和生产优化配置。随后通过package.json脚本和依赖清单，呈现典型项目的构建命令和核心依赖。文章将对比Webpack与Vite的架构差异，并结合真实项目案例，提供可直接落地的Vite迁移方案，解决Webpack构建慢、配
2026-06-11 10:37:24
414
原创 Day 4｜高级组件与状态管理优化实战（Vue3 + TS 后台项目）
这篇文章分享了在Vue 3后台管理系统开发中处理复杂组件与状态管理的最佳实践。主要内容包括： 项目结构：基于Vue 3 + TypeScript + Pinia + Element Plus的技术栈，采用标准化目录组织。 TreeSelect组件封装： 统一树形选择器的接口与交互 支持多选、单选和禁用等配置 提供类型化的TS接口定义 与后端API解耦的设计 Pinia状态管理： 权限/菜单/用户信息的集中管理 提供类型安全的状态定义 封装常用权限检查方法 通过getters和actions组织业务逻辑 工程
2026-06-09 15:36:18
192
原创 Day 3｜表格表单分页范式与 vue-request 最佳实践：从配置驱动到业务落地
这篇文章摘要可以概括为以下内容： 本文主要介绍中后台管理系统开发中的核心技术栈和最佳实践。重点讲解了基于Vue3的中后台表格/表单标准化开发范式，包括：1）使用vue-request库管理请求状态，实现缓存、轮询、防抖等高级特性；2）Element Plus组件库在表格、表单等场景的应用；3）通过楼栋管理实战案例，展示完整页面结构（筛选表单、操作按钮、数据表格、分页）的实现方式；4）提供可复用的组合式函数(useList/useForm/useExport)和SchemaForm动态表单组件。文章详细说明了
2026-05-28 17:31:37
409
原创 Day 2｜项目目录与多布局、路由与权限守卫：从结构到落地代码
本文介绍了中后台项目的目录结构设计与权限控制方案。采用分层目录结构，明确职责边界，实现多布局容器复用。通过路由元信息meta.layout指定布局类型，支持主布局和业务布局的灵活切换。设计了基于角色和权限点的访问控制模型，使用Pinia管理权限状态，提供路由守卫实现登录校验和动态权限过滤。方案包含完整的代码示例，包括路由配置、权限状态管理和布局组件实现，可快速落地到实际项目中。
2026-05-18 16:26:24
401
原创 SSO单点登录讲解
本文介绍了单点登录(SSO)系统的实现方案，包括测试和正式环境地址、接入流程、工作流程、认证机制和API接口。系统通过票据(ticket)机制实现用户一次登录访问多个应用，详细说明了登录/登出时序、签名算法和错误码处理。同时提供了常见问题解答，如获取应用凭证、签名失败处理、票据有效期等注意事项。该SSO方案采用SHA256签名算法确保安全性，支持统一认证和登出功能。
2026-05-15 14:45:39
369
原创 Day1 | 从 0 搭建 VueDemo Web Admin 项目环境：技术栈、插件链与自动化脚本全解析
本文介绍了从零构建Vue 3后台管理项目的基础环境搭建过程。主要内容包括：1) 技术栈选择(Vue 3+Vite+Pinia+TS)；2) 环境准备(Node 20+、pnpm、Husky)；3) 项目初始化步骤；4) 目录结构设计。重点讲解了如何通过Husky实现代码提交前的自动化检查，以及如何配置Vite插件链来管理组件、路由和样式。文章还提供了完整的项目结构图示，帮助开发者理解从开发到部署的完整流程，为后续功能开发打下坚实基础。
2026-05-13 13:47:40
437
原创 大厂逼员工用AI：形式主义闹剧？还是效率革命？从“工具”到“队友”的正确打开方式
真正的降本增效来自“人机高效协作”，不是“AI 使用频次”。把 AI 从“强制任务工具”升级为“并肩队友”，你会更快，也会更强。
2026-05-09 16:27:07
433
原创 前端高级开发工程师面试准备一
高级前端面试的核心是“原理 + 实战 + 思维”：既要懂 “为什么”（底层原理），也要能 “做出来”（实战经验），还要能 “想清楚”（架构思维、决策能力）。准备过程中，避免 “碎片化学习”，需建立 “知识体系”（如 “JS→浏览器→框架→工程化→架构” 的逻辑链），同时结合实际项目沉淀 “解决问题的方法论”—— 这才是高级前端的核心竞争力。！
2025-09-17 18:16:56
863
原创 通过HTML/CSS 实现各类进度条的功能。
需求：我们在开发中会遇到使用各式各样的进度条，因为当前插件里面进度条各式各样的，为了方便我们定制化的开发和方便修改样式，我们这里使用。通过本文学习我们会明白如何使用 HTML/CSS 创建各种基础进度条及花式进度条及其动画的方式。
2024-07-19 15:32:49
10975
原创 vue通过echarts实现炫酷图表功能
需求：Echarts图表在我们开发工作中比较常见的使用，有时候开发需求需要我们做一些比较炫酷自定义的功能图表，这个时候基本的官网。中是不满足我们使用的。这里我们推荐几款Echarts的社区网站，还有几个实例炫酷的图表就行演示使用。2-以下是具体的图表炫酷的案例分析如下。
2024-07-16 19:00:09
1550
原创 使用echarts绘制中国地图根据不同的省份划分到指定区域里面中
需求：我们在开发过程中会遇到使用中国地图来划分不同区域省份下面的数量统计情况，但是有时候使用Echarts里面地图功能和我们实际业务需求不匹配的，这个时候就需要我们手动自定义进行划分不同区域下面的省份数据。例如大区1下面有哪些省份，大区2对应哪些的省份进行划分显示的。【2】把需要合并的省份的经纬度数据合并起来。
2024-07-05 16:40:59
1318
原创 Vue3学习和进阶
Vue是一款用于构建用户界面的javascript框架。它基于标准的HTML、CSS、JS进行构建，并且提供的一套声明式的，组件化的编程模型，进而帮助我们高效开发用户界面。无论是复杂还是简单的界面，我们都可以用vue进行胜任的。setup() {return {以上的示例可以完全给我们进行展示了Vue的两大核心的功能声明响应式：Vue基于标准的HTML拓展的一套模板语法，使得我们可以声明式的描述最终输出的HTML和Javascript状态直接的关系响应式。
2024-04-01 17:44:21
1292
原创 通过http链接形式下载文件报错（referer不通过）
这个问题是被bucket-referer策略拒绝，服务给拒绝访问的。我们可以通过给a标签设置no-referrer。
2024-03-14 15:58:49
4089
1
原创 vue实现自定义树形穿梭框功能
我们在开发过程中，会遇到需要将一个数据选择做成穿梭框，但是要求穿梭框左侧为树形结构、右侧为无层级结构的数据展示，ElementUI自身无法在穿梭框中添加树形结构，网上搜到了大佬封装的插件但是对于右侧的无树形结构一点还是不太满足。以下是我们简单的封装写的组件可以实现此功能。如果我们想要用插件实现，推荐使用。
2024-02-29 16:25:58
2403
4
原创 vue3里面使用el-image-vie出现图片预览导致页面卡顿停止加载问题
需求：我们在使用element-plus组件里面的图片预览时候，通过点击按钮来实现图片预览的效果。在开发过程中我们会遇到图片预览的时候出现卡顿出不来，导致当前的页面停止加载了。
2024-02-27 19:04:21
2147
原创 npm安装下载修改镜像源
network request to https://registry.npmjs.org/postcss-pxtorem failed, reason: connect ETIMEDOU，这是因为默认npm安装会请求国外的镜像源，导致下载缓慢容易断开请求下载失败的。request to https://registry.npm.taobao.org/axios …根据错误提示信息，是由于原淘宝npm镜像地址：“ https://registry.npm.taobao.org ” 的证书失效，
2024-01-30 16:11:02
735
原创 el-tree基础的树形节点设置节点不能选中高亮出来，对已经选中的节点设置disabled，对当前节点刚选中后设置禁用disabled
我们使用element-ui或者element-plus的时候会遇到树形控件的使用，我们使用树形控件会限制有的节点不让选中和高亮出来，这个时候需要我们做限制。在实现中我们发现了element-ui和element-plus的时候他们实现的方式还是有点区别的，我们就简单来实现一下。发现element-ui中更改current-node-key值无效，最后用this.$refs.tree.setCurrentKey方法实现了。
2024-01-26 15:24:03
6726
原创 详解Vite创建Vue3项目+vue-router+ts+vite+element-plus
在之前的文章中写过“Vue3+TS+ElementPlus的安装和使用教程【详细讲解】”，但那篇文章写的是创建vue3的项目没有使用到Vite构建工具进行创建还是使用的常规webpacket构建工具进行创建的。提到Vite和webpacket的时候我们可以简单说一下。Vite 和 Webpack 都是现代化的前端构建工具，它们可以帮助开发者优化前端项目的构建和性能。虽然它们的目标是相似的，但它们在设计和实现方面有许多不同之处。具体的区别和工作原理我们可以看此文章“vite和webpack的区别和作用。
2024-01-17 17:04:04
2854
原创 vite和webpack的区别和作用
Vite 和 Webpack 都是现代化的前端构建工具，它们可以帮助开发者优化前端项目的构建和性能。虽然它们的目标是相似的，但它们在设计和实现方面有许多不同之处。
2024-01-17 12:00:32
1959
原创 轮询和长轮询的讲解和实战
当今web应用程序对实时通信的需求越来越高，为了满足客户需求，轮询和长轮询成为常用的技术手段。本文将深入讲解一下轮询实现原理、优缺点和使用场景。
2024-01-16 17:38:30
3786
原创 vue实现导航里面锚点定位和滚动监听功能
</div></div>">二级类目1 商品内容</div>">二级类目2 商品内容</div>">二级类目3 商品内容</div>">二级类目4 商品内容</div></div></div>
2024-01-12 15:31:13
2062
原创 vue2、vue3里面去掉访问地址中路由‘#‘号--nginx配置
如果浏览器支持History API，那么就可以使用history.pushState()和history.replaceState()方法来更新浏览器的URL路径，从而可以实现前端路由，而不用像传统的多页面应用一样每次都请求服务器获取新的HTML页面。我们在vue2中，默认情况下出现#号的，是因为Vue 的 router 默认是 hash 模式，在 hash 模式下，是会有#号在URL上；在 router 的 index.js 页面内，mode 默认是 hash，修改为 history。
2024-01-10 17:12:29
6622
原创 自定义列表里面实现多选功能
我们在开发过程中有时候会遇到列表里面会有多选，然后列表样式也要进行自定义。这里我们如果直接使用ElementUI组件el-table表格的时候这里实现起来可能比较复杂不方便，我们这里手写自定义一下列表里面多选的功能。1- 我们这里先建一个子组件LiteratureTable.vue。
2024-01-04 16:19:15
722
原创 Vue3+TS+ElementPlus的安装和使用教程【详细讲解】
本文简单的介绍一下vue3框架的搭建和有关vue3技术栈的使用。通过本文学习我们可以自己独立搭建一个简单项目和vue3的实战。随着前端的日月更新，技术的不断迭代提高，如今新vue项目首选用vue3 + typescript + vite + pinia+……模式。以前我们通常使用Vue2时，使用的是选项式API进行vue项目的开发，当vue3的出现，组合式API进行对项目实例化和构建。另外需要注意vue项目需要nodeJS环境的支持，而vue3需要nodeJS的版本最低是node14.18版本。
2024-01-03 16:46:00
4197
3
原创 Vue3使用的Compostion Api和Vue2使用的Options Api有什么不同？
在逻辑组织和逻辑复用方面Composition API 是优于 Options API因为 Composition API 几乎是函数，会有更好的类型推断。对tree-shaking 友好，代码也更容易压缩Composition API 中见不到 this 的使用，减少了 this 指向不明的情况如果是小型组件，可以继续使用 Options API，也是十分友好。
2023-12-26 14:55:18
1534
原创 Vue3设计目标和优化
另外对组件而言，如果模板中使用不在当前组件中定义的变量，那么就会不太容易知道这些变量在哪里定义的，这就是数据来源不清晰。这里还需要说明的是，Composition API 属于 API 的增强，它并不是 Vue.js 3.0 组件开发的范式，如果你的组件足够简单，你还是可以使用 Options API。Composition API 除了在逻辑复用方面有优势，也会有更好的类型支持，因为它们都是一些函数，在调用函数时，自然所有的类型就被推导出来了，不像 Options API 所有的东西使用 this。
2023-12-25 18:14:43
1291
1
原创 uniapp项目在微信开发工具里打开报错Error:app.json:在项目根目录未找到app.json
uni-app 项目我们在微信开发工具里面打开报错。
2023-12-25 13:58:18
6269
7
原创 vue3使用echarts漏斗，根据数据计算比例大小
需求：我们在开发过程中会遇到漏斗图的使用，如果用echarts里面自带的算法绘制渲染漏斗图时候，如果后端给的数据相差不大很接近时候，漏斗图渲染的结果不明显看不出来变化的。
2023-12-22 11:36:54
1413
原创 vue3父子组件之间的通信使用
想要了解父子组件之间的通信方式和使用我们首先要知道什么是组件通信？组件通信就是指组件与组件之间的数据传递组件的数据是独立的，无法直接访问其他组件的数据想使用其他组件的数据，就需要组件通信工作中我们的代码量会非常多，为了后期便于维护和调整，我们可以把一个业务模块根据基础的功能模块拆成多个小组件，例如：list展示件、form 表单模块、弹窗等……此时我们就用到了父子组件通信。知道原理后，我们要回到实际开发应用中去：一般情况下。
2023-12-06 15:58:46
1956
原创 vue3里面生命周期的使用
vue2里面的生命周期和vue3生命周期是非常的相似的，我们通过访问生命周期钩子来处理不同场景之间的应用。生命周期钩子的函数定义：每一个Vue组件实例在创建时都需要经历一系列的初始化步骤，比如数据侦听，编译模板，挂载实例到DOM，以及在数据改变时更新DOM。在此过程中的阶段我们称为是生命周期钩子函数。这里我们使用的vue3生命周期函数为组合式API下的生命周期函数的。【组合式写法没有 beforeCreate / created 生命周期，并且组合式写生命周期用哪个先引哪个。
2023-12-05 18:44:50
1870
原创 vue3里面使用ref和toRef、toRefs
vue3 里面我们经常会使用。创建可以使用。这里，对象有一个value属性，其值就是所传递的原始值。ref() 将传入参数的值包装为一个带 .value 属性的 ref 对象。ref、toRef、toRefs 都可以的本质是拷贝，修改响应式数据，，修改响应式数据，一次仅能，接收两个参数，，它会，然后挨个调用toRef执行。
2023-12-05 16:23:36
1943
原创 vue3使用echarts中国地图
需求：Vue3 + vite +TS 项目内使用 Echarts 5 绘制中国地图。鼠标悬浮省份上面显示指定的数据，地图支持缩放和拖拽的功能，页面放大缩小支持自适应，window.addEventListener(‘resize’, resize);添加防抖动函数debounce。
2023-11-28 16:23:37
1946
原创 校验验证码是否过期（定时刷新验证码）
我们在登录的时候会遇到通过接口请求验证码的操作，这里的验证码会有过期的时间，当我们验证码过期了，我们要进行重新刷新验证码。我们这里根据后端返回的当前时间和过期时间判断，过期的时间超过了当前时间的时候这里进行刷新验证码操作。我们这里使用dayjs控件进行时间转换。
2023-11-03 17:38:03
1165
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人