<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[Jet_Lover的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/Jet_Lover</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; Jet_Lover]]></copyright><item><title><![CDATA[前端项目工程化配置webpack与vite]]></title><link>https://blog.youkuaiyun.com/Jet_Lover/article/details/149815898</link><guid>https://blog.youkuaiyun.com/Jet_Lover/article/details/149815898</guid><author>Jet_Lover</author><pubDate>Fri, 01 Aug 2025 02:07:32 +0800</pubDate><description><![CDATA[本文对比介绍了webpack和vite两个主流前端构建工具的核心概念和配置方法。webpack作为静态模块打包工具，重点讲解了其entry、output、loader、plugin和mode五大核心配置项，并展示了在Vue和React项目中的实际应用。vite部分则突出了其基于原生ESM的开发服务器优势，详细解析了构建选项和模块解析配置，包括输出目录设置、代码压缩选择和路径别名定义等。两者都通过具体代码示例展示了配置文件写法，为开发者提供了实用的技术参考。]]></description><category></category></item><item><title><![CDATA[JS核心操作符：从基础到ES6+]]></title><link>https://blog.youkuaiyun.com/Jet_Lover/article/details/148866499</link><guid>https://blog.youkuaiyun.com/Jet_Lover/article/details/148866499</guid><author>Jet_Lover</author><pubDate>Tue, 24 Jun 2025 15:28:58 +0800</pubDate><description><![CDATA[ECMAScript操作符摘要： ECMAScript包含多种操作符类型：一元操作符、布尔操作符等]]></description><category></category></item><item><title><![CDATA[快速实现虚拟列表]]></title><link>https://blog.youkuaiyun.com/Jet_Lover/article/details/148225404</link><guid>https://blog.youkuaiyun.com/Jet_Lover/article/details/148225404</guid><author>Jet_Lover</author><pubDate>Mon, 26 May 2025 14:04:26 +0800</pubDate><description><![CDATA[虚拟列表（Virtual List）主要用于解决 大数据量列表渲染的性能问题，核心原理是只渲染可视区域内的元素，而非一次性渲染整个长列表，从而大幅减少 DOM 节点数量，提升性能。使用场景：超长列表渲染、移动端应用、实时数据更新的高频场景、拖拽排序、动态高度等。]]></description><category></category></item><item><title><![CDATA[实现高度自动过渡的几种方案]]></title><link>https://blog.youkuaiyun.com/Jet_Lover/article/details/147622306</link><guid>https://blog.youkuaiyun.com/Jet_Lover/article/details/147622306</guid><author>Jet_Lover</author><pubDate>Thu, 01 May 2025 00:55:22 +0800</pubDate><description><![CDATA[有时候在写页面时会遇到这种情况：实现高度不固定的内容，或者是实现高度自动过度的内容。比如这样的不固定高度的内容或者这样展示的内容。]]></description><category></category></item><item><title><![CDATA[axios封装]]></title><link>https://blog.youkuaiyun.com/Jet_Lover/article/details/147493366</link><guid>https://blog.youkuaiyun.com/Jet_Lover/article/details/147493366</guid><author>Jet_Lover</author><pubDate>Fri, 25 Apr 2025 02:58:45 +0800</pubDate><description><![CDATA[Axios 是一个 基于promise的 HTTP 客户端，适用于node.js和浏览器。它提供了简洁的API、自动JSON数据转换、请求/响应拦截等强大功能。完整的request代码 ，其中一些细节根据不同项目需要不同调整~const base = import.meta.env.VITE_APP_API // 接口地址timeout: 60000, // 设置超时时间// headers: { 'X-Custom-Header': 'foobar' }, // 设置请求头})//超时辅助函数。]]></description><category></category></item><item><title><![CDATA[3分钟快速实现 在线使用Deepseek-R1大模型]]></title><link>https://blog.youkuaiyun.com/Jet_Lover/article/details/145979109</link><guid>https://blog.youkuaiyun.com/Jet_Lover/article/details/145979109</guid><author>Jet_Lover</author><pubDate>Mon, 03 Mar 2025 11:48:13 +0800</pubDate><description><![CDATA[无需本地部署，通过云端即开即用 AI 能力，也不用担心出现’服务器繁忙，请稍后重试‘。硅基流动 → 资源接入 → ChatBox → 调用 deepseek-R1 大模型。的模型 →  把之前复制的密钥粘贴过来→ 选择模型为。之前有使用过ollama有点占内存，而且还是阉割版…点击API密钥→ 新建API密钥 → 点击密钥复制。登录ChatBox官网并下载ChatBox软件。实现在线使用 deepseek-R1。这样就设置完成啦，最后看使用对比。打开Chatbox并按图设置。点击设置→ 选择模型为。]]></description><category></category></item><item><title><![CDATA[Vue2 和 Vue3 的响应式原理对比]]></title><link>https://blog.youkuaiyun.com/Jet_Lover/article/details/145816848</link><guid>https://blog.youkuaiyun.com/Jet_Lover/article/details/145816848</guid><author>Jet_Lover</author><pubDate>Sun, 23 Feb 2025 23:04:38 +0800</pubDate><description><![CDATA[响应式系统是 Vue 框架的核心机制之一，它通过自动追踪数据变化并触发视图更新，让开发者能够更专注于业务逻辑而非手动操作 DOM。Vue2 和 Vue3 的响应式实现有本质差异，本文将深入对比两者的底层原理及演进逻辑。vue2手动登记，只有被用到的才会被记录，vue3全自动监控。vue3性能更优：惰性代理减少初始化开销。vue3代码更简洁。]]></description><category></category></item><item><title><![CDATA[微信小程序中遇到过的问题]]></title><link>https://blog.youkuaiyun.com/Jet_Lover/article/details/144753332</link><guid>https://blog.youkuaiyun.com/Jet_Lover/article/details/144753332</guid><author>Jet_Lover</author><pubDate>Thu, 26 Dec 2024 23:11:20 +0800</pubDate><description><![CDATA[由于微信小程序的文件结构限制，CSS文件只能引用小程序的静态资源文件，如图片、字体等。wxs文件中不支持es6写法，let、const、export这些都是不可以的！由于WXML和JavaScript是两种不同的语言，它们之间没有直接的交互方式。由于css样式调整，需要自定义顶部导航栏。- 官方自带的不能去掉，但是通过设置。在小程序中事件绑定有使用特定的语法。等来设置文字颜色与背景等。]]></description><category></category></item><item><title><![CDATA[Vue.js 自定义指令：从零开始创建自己的指令]]></title><link>https://blog.youkuaiyun.com/Jet_Lover/article/details/143927783</link><guid>https://blog.youkuaiyun.com/Jet_Lover/article/details/143927783</guid><author>Jet_Lover</author><pubDate>Wed, 20 Nov 2024 23:57:38 +0800</pubDate><description><![CDATA[关于使用自定义指令在官网中是这样描述的vue2:对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。vue3:自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。代码复用：自定义指令可以封装一些常用的 DOM 操作，使得这些操作可以在多个组件中复用，减少代码冗余。简化模板：通过自定义指令，可以将一些复杂的 DOM 操作从模板中移除，使模板更加简洁和易读。增强功能：自定义指令可以提供一些 Vue 框架本身不直接支持的功能，比如自动聚焦、拖拽、动画等。更好的封装性。]]></description><category></category></item><item><title><![CDATA[推荐！一些好用的VSCode插件]]></title><link>https://blog.youkuaiyun.com/Jet_Lover/article/details/143527571</link><guid>https://blog.youkuaiyun.com/Jet_Lover/article/details/143527571</guid><author>Jet_Lover</author><pubDate>Wed, 06 Nov 2024 00:54:29 +0800</pubDate><description><![CDATA[通过使用插件，可以扩展编辑器的功能，实现代码自动格式化、语法高亮、版本控制等功能，从而提升编码效率和代码质量。在日常开发过程中，一般用的编辑器是vscode，这里给大家推荐一些平时开发比较好用的插件（ps：⭐必备，没有的则看情况使用）以上就是本人基本上常用的一些插件了，如果大家也有比较好用的插件欢迎留言补充~~]]></description><category></category></item><item><title><![CDATA[css grid布局属性详解]]></title><link>https://blog.youkuaiyun.com/Jet_Lover/article/details/142147722</link><guid>https://blog.youkuaiyun.com/Jet_Lover/article/details/142147722</guid><author>Jet_Lover</author><pubDate>Thu, 12 Sep 2024 01:25:48 +0800</pubDate><description><![CDATA[网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。CSS Grid布局提供了更直观的网格化布局方式，使得响应式设计和复杂页面结构的实现更加简单和高效。Flex 布局是轴线布局，可以看作是一维布局。Grid 布局则是将容器划分成行和列，产生单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。]]></description><category></category></item><item><title><![CDATA[Sass实现网页背景主题切换]]></title><link>https://blog.youkuaiyun.com/Jet_Lover/article/details/141337874</link><guid>https://blog.youkuaiyun.com/Jet_Lover/article/details/141337874</guid><author>Jet_Lover</author><pubDate>Wed, 21 Aug 2024 02:36:02 +0800</pubDate><description><![CDATA[网页实现主题切换一般有两种主流的解决办法，一种是css变量，另外一种是使用预编译器(less、sass)，这里考虑到兼容性使用的是sass来实现的原理：修改网页中html标签内的自定义属性data-theme的样式。创建一个 index.scss 文件，用于定义不同的主题。使用 Sass 的 map 和 mixin 功能来管理主题变量。$themes: (light: (dark: (:root {// 默认主题map-get。]]></description><category></category></item><item><title><![CDATA[了解 vue插槽 Slots]]></title><link>https://blog.youkuaiyun.com/Jet_Lover/article/details/141289208</link><guid>https://blog.youkuaiyun.com/Jet_Lover/article/details/141289208</guid><author>Jet_Lover</author><pubDate>Sun, 18 Aug 2024 00:24:18 +0800</pubDate><description><![CDATA[1. 将父组件内容插入子组件。
 2.  使用具名插槽在子组件中定义多个插槽位置。
 3. …
 4. 实现动态组件插槽，动态渲染不同组件。
 5. 利用作用域插槽将子组件的数据传递到父组件。 ]]></description><category></category></item><item><title><![CDATA[vue3获取vue实例 并注册全局属性方法]]></title><link>https://blog.youkuaiyun.com/Jet_Lover/article/details/141139891</link><guid>https://blog.youkuaiyun.com/Jet_Lover/article/details/141139891</guid><author>Jet_Lover</author><pubDate>Tue, 13 Aug 2024 01:41:45 +0800</pubDate><description><![CDATA[在使用 Vue 时，多个地方使用同一个方法导致每个地方都需要按需引用，从而增加代码量。然而，这种做法实际上有助于减少冗余、提高一致性，并且是代码重用、抽象或模块化的体现。这种方法提高了代码的维护性、可读性和一致性。注：自动导入Vue Composition API 函数（如 ref, reactive, computed 等）可以使用插件组件全局注册可以参考官网vue3组件全局注册，或者使用插件Vue3 MaskerFan 博客园。]]></description><category></category></item><item><title><![CDATA[封装一个vue3的公共组件]]></title><link>https://blog.youkuaiyun.com/Jet_Lover/article/details/137278180</link><guid>https://blog.youkuaiyun.com/Jet_Lover/article/details/137278180</guid><author>Jet_Lover</author><pubDate>Tue, 02 Apr 2024 18:15:25 +0800</pubDate><description><![CDATA[如果你发现某个组件在多个地方重复使用，那么将其封装成公共组件是很有意义的。：定义一个公共的快递组件选择，首先在项目的src下面定义一个文件夹components，然后在里面创建文件ExpressList.vue。：当有一些组件是业务无关的，并且可以在不同的项目中重复使用时，将其封装成公共组件。：有些复杂的组件可以被拆分成若干公共组件，每个公共组件承担不同的责任，这样做不但提高了可维护性，也方便了代码的重用。到这里一个基础的下拉选择快递的公共组件模版就完成了，最后那么在项目里面怎么使用呢？]]></description><category></category></item><item><title><![CDATA[vue中循环多个li(表格)并获取对应的ref]]></title><link>https://blog.youkuaiyun.com/Jet_Lover/article/details/136305186</link><guid>https://blog.youkuaiyun.com/Jet_Lover/article/details/136305186</guid><author>Jet_Lover</author><pubDate>Mon, 26 Feb 2024 18:10:18 +0800</pubDate><description><![CDATA[我想要获取每一个循环并获取每一个li(或者其它循环项)的ref，以便于后续的操作。就是所有li的集合的ref，这样就可以继续进行后续的操作了。可以用以下的方法获取每一个项目的ref。打印(el, index)的值如下。这样可以获取对应li的ref了。表格项，就可以用下面的代码。举例：如果我想要进行。]]></description><category></category></item><item><title><![CDATA[vue3实现详情页返回列表页，返回原来列表页滚动条所在的位置]]></title><link>https://blog.youkuaiyun.com/Jet_Lover/article/details/133993568</link><guid>https://blog.youkuaiyun.com/Jet_Lover/article/details/133993568</guid><author>Jet_Lover</author><pubDate>Mon, 23 Oct 2023 18:14:06 +0800</pubDate><description><![CDATA[因为Vue3 组合式api路由没有这个导航守卫了，所以没法用。:如果是vue2或vue3选项式 API可以直接。在app.vue 根文件下定义代码。在列表页面使用，并使用。]]></description><category></category></item><item><title><![CDATA[vue3 + element Plus实现表格根据关键字合并行，并实现行的增删改操作]]></title><link>https://blog.youkuaiyun.com/Jet_Lover/article/details/133781005</link><guid>https://blog.youkuaiyun.com/Jet_Lover/article/details/133781005</guid><author>Jet_Lover</author><pubDate>Thu, 12 Oct 2023 00:42:30 +0800</pubDate><description><![CDATA[关于修改，其实和新增差不多这里就没有写了，合并表格并实现增删改查的功能就是这些。]]></description><category></category></item><item><title><![CDATA[layui laydate实现日期选择并禁用指定的时间]]></title><link>https://blog.youkuaiyun.com/Jet_Lover/article/details/133681947</link><guid>https://blog.youkuaiyun.com/Jet_Lover/article/details/133681947</guid><author>Jet_Lover</author><pubDate>Sun, 08 Oct 2023 14:59:49 +0800</pubDate><description><![CDATA[最终实现禁用2023-9-26这天的效果。]]></description><category></category></item><item><title><![CDATA[scss实现星空效果]]></title><link>https://blog.youkuaiyun.com/Jet_Lover/article/details/131179366</link><guid>https://blog.youkuaiyun.com/Jet_Lover/article/details/131179366</guid><author>Jet_Lover</author><pubDate>Tue, 13 Jun 2023 00:43:37 +0800</pubDate><description><![CDATA[HTML代码很简单，就四个速度不同、大小不同、无线循环滚动的div和一个背景图。 ]]></description><category></category></item></channel></rss>