- 博客(170)
- 收藏
- 关注
RSS订阅
原创 vue3+ts项目中.env配置环境变量与情景配置
就是在编码过程中应用这些自定义环境变量的时候，给出的智能提示。src目录下创建一个或者env.d.ts文件src同级别types目录下创建文件env.d.ts// 更多环境变量...在文件中专门用于处理项目src文件中的TypeScript配置文件，include配置项加入文件：(会提示自定义设置的环境变量)// ...// 第一种方式对应配置"vite-env.d.ts", // 或者 "env.d.ts"// 第二种方式对应配置。
2024-07-03 14:38:59
3612
原创 vue3项目图片压缩+rem+自动重启等plugin使用与打包配置
不作为软件包的一部分来安装。您必须手动安装它们并将其添加为开发依赖项。这是一个设计决策，所以如果您只想使用。图片都需要写一次相对路径，并且对。图片进行压缩优化也不够方便。一个支持将你的样式表中的。文件内部的代码进行转换。资产，则可以选择跳过安装。图片的话，和图片压缩。
2024-07-03 14:34:06
959
原创 vue3+ts项目中router+pinia+scss+unocss+跨域配置
❗️❗️❗️❗️本文是根据B站作者视频以及稍作整理💖💖作者B站地址💖💖视频教程地址💖💖作者微信：专注前端技术分享,技术讨论加。
2024-05-27 09:15:17
1251
原创 vue3项目中prettier+stylelint+husky+Lint-staged+Commitlint配置
https://www.npmjs.com/package/eslint-import-resolver-typescript 解决@别名识别问题。eslint https://eslint.nodejs.cn/docs/latest/use/getting-started 代码质量检查工具。prettier https://www.prettier.cn/docs/index.html 代码风格格式化工具。: 一款工程性更强，轻量级，高度自定义，标准输出格式的。整合实现生成规范化且高度自定义的。
2024-05-11 10:23:54
1635
原创 如何使用Tailwind CSS创建一个组合了很多样式的类名，实现样式复用
* src/main.css 或全局 CSS 文件 *//* 组合多个 tailwind 类 *//* 带响应式的组合 */rounded-md<style>解决方法检查的content配置是否包含组件路径。
2025-03-26 08:36:46
831
原创 tailwindcss如何修改elementplus的内部样式
中禁用 Tailwind 的预检样式（Preflight），避免与 Element Plus 冲突。使用 Element Plus 的官方主题工具生成自定义样式文件，再通过 Tailwind 引入。Element Plus 的样式基于 CSS 变量，可以直接覆盖这些变量实现全局修改。在 Vue 单文件组件中，使用。增强特定组件的样式。
2025-03-21 09:30:23
611
原创 nuxt中 网站文章咨询列表页和详情页适合做SSG吗
取决于内容的更新频率、数据量和业务需求。无论文章数量多少，静态生成详情页能最大化性能和 SEO 效果。在 Nuxt.js 中，文章资讯的。
2025-03-20 13:36:20
760
原创 nuxt项目 详情页有阅读次数需要更新，有热门推荐列表需要更新适合做SSG吗
此方案在保留 SSG 的 SEO 和性能优势的同时，通过动态请求满足实时性需求，适用于大多数内容型网站（如博客、新闻站）。，仍可保留 SSG 的性能和 SEO 优势，同时支持动态功能。在 Nuxt.js 项目中，如果详情页需要实时更新。
2025-03-20 13:35:44
1167
原创 nuxt中 网站文章咨询列表页和详情页适合做SSG吗
取决于内容的更新频率、数据量和业务需求。无论文章数量多少，静态生成详情页能最大化性能和 SEO 效果。在 Nuxt.js 中，文章资讯的。
2025-03-19 10:06:27
981
原创 深入了解render函数：举例说明render函数可以实现而模板实现不了的示例
前几篇博客已经了解模板语法和render函数的区别。现在需要具体的例子来展示render函数独有的能力。一、首先，我需要回忆Vue中模板的限制。模板语法虽然方便，但在某些动态场景下不够灵活。例如，当需要根据运行时条件动态生成不同的组件结构时，模板可能无法简洁表达，而render函数可以用JavaScript的全部能力处理。三、然后，我需要验证这些例子是否确实无法用模板实现，或者模板实现起来非常笨拙。
2025-03-18 08:24:45
855
原创 详细解释javascript的GO对象和AO对象
GO 是全局执行上下文的变量对象，代表全局作用域。在浏览器环境中，GO 是window对象；在 Node.js 中是global对象。所有全局变量、函数声明都会绑定到 GO 上。AO 是函数执行上下文的变量对象，代表函数作用域。在函数调用时创建，用于存储函数参数、局部变量和内部声明的函数。
2025-03-17 09:45:52
704
原创 let const var 底层区域别，es6还有AO 对象和GO对象吗
var的底层行为存储在变量环境（类似 AO/GO），存在变量提升，无块级作用域。letconst的底层行为存储在词法环境，有块级作用域和 TDZ。ES6 的环境模型词法环境和变量环境共同管理作用域，取代了单一的 AO/GO。全局对象（GO）仍然存在，但仅var会绑定到它，letconst通过词法环境隔离。
2025-03-17 09:45:14
647
原创 es6什么是暂时性死区，为何会存在
暂时性死区是指：在代码块（{}）内，从作用域开始到变量声明语句执行之前的区域。在这段区域内，如果用let或const声明的变量尚未被初始化，访问它会直接抛出。变量只有在声明语句执行后才能被安全使用。特性varlet/const（含 TDZ）变量提升提升并初始化提升但不初始化（TDZ）作用域函数/全局作用域块级作用域代码可预测性低（容易意外覆盖）高（强制先声明后使用）错误提示静默失败（undefined）直接报错（ReferenceError）TDZ 的核心目的。
2025-03-17 09:44:41
1102
原创 vue2自定义指令实现 el-input 输入数字，小数点两位 最高10位，不满足则截取符合规则的值作为新值
/ 处理输入值，确保符合规则// 过滤非数字和小数点// 处理多个小数点，保留第一个== -1) {// 分割整数和小数部分// 整数最多10位// 小数最多两位// 处理以小数点开头的情况（如 ".98" → "0.98"）// 组合结果// 注册自定义指令if (!// 标记是否在输入法组合中// 触发更新// 输入法处理handler(e);// 保存处理函数以便解绑// 初始值处理.value??
2025-03-15 08:34:19
263
原创 vue2处理接口异常或返回空数据的情况。避免接口报错导致页面调 error页面
在 Vue2 中处理接口异常或返回空数据时，可以通过以下方案实现。
2025-03-15 08:33:04
555
原创 Vue 中模板语法与 Render 函数的详细对比说明
通过理解这些差异和适用场景，开发者可以更精准地选择适合项目需求的开发方式。模板语法提供简洁高效的标准开发流程，而 Render 函数则为复杂场景和性能优化提供终极解决方案。
2025-03-15 08:32:25
785
原创 vue3 watchEffect源码解读
的核心原理是通过类来管理副作用函数和依赖关系。在副作用函数执行过程中，自动收集所使用的响应式数据作为依赖。当这些依赖发生变化时，调度函数会被触发，重新执行副作用函数。同时，提供了清理机制，用于处理副作用函数重新执行或停止时的清理工作。
2025-03-06 07:25:16
300
原创 vue3 watch源码解读
jobscheduler根据flush} else {if (!} else {job()Vue 3 的watch源码通过对不同类型的source进行解析，结合effect函数和调度器实现了数据的监听和回调执行。解析source生成getter函数。处理deep选项。定义job函数和调度器。创建副作用函数runner。根据选项决定是否立即执行。返回停止监听的函数。通过这种方式，watch可以灵活地监听不同类型的数据变化，并在合适的时机执行回调函数。
2025-03-05 09:02:14
456
原创 vue计算属性源码解读
在Vue实例初始化时，为每个计算属性创建一个Watcher实例，并将其标记为懒执行。当访问计算属性时，触发计算属性的getter函数，调用Watcher的evaluate方法计算计算属性的值，并进行依赖收集。计算结果会被缓存起来，只有当依赖数据发生变化时，Watcher的dirty标记会被设置为true，表示需要重新计算。这样，Vue就实现了计算属性的缓存和自动更新功能。
2025-03-04 16:05:03
269
原创 vue3自定义指令
在组件内部使用directives选项来注册局部自定义指令。<template>// 局部自定义指令// 指令钩子函数，在元素挂载后执行// 让元素获取焦点el.focus()</script>在上述代码中，定义了一个名为v-focus的局部自定义指令，当绑定该指令的元素挂载到 DOM 后，会自动获取焦点。在应用实例中使用方法来注册全局自定义指令，这样在整个应用中都可以使用该指令。// 全局自定义指令el.focus()})在main.js中注册了全局的v-focus。
2025-02-27 09:57:10
566
原创 在 Vue 3 的 Composition API 中，如何实现动态组件
在 Vue 3 的 Composition API 中，实现动态组件主要借助标签结合:is动态绑定属性，同时搭配响应式数据来控制显示不同的组件。以下将从基础实现、加载异步组件以及组件缓存三个方面详细介绍实现动态组件的方法。
2025-02-26 08:34:07
612
原创 在 Vue 3 中，如何缓存和复用动态组件
在 Vue 3 中，如何缓存和复用动态组件，这有助于提高应用的性能，避免组件重复创建和销毁带来的开销。下面详细介绍其使用方法和相关配置。
2025-02-26 08:30:16
600
原创 Vue 异步组件的加载策略
按需加载是最常见的异步组件加载策略，即只有当组件需要被渲染时才进行加载。这种策略能有效减少初始加载的代码量，提高应用的首屏加载速度。在 Vue Router 中，异步组件常用于实现基于路由的代码分割，即只有当用户访问特定路由时才加载对应的组件。预加载策略是在组件实际需要渲染之前就提前加载组件，这样当需要使用组件时可以立即渲染，减少用户等待时间。分组加载策略是将多个相关的异步组件放在一组进行加载，适用于需要同时使用多个组件的场景。同时加载多个异步组件，当需要显示这些组件时，可以更快地渲染。
2025-02-25 11:38:30
299
原创 Vue.js 中使用 JSX 自定义语法封装组件
JSX 是一种 JavaScript 的语法扩展，它看起来很像 HTML，但实际上是在 JavaScript 中编写的。它允许我们在 JavaScript 代码中直接嵌入 XML - 或 HTML - 风格的标记，从而让我们可以更直观地描述 UI 结构。\</h1>;这里的</h1>就是 JSX 语法，它最终会被转换为 JavaScript 代码来创建 DOM 元素。
2025-02-25 11:34:34
782
原创 React 高阶组件教程
高阶组件是一个函数，它接收一个组件作为参数，并返回一个新的组件。简单来说，它就是一个“组件工厂”，通过对传入的组件进行增强或包装，生成一个具有额外功能的新组件。// 高阶组件render() {// 普通组件</div>;// 使用高阶组件包装普通组件// 在应用中使用增强后的组件在上述代码中，就是一个高阶组件，它接收作为参数，并返回一个新的组件。新组件在挂载时会打印日志，同时将接收到的所有 props 传递给。
2025-02-23 18:08:38
468
原创 如何在 React 中测试高阶组件？
高阶组件本身是一个函数，它返回一个新的组件。因此，可以通过测试这个返回的组件来间接测试高阶组件的功能。在这个测试中，我们检查高阶组件添加的静态方法是否能在返回的组件中正常调用，并验证方法的返回值是否符合预期。高阶组件可能会有一些副作用，如生命周期方法中的日志记录、数据获取等。如果高阶组件有静态方法或属性，需要确保这些方法和属性在返回的组件中也能正常使用。传递给被包裹的组件，并验证组件是否正确渲染这些。在这个测试中，我们检查高阶组件是否成功将额外的。高阶组件可能会向被包裹的组件传递额外的。
2025-02-21 16:40:55
555
原创 React 高阶组件的优缺点
这个高阶组件可以应用到多个需要数据获取的组件上，提高了代码的复用性。通过这个高阶组件，可以为任意组件添加挂载日志记录功能。被多个高阶组件层层包裹，代码的可读性会受到影响。
2025-02-21 16:40:24
578
原创 React中如何处理高阶组件中的错误
/ 自定义 useErrorBoundary Hook}, []);// 高阶组件// 普通组件// 使用高阶组件包装普通组件这里自定义了一个Hook 来捕获错误，然后在高阶组件中使用该 Hook 来处理错误。可以创建一个通用的错误边界组件，然后将其封装在高阶组件中，以增强错误处理的复用性和可维护性。// 通用错误边界组件// 记录错误信息render() {// 可以根据需求自定义错误显示界面// 高阶组件。
2025-02-18 10:23:41
496
原创 DeepSeek：探寻人工智能底层技术的革新力量
DeepSeek 在底层技术上的创新，为 AI 行业带来了新的活力和发展方向。其对 Transformer 架构的深度优化、混合专家架构的应用、多头隐式注意力机制的创新，以及在训练策略、模型压缩、强化学习等方面的技术突破，共同构建了 DeepSeek 强大的技术基石。这些技术不仅提升了模型的性能和效率，还为解决 AI 领域的诸多难题提供了新的思路和方法。在实际应用中，DeepSeek 已在金融、公募基金等多个领域取得了显著成效，展现出巨大的应用潜力和商业价值。
2025-02-14 08:53:23
712
原创 Vue 高级组件教程
通过学习 Vue 高级组件的这些特性，我们可以更好地应对复杂应用的开发需求。渲染函数、函数式组件、异步组件、递归组件和插槽等功能，都为我们提供了更多的工具和方法来构建高效、可维护的 Vue 应用程序。希望本教程能帮助你进一步提升 Vue 开发技能。
2025-02-12 08:47:26
314
原创 nuxt3中使用useFetch请求刷新不返回数据或返回html结构问题解决-完整nuxt3useFetchtch请求封装
请求在页面有多个请求的情况下，或者放在客户端渲染情境下是失败的，所以在此篇更新下。如果使用nuxt3写项目，可以查看。，此篇内容有详细步骤。
2025-02-06 08:47:59
639
原创 vue3案例：筛选部门、选择人员案例组件
可以控制可以选多人，或者只能选单人可以做部门筛选再选人，没有部门情景，直接显示全部人员，有输入框可以搜索人员。当取消选择的部门之后，该部门下所以选择的人员也全部被清空。单选/多选页面样式一致，采取chekbox实现功能。当选择部门之后，该部门下的人员可被选择。✨二、完整效果图演示。
2025-01-21 09:38:27
569
2
原创 ✨✨vue3自定义动态不同UI组件筛选框案例✨
💖打开筛选条件弹窗💖💖💖查看筛选条件不同的结构效果预览💖💖💖💖💖继续添加和取消筛选条件效果💖💖💖💖💖条件列表中直接删除条件效果💖💖💖清空搜索条件效果💖🍀3. 选择条件-条件列表 🍀🌼4. 选择条件-选择条件弹窗组件 🌼5. 🌿定义常量数据文件 🌿🌴6. 类别json数据 🌴数据:
2024-12-30 13:45:47
476
原创 typescript学习计划（四）--装饰器
20151⃣类装饰器2⃣属性装饰器3⃣方法装饰器4⃣访问器装饰器5⃣参数装饰器备注：虽然中可以直接使用**类装饰器**，但为了确保其他装饰器可用，现阶段使用时，仍建议使用配置来开启装饰器支持，而且不排除在来的版本中，官方会装饰器的相关语法！
2024-12-25 08:57:55
1026
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人