- 博客(306)
- 收藏
- 关注
RSS订阅原创 Vue的导航 -vue-router
Vue Router 是官方提供的路由管理库，它允许开发者在单页面应用（Single Page Application, SPA）中实现不同视图之间的平滑切换。本篇文章将详细介绍 Vue Router 的核心概念，并通过一系列的代码示例来帮助你更好地理解和掌握其用法。
2025-01-06 18:14:55
457
原创 vue管理后台搭建
在tsconfig.json文件中的compilerOptions对象内添加配置项。到目录，然后运行yarn安装项目依赖，运行yarn dev启动项目，运行端口。@types/node内部包含了对Node.js 核心模块及常用第三方库的。描述，增加了TypeScript 对 Node.js 环境的支持。3.在vite.config.ts文件中添加配置项。main.ts中完整引入element-plus。选择你要创建的模板，这里我选择vue-ts模板。, 您可以配置以下代码在。引入router文件。
2025-01-06 18:10:58
381
原创 函数柯里化
函数柯里化（Currying）是将一个接受多个参数的函数转换为一系列接受单一参数的函数的过程。换句话说，柯里化是通过固定一个参数，返回一个新函数，该函数继续接受下一个参数，直到所有参数都被提供，从而最终得到结果。函数柯里化是一种将多参数函数转换为接受单一参数的函数的技术，它使得函数更加灵活、可组合和易于复用。应用场景部分应用：提前填充函数的一部分参数。事件处理：为特定的事件创建定制化的回调函数。函数组合：将多个小函数组合成一个更大的函数。动态配置：逐步提供函数的参数，灵活地生成配置。
2025-01-03 18:35:14
690
原创 如何二次封装组件(vue3版本)
在开发 Vue 项目中我们一般使用第三方组件库进行开发，如, 但是这些组件库提供的组件并不一定满足我们的需求，这时我们可以通过对组件库的组件进行二次封装，来满足我们特殊的需求。对于封装组件有一个大原则就是我们应该尽量保持原有组件的接口，除了我们需要封装的功能外，我们不应该改变原有组件的接口，即保持原有组件提供的接口（属性、方法、事件、插槽）不变。这里我们对 Element-plus 的 input 组件进行简单的，封装一个 MyInput 组件。
2025-01-03 18:31:59
678
原创 前端开发中依赖包有问题怎么办
本地修改与补丁方法允许我们对 node_modules 中的包进行必要的修改，同时通过补丁文件的形式保存这些修改。这种方式既可以避免直接修改 node_modules 目录下的代码，也确保了项目的其他成员或在其他环境中部署时能够应用同样的修改。这个文件记录了修改的内容。如果你的项目使用 Git 进行版本控制，可以先提交所有其他更改，以便 git diff 只显示对第三方包的修改。在本地对包进行修改：直接在项目的 node_modules 目录下找到并修改对应的第三方包文件。
2025-01-02 16:13:39
861
原创 像素跳动效果
本案例实现了一个图片像素跳动的动画效果。将图片分解成像素块，默认进行垂直运动，当鼠标悬浮时切换为水平运动，创造出独特的视觉效果。吐槽一下：代码片段功能，没有找到上传图片资源功能，导致把图片转base64字符串才能正常运行。
2024-12-31 18:11:51
427
原创 Vite 构建 Vue3 组件库之路: 手写签名组件
首先，我们定义了一个接口className?: string;fillStyle?: string;: string;lineWidth?: number;lineStyle?这里，className允许用户为签名组件添加自定义类名，以便应用额外的CSS样式。fillStyle用于设置画布的填充颜色，用于设置线条的颜色，lineWidth用于设置线条的宽度，而lineStyle是一个函数，用户可以通过它对// 示例：设置为虚线通过});
2024-12-31 18:09:45
1231
原创 Vue转React选手头疼系列之【Fiber篇】
作为Vue转React选手，在学习完React的基本用法和常见的Hooks之后，尝试整理React的八股，但苦于React更新速度之快、网上资源的实效性，或者是讲的比较浅，看完总是感觉云里雾里的，所以尝试归纳总结一下对React的理解(主要是React Fiber & 更新流程)。如果有理解错误，还希望各位读者能够指出，多多交流指正🙏🏽(望嘴下留情。
2024-12-30 17:29:12
940
原创 网页优化两兄弟 —— 懒加载 and 预加载
在当今的数字时代，网页的加载速度和用户体验已经成为网站成功的关键因素。在我们日常浏览某些购物网站淘宝京东这种，我们有时候会遇到从上往下滑，图片显示正在加载中这种情况或者进入页面的时候有个loading，这就是我们接下俩要说的两兄弟懒加载和预加载。懒加载和预加载，这两位技术界的‘好兄弟’，各有千秋，各有所长。懒加载是‘懒人’的好帮手，等你需要的时候才会加载资源，节省了流量和时间，让用户体验更流畅。
2024-12-30 17:23:52
1754
原创 前端工程化系列二：编码提效
自 09 年 Nodejs 横空出世以来，经过十几年的发展，前端的能力边界已经发生翻天覆地的变化，已经不是简单的切图、组装页面的角色，表现力上从过往规格化的浏览器页面到如今具备丰富的可视化功能、3D 渲染、AR、VR 等；执行平台也从单纯的浏览器跃迁至如今的小程序、Hybrid APP、桌面应用、VR 设备、PWA、物联网终端等形态。但即便如此，当下的 Web 核心语言 —— JS、CSS、HTML 依然在不同方面存在不同类型的问题。
2024-12-27 17:32:47
549
原创 前端工程化系列一：序言
那么，什么是前端工程化呢？这个问题很重要，但很多同学对此可能还比较雾里看花，始终着眼于某些具体工具而没有抓住工程化的本质，在介绍具体手段之前有必要花点时间先深入讨论下。前端工程化是“软件工程”学科在前端领域的具体实践，而软件工程需要解决的核心课题是如何在规模化协作中保持更高的开发效率，产出更稳定的工程制品。
2024-12-27 17:26:24
655
原创 如何将vue-cli快速迁移到vite？
在这里提前定义好新打包工具需要的配置文件，到时直接复制过去。一个简易版的构建迁移工具已经完事了，完整代码贴在下面了，但是这个不一定满足所有每个人需求。比如需要添加一下项目相关的统一配置文件，打包命令等...，大家都可以可以参考这个项目结构去添加自己想做的事情！！！原文：https://juejin.cn/post/7452223024743055375。
2024-12-26 11:35:26
1168
1
原创 快来看，使用 CSS 打造复古老电影效果
本文将通过CSS来实现老电影的复古风特效，满满的怀旧感。整个案例，主要依靠CSS的filter属性，配合keyframe帧动画来实现。本文案例演示完之后，希望能够让大家收货不少干货知识！下面先来看一下最终效果：接下来，我们要来仔细看看如何实现的。
2024-12-26 11:29:48
716
原创 【前端】Vue Router路由传参的两种方式详解：params与query的使用技巧！
如果你还有其他关于Vue Router的问题，欢迎在评论区留言，我们一起探讨！💬。
2024-12-25 16:54:11
1277
原创 Vue自定义指令最佳实践教程
本文以复制文本的自定义指令详细介绍自定义指令的基础知识多个自定义指令如何进行代码及目录的组织如何更好的进行方法抽离使公共方法和自定义指令进行解耦自定义指令的高阶用法。
2024-12-25 16:46:56
459
原创 【vue高频面试题—场景篇】：在vue项目中是如何封装axios的，主要封装了些什么模块 提供了哪些全局功能
是一种常见的做法，用于统一管理 API 请求逻辑、配置全局拦截器和处理通用功能。这种封装不仅可以提高代码的复用性，还能便于管理和调试。，通常会将 API 分模块管理，每个模块对应一组相关接口。的请求和响应拦截器，用于处理通用逻辑。在 Vue 项目中，封装。为避免在组件中直接调用。
2024-12-24 14:46:37
820
原创 HTML&CSS&JS：全网颜值最高的登录注册页面，建议收藏
这段代码实现了一个用户注册和登录的界面，用户可以通过点击按钮在注册和登录表单之间切换。界面使用了背景图、圆角、阴影等样式，使其看起来更加美观。通过JavaScript的事件监听，用户的交互行为能够动态更新界面，提供良好的用户体验。
2024-12-24 12:18:14
665
原创 从零开始搭建 Vue 3+Vite+TypeScript+Pinia+Vue Router+SCSS+StyleLint+CommitLint+...项目
恭喜你！🎉 现在你已经成功搭建了一个基于 Vue 3、Vite、TypeScript、Pinia、Vue Router、SCSS、StyleLint、CommitLint、Husky 和 Lint-Staged 的开发环境。希望这个教程对你有所帮助！如果你有任何问题或建议，请在评论区留言。让我们一起进步！💪原文：https://juejin.cn/post/7451485514596745243。
2024-12-23 17:47:02
740
原创 全解！！！！vue/和react组件
Vue和React是目前前端最火的两个框架。不管是面试还是工作可以说是前端开发者们都必须掌握的。今天我们通过对比的方式来学习Vue和React的组件传值这一部分。本文首先讲述Vue2Vue3React的组件传值方式，然后具体介绍了每种传值的应用场景以及具体的使用。最后对比总结了Vue和React在组件传值这部分的相同点和不同点。希望通过这种对比方式的学习能让我们学习的时候印象更深刻，希望能够帮助到大家。综上所述，使用React构建现代Web应用程序是一个明智的选择。
2024-12-23 17:19:52
956
原创 Vue 和 React 框架两手抓：开启前端开发的冒险之旅
</div>const {createApp,ref} = Vuesetup() {return {count,increase</script>
2024-12-20 16:55:24
666
原创 Vue.js 实现树形结构管理系统的前端设计与实现
本文通过一个树形结构管理系统的实现，展示了如何使用 Vue.js 和 Element UI 组件来处理复杂的数据展示和操作。通过灵活的组件化设计、实时搜索与过滤、表单校验与提交等技术，前端开发可以有效地管理和展示层级结构数据。对于开发者来说，这样的系统提供了很多值得借鉴的设计思路和实现方式，特别是在数据管理和用户交互方面的优化。原文：https://juejin.cn/post/7449780605007708187。
2024-12-20 16:46:42
809
原创 为什么vue要用scoped
Scoped 的优势：使用scoped样式可以有效避免组件间样式冲突，使样式更加模块化和可管理。穿透的必要性：在修改第三方组件（如 Element UI）样式时，使用::v-deep允许我们突破样式的作用域限制，从而可以更改这些组件的默认样式。编译后的差异：如果使用::v-deep，Vue 会生成适用于全局的选择器，使样式能够匹配到不在当前作用域内的组件；而不使用它时，样式会受到scoped限制，无法匹配到全局样式。前端资料。
2024-12-19 11:23:11
397
原创 CSS基础教程 - 值与单位
本文详细介绍了CSS中的常见值类型和单位，包括长度单位、颜色值、时间单位、角度单位和频率单位。通过这些值和单位，我们可以精确地控制元素的样式，实现丰富的视觉效果。希望本文能帮助你更好地理解和使用CSS中的值与单位。前端资料。
2024-12-19 11:18:48
381
原创 React 对话框组件 Dialog
React 对话框组件Dialog是一个非常实用的 UI 元件，可以帮助开发者轻松实现模态和非模态的弹出窗口。本文介绍了Dialog组件的基本用法，常见问题及其解决方案，并通过代码案例进行了详细说明。希望本文能帮助你在实际工作中更高效地使用 React 实现对话框组件。原文：https://juejin.cn/post/7449373647235088421。
2024-12-18 15:43:29
656
原创 React19:不是哥们，我useEffect用的正爽，你告诉我要被淘汰了？
就在前三天，本大二的苦逼学生的团队在给老外做项目的时候，因为他要求使用shadcn,作为团队唯一一个前端切图仔，只能去熬夜修炼。但是在我安装的时候，让我惊讶的并非shadcn的特性，而是哦里shit，这是什么？React19！😮🚀所以我直接放弃学习shadcn(其实大一的时候就用过了)，转头就去了解React19新特性。useEffect 是一个功能强大的 hook，但他又是最难驾驭的一个 hook，理解不够的开发者可能会由于滥用它而导致项目失控。包括被讨论最多的闭包问题，也往往跟它有关。
2024-12-18 15:36:40
906
原创 【学习】对工程化、wepack的理解
页面需要的html、css、js，使用vue写页面是便于前端模块开发维护，就需要一个工具将vue里的编码转成页面需要的语言。前端工具有很多webpack、gulp、grunt、vite、rollup、rolldown等。前端资料。
2024-12-17 18:37:35
540
原创 Vue 可组合项的良好实践和设计模式
最近，我与 Vue Storefront 的团队就编写 Vue 可组合项的模式进行了一次精彩的讨论。就我们的系统而言，可组合项负责存储主要业务逻辑（如计算、操作、流程），因此它们是应用程序的关键部分。不幸的是，随着时间的推移，我们没有那么多时间来创建某种因为我们的一些可组合项并不是真正的可组合项 😉我真的很高兴现在我们有时间重构我们构建新可组合项的方法，以便它们可维护、易于测试且真正有用。在本文中，我将总结我们创建的想法，并将它们与我在几篇文章中读到的良好实践和设计模式相结合。
2024-12-17 18:33:30
723
原创 react里面如何封装一个通用的Ellipsis组件
但是每次都写一次，比较麻烦，为了更好的摸鱼，所以把Ellipsis组件抽离出来。如果要渲染的元素没有给定宽度的话，需要手动向Ellipsis组件传一个width参数。Ellipsis组件的children必须是一个html元素标签。在平时的业务场景中，为了提升用户体验，经常会使用。计算要渲染文字的宽度，如果宽度超出，就显示...如果要渲染的元素已经有指定的宽度，则不需要。这里的问题是，如何计算文字的宽度呢？这里我用的是第二种。
2024-12-13 18:35:02
215
原创 Vue 基础代码片段（业务向）
笔者一年前做B端项目的时候，用的是Vue框架，开发中发现很多场景的相似性，且Vue语法相对React而言不够简洁，因此提炼出了共性的、高复用的代码片段（仅适用于新手水平），虽然当时只是经验不足的小小实习生一枚，且此后主要做React开发，但总结的这些片段依旧具有一定的意义，故整理出来：表单验证。
2024-12-13 18:23:11
229
原创 Vite 默认拆包策略
b） A 的依赖入口点是 B 的依赖入口点的子集，且A 的依赖副作用是 B 的相关副作用的子集。但你已经把A合并进B了，如果A依赖副作用不是B的相关副作用的子集，那么B相关副作用就改变了，但是B相关副作用是不能改变的）（其实【依赖副作用】是【相关副作用】的一部分，对于整个应用来说加载关系一定是满足每个chunk的相关副作用的，或者说每个chunk的相关副作用就是根据整个应用的加载关系推导出来的）。a) A的依赖副作用 是 B 相关副作用的 子集，B的依赖副作用 也是 A 相关副作用的子集。
2024-12-12 18:51:10
940
原创 把公司vue2项目改为用webpack5编译
目前来说应该是实现了vue2改为webpack5编译，编译速度确实快了不少，尤其是修改文件之后保存编译，而且打包后的文件也小了一点。不错不错，webpack5值得信赖呀！不过目前还没用作生产，不知道后续会不会出现其他问题。应该问题不大，出现报错，根据报错查找资料解决。当然如果直接改公司的项目还是不推荐，改完最好自己先用用，毕竟我改完也没直接用。而且最好是有webpack基础，不然出了问题就准备提桶跑路吧。而且到这里还没结束，还有打包的修改，下一篇文章继续更新。
2024-12-12 18:43:00
1305
原创 2025年前端技术趋势展望
未来，像Cursor这样的AI工具将带来更智能的代码补全、实时提示及协作功能，进一步优化开发流程。随着用户对页面加载速度和交互体验的要求提升，Web性能优化仍是前端开发的关键。WebGL和Three.js等技术的进步，使得越来越多的网站开始应用三维内容和增强现实（AR）技术，特别是在电商和虚拟展示领域。未来，这些平台将借助AI的支持，实现更智能的需求解析与应用生成，推动更多人参与应用开发。随着人工智能（AI）、低代码/无代码平台的兴起，以及实时协同开发工具的普及，前端技术将在2025年迎来多重变革。
2024-12-11 14:53:08
1610
原创 React 鲜为人知的 3 个小 Tips
使用场景：比如 echart 的组件的曲线条数一旦渲染就只能固定，即使 setOptions 塞入了多条曲线的值。修复该问题一个取巧的办法是用组件的条数当做 key。前者是后者的语法糖，其实还不准确。二者还是有区别的，当有属性要加的时候只能是后者，当然属性只能是。在下面的示例中，我们使用此技巧跳过 useEffect。使用 useEffect 当组件渲染完毕后聚焦输入框。的时候，我能想到的唯一场景就是。在输入框可用时立即聚焦，减少。里面，否则一律使用前者。使用场景，当需要用到。
2024-12-11 14:48:05
372
原创 React 多层级嵌套列表(树)的拖拽排序/移动，建议收藏
现代前端框架 React Vue 等都是数据驱动视图，所以凡事先定义数据结构，再考虑 UI 渲染。多层级嵌套列表（树），最常见的数据结构定义如下，虚拟 DOMvnode也是这样定义的。id: 'B',id: 'B2',],},],},id: 'D',],},demo 源码链接前端转全栈，可关注我开发的 Node 全栈 AIGC 知识库划水AI，AI 智能写作，多人协同编辑，复杂业务，真实上线。
2024-12-10 12:24:27
969
原创 探讨 ES6 的新原始数据类型，还不快来看？
Symbol是通过调用Symbol()函数来创建的。这个函数可以接受一个可选的标签（label），用于描述Symbol的用途，但并不影响其唯一性。每个Symbol实例都是独一无二的，即使它们使用相同的标签创建。// 输出: Symbol()// 输出: Symbol(xbk)由于Symbol的唯一性，它们非常适合用作对象属性的键，避免了潜在的命名冲突问题。这对于大厂开发复杂项目尤其重要，因为多个开发者可能会在同一代码库中工作，使用Symbol可以确保不同模块之间的属性名称不会发生冲突。
2024-12-10 12:11:48
553
原创 React 性能优化实战：从代码到架构的全方位提升
性能优化是一个持续的过程，没有一劳永逸的解决方案。关键是要建立起性能意识，在日常开发中就注意代码质量和性能影响。正如那句老话说的："性能是设计出来的，不是优化出来的。有什么问题欢迎在评论区讨论，我们一起学习进步！原文：https://juejin.cn/post/7445926398399741992。
2024-12-09 18:24:02
697
原创 学会这4个高级技巧，晋升Vue高级打工人
最近看了一篇谈及vue高级技巧的文章，给我看笑了，里面说什么自定义指令动态组件自定义过滤器` 等等都写在里面了，但凡在实际工作中写过几个中小型的项目，这些都是常用大家都熟知的烂大街的东西好吧，什么叫做真正的vue高级用法，今天来给大家盘点一下。
2024-12-09 18:22:12
1284
原创 大厂真题！前端面试手写代码——使用 setTimeout 实现 setInterval
我们在一开始设置了一个变量用来储存计时器的id，然后在函数的结尾返回了一个控制定时器的变量函数。当我们要停止计时器时，我们只需要调用它就可以了。首先拿到这道题，我应该先思考一下，setTimeout和setIntval这两个计时器之间有什么相同点和差别，再选择合适的算法实现它。我们这里可以使用递归setTimeout函数反复执行不就实现了setInterval了。是 JavaScript 中的另一个计时器方法，用于按指定的时间间隔。要实现可以停止计时器，我们只需要拿到计时器的ID就可以了。
2024-12-06 18:53:35
526
原创 算法中常用的方法——递归
我们再在上一篇文章最后提到我们如何去实现手搓一份深度拷贝的代码在我们最后的代码中有一段反在新的构造函数中复调用这个函数，其实这就是我们今天要聊的递归这一知识点，其实递归这一方法也是我们日常处理算法题经常使用的手段，现在就让我们开启递归的讲解之旅，让我们来体验递归在算法中的应用吧。当我们在以后遇见要使用递归地算法题是时，我们就要想去找到题目的规律，同时再去思考当我们要在什么情况下去结束递归。原文：https://juejin.cn/post/7445155431139377189。
2024-12-06 18:46:43
737
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人