- 博客(65)
- 收藏
- 关注
RSS订阅原创 【Vue】浏览器缓存 sessionStorage、localStorage、Cookie
本文介绍了Vue开发中常用的三种浏览器缓存方式：sessionStorage、localStorage和Cookie。sessionStorage是临时会话存储，窗口关闭即清除；localStorage可长期保存数据；Cookie会在客户端和服务器间传递。文章详细说明了它们的使用方法、区别与适用场景，并提供了避坑指南，如数据类型的处理、Cookie安全设置和兼容性检查建议。合理使用这些缓存机制能提升应用性能，开发者应根据具体需求选择合适的方式。
2025-07-13 14:57:19
168
原创 浅谈 Vue2 的 Mixin 混入和 Vue3 的 Hooks（组合式 API）
本文对比了Vue2的Mixin混入和Vue3的组合式API(Hooks)两种代码复用方式。Mixin混入通过封装通用逻辑实现复用，但存在命名冲突和可读性问题；Vue3的组合式API通过函数形式封装逻辑，避免命名冲突且更易维护。文章建议Vue2项目可使用Mixin，而Vue3项目推荐组合式API，并提供了两种方式的代码示例。最后强调合理选择适合的复用方式可以提升开发效率。
2025-07-05 15:48:29
308
原创 【TypeScript教程】 - 小白也能秒懂的TypeScript入门指南
本文介绍了TypeScript(TS)的基础知识，它是JavaScript的超集，增加了静态类型检查功能。文章从环境搭建开始，详细讲解了TS的基本类型（如number、string、boolean、array、tuple等）、函数定义（包括可选参数、默认参数和剩余参数）、接口的使用（包括可选属性和只读属性）、类的特性（继承、访问修饰符、静态成员）以及泛型的概念。通过多个代码示例，展示了TS如何帮助开发者在编译时发现类型错误，提高代码质量和可维护性。
2025-07-03 14:26:26
782
原创 解决 Webstorm 控制台乱码
WebStorm控制台中文乱码解决方案：1）修改全局编码设置为UTF-8；2）在启动配置中添加-Dfile.encoding=UTF-8参数；3）Windows系统还需修改注册表，添加chcp 65001命令。通过这三个步骤可解决Electron项目编译时中文显示乱码问题。操作完成后需重启WebStorm生效。
2025-07-02 16:38:34
791
原创 使用Vue3实现输入emoji 表情包
最近在做项目的时候，需要实现一个在Vue3项目里输入emoji表情包的功能。这过程中可是踩了不少坑，现在把我的经验分享出来，希望能帮到大家，让大家少走弯路。
2025-07-02 14:55:26
5063
原创 Vue3 中使用 Vueuse
VueUse是Vue 3的组合式API实用工具库，提供大量封装好的功能函数，简化开发流程。文章介绍了其安装方法（npm/yarn安装），并演示了两个核心功能：useLocalStorage实现响应式本地存储，以及useWindowSize监听窗口变化。同时给出使用建议：注意浏览器兼容性，推荐按需引入以减少打包体积。VueUse能显著提升开发效率，避免重复造轮子，是Vue 3项目的实用工具选择。
2025-07-02 14:46:43
4612
原创 Vue3中使用Web Worker多线程
Web Worker是HTML5提供的多线程机制，允许在后台线程运行脚本而不阻塞主线程。在Vue3中使用时，首先创建独立的worker.js文件处理计算任务，通过postMessage和onmessage与主线程通信。组件中通过new Worker创建实例，发送接收数据，计算完成后终止worker。需注意同源策略、数据传递方式和worker中全局对象为self。这种方式能有效提升页面的响应性能。
2025-07-02 14:43:07
4522
原创 nohup java -jar 命令启动jar包，项目仍然会挂掉或者停止运行的解决方案
最近在使用 `nohup java -jar` 命令启动jar包的时候，遇到了个让人头疼的问题。明明用这个命令把项目启动起来了，以为一切都稳了，结果过不了多久，项目就莫名其妙地挂掉了。这可太影响工作效率了，于是我就开始各种排查，总结了一些解决方法，分享出来，希望能帮大家避避坑。
2025-07-02 14:29:47
5078
原创 Vue3数字滚动插件vue3-count-to使用指南
最近在做 Vue3 项目的时候，遇到了需要实现数字滚动效果的需求，然后就发现了 `vue3-count-to` 这个插件，用下来感觉还挺不错的，所以来跟大家分享一下，也给大家避避坑。
2025-07-02 14:19:24
4750
原创 前端常用6种数据加密方式的使用
本文介绍了前端开发中常用的6种数据加密方式：1) Base64编码(可逆但非真正加密)；2) MD5哈希(128位但安全性低)；3) SHA-1哈希(160位但已不安全)；4) SHA-256哈希(256位当前推荐)；5) AES对称加密(性能好但密钥管理难)；6) RSA非对称加密(安全性高但速度慢)。每种方式都提供了JavaScript实现示例，并对比了它们的类型、输出长度、安全性和特点。开发者可根据实际需求选择合适的数据保护方案。
2025-07-02 10:53:57
4492
原创 JavaScript 条件逻辑优化全指南
本文全面介绍了JavaScript条件逻辑优化的多种方案，从基础的对象映射到高级的策略模式、函数式编程等技术。针对不同复杂度需求，提供了对象字面量、Map结构、策略模式、责任链、高阶函数等实现方式，并对比了各方案的适用场景与性能特点。文章建议根据项目规模选择合适方法：简单条件用对象映射，业务规则用策略模式，动态规则考虑配置化，类型判断用模式匹配。最后强调优化方案选择需平衡可读性、维护性和性能需求。
2025-07-02 10:33:46
4526
原创 前端常见设计模式深度解析
嘿，前端小伙伴们！今天咱来聊聊前端常见的设计模式。在前端开发的道路上，掌握这些设计模式就好比拥有了一把万能钥匙，能让我们的代码更加健壮、可维护和可扩展。我自己在开发过程中可是吃了不少亏，才慢慢摸透这些模式的，现在就把我的经验分享出来，希望能帮大家避避坑。
2025-07-02 09:34:03
299
原创 Vue3 使用 i18n 实现国际化完整指南
Vue3国际化完整指南概述：本文详细介绍了在Vue3中使用vue-i18n@9实现国际化的全套方案。主要内容包括：环境配置与版本兼容性说明；推荐的项目目录结构和基础配置；多语言文件规范与动态参数处理；模板和Composition API中的使用方法；高级功能如语言切换组件和异步加载；性能优化与SEO方案；常见问题解决及TypeScript支持。指南提供了从安装配置到生产优化的全流程解决方案，强调按需加载、热更新支持等最佳实践，适合不同规模项目的国际化需求实现。
2025-07-01 23:25:56
4453
原创 JavaScript中的call、apply、bind：用法、实现与区别详解（面试常见）
本文详细解析JavaScript中call、apply和bind三个方法的用法与区别。call和apply立即执行函数，前者接收参数列表，后者接收数组；bind返回绑定函数，可延迟执行。文章包含手写实现原理，对比三者的执行时机、参数形式和性能差异，并展示继承、柯里化等高级应用场景。最后总结面试常见问题，强调这些方法在改变this指向和编写灵活代码中的重要性。掌握这些方法有助于深入理解JavaScript函数上下文机制。
2025-07-01 22:06:09
4500
原创 前端 9 大性能优化策略（面试必备）
嘿，宝子们！今天我就把压箱底的前端性能优化 9 大策略分享给大家，掌握了这些，面试的时候那不得稳稳拿捏，工作里解决性能问题也是小菜一碟！
2025-07-01 19:56:34
4998
原创 Vue 3.x 使用 “prerender-spa-plugin ” 预渲染实现网站 SEO 优化
Vue 3.x 使用 prerender-spa-plugin 实现 SEO 优化方案。该插件通过构建时预生成静态 HTML 解决 SPA 动态内容难以被搜索引擎抓取的问题。配置要点包括：安装 v3.x 版本插件、设置输出目录和预渲染路由、调整渲染等待时间或触发事件。最佳实践建议使用 History 路由模式、处理动态内容加载事件、优化生产环境参数。常见问题解决方案涵盖 404 错误、渲染不完整和内存溢出等场景。与 SSR 和静态站点生成相比，该方案平衡了易用性和 SEO 效果，适合静态内容为主的 SPA
2025-07-01 19:47:59
4289
原创 ES6数组的`flat()`和`flatMap()`函数用法
ES6的flat()和flatMap()方法简化了数组处理：flat()可将多维数组按指定深度（默认1层，可用Infinity完全展开）拍平，并自动移除空元素；flatMap()则是map()与flat(1)的组合，先映射再拍平一层。两者对比：flat()专注数组降维且深度可调，flatMap()适合先转换后浅拍平的场景。合理使用这些方法能让嵌套数组操作更简洁高效，如拆分句子、处理JSON数据等。
2025-07-01 17:29:50
3697
原创 webpack的作用是什么，谈谈你对它的理解？
webpack是一个现代JavaScript应用程序的静态模块打包工具。它的主要作用是将项目中分散的模块（如JS、CSS、图片等）按照依赖关系打包成静态资源，同时提供代码转换、优化等功能。
2025-07-01 17:24:03
3852
原创 Vue 中修改 Element 组件的 下拉菜单(Dropdown) 的样式
本来都准备使用原生直接获取 after 的元素了，后来发现不太行，能获取到但是修改 after 伪元素太麻烦了，需要添加样式表什么的。今天在项目中碰到一个 UI 改造的需求，需要根据设计图把页面升级成 UI 设计师提供的设计图样式。到最后页面改造完了，但是 UI 提供的下拉菜单样式全部是黑色半透明的，只能硬着头皮改了。于是我删除后再试，确实是有效，三角也变成了黑色。结果不生效，开始纳闷，为什么什么样式都没有应用上去。，我去应用它的样式。好啦，大功告成，这样只在这个文件中的。然后，就有了一下午的头脑风暴。
2024-01-11 19:46:35
44207
原创 Vue3中 在 TypeScript 文件中无法使用 useRouer 和 useRoute 的方法和属性是怎么回事?如何解决？
Vue3中 在 TypeScript 文件中无法使用 useRouer 和 useRoute 的方法和属性是怎么回事?如何解决？
2023-12-19 19:04:56
42033
1
原创 Vue3 中 Element-Plus 引入 ElLoading 并修改颜色
Vue3 中 Element-Plus 引入 ElLoading 并修改颜色
2023-12-19 15:55:25
2590
原创 Vue.js - 插件的使用
Vue 中的插件，我们可以理解为就是对于 Vue 本身功能的增强 。举个例子，我们经常使用的 Vue-Router，Vuex，Element-UI，就算是一种插件。在 Vue 本身不支持这些功能的情况下，让 Vue 可以使用这些功能，这些就是插件。
2022-11-09 17:28:38
2270
原创 Vue.js -Vuex 全局组件高效的数据通信方案
Vue.js -Vuex 是项目中实现全局组件高效的、大范围的数据通信解决方案，使用 Vuex，数据的存取可以一步到位，不需要进行层层传递，流动非常清晰，存储在 Vuex 中的数据也是响应式的。所以学好 Vuex 可以在我们开发过程中节省很多的组件间传值的麻烦操作。这里罗列了在 Vuex 中每个模块所具备的功能，存取方式简单明了，一目了然~
2022-11-07 20:16:46
41786
原创 Vue.js - 前端路由的概念与原理
Vue.js - 前端路由的概念与原理。该文章描述Vue.js路由的概念及原理，文中包含Vue-router的使用，路由重定向，动态路由，路由动态参数获取，两种路由导航，全局路由前置导航守卫等知识，可使读者更好的理解 Vue-router...
2022-11-07 16:30:32
41700
原创 什么是虚拟 DOM ?
概念：虚拟 Dom，就是对于真实 dom 的一个 js 对象映射< div class = "wrapper" > this is div（真实dom） < / div >
2022-08-17 22:26:31
1908
原创 Vue 组件之间的通信，动态组件和插槽
动态组件指的是，基于 组件，来动态切换组件的显示与隐藏插槽（slot）可以提高组件的复用性，使用插槽可以给组件传递一段 html 内容注意：默认情况下，如果在封装组件时没有设置任何 插槽，则使用组件时，在组件的开始和结束标签中间传递的内容将会被丢弃 < h3 > 这是外面传进来的 h3 标题 < h3 > 这是外面传进来的 h3 标题 ...
2022-08-11 22:33:32
315
原创 Vue.js 组件化开发
单页面应用程序（Single Page Application）,简称 SPA指的是一个Web网站中只有唯一的一个HTML页面，所有的功能与交互都在这唯一的一个页面内完成vue-cli的作用是可以帮助我们一键生成工程化的 Vue 项目。中文官网： https://cli.vuejs.org/zh/①：index.html 单页面应用的唯一的一个html页面预留了一个 el 区域引入了一个打包后的脚本文件②：main.js webpack 打包的入口文件。.........
2022-08-07 01:00:36
770
原创 CSS Grid 布局
CSSGrid布局是二维布局方式，可以同时控制行和列的排布和对齐方式Grid由水平线和垂直线构成，两条水平线中间的区域叫做行轨道，两条垂直线中间的区域叫做列轨道。
2022-07-29 12:59:41
43039
原创 CSS 纵横比属性 --- aspect-ratio
传统的CSS只能通过宽高自己计算纵横比，或者保持原始纵横比.现在可以使用属性来设置固定的纵横比.
2022-07-24 01:37:30
50926
原创 Vue.use 全局注册组件
插件运行流程：1. Vue.use(插件) 2.插件中 install，自动执行并且拿到一个实参 Vue 3.执行 install 方法中的具体逻辑 4.Vue.component(组件) 5.组件被全局注册
2022-07-24 01:08:55
40930
原创 Vue.js 基础入门，这一篇足够 ！！！
这是学习 Vue.js 框架的第一节，对于初学者来说，这里面的内容通俗易懂，逻辑注释非常友好，想要学习 Vue.js 的小伙伴们，这一篇文章能带你们走进 Vue.js 的大门。本篇文章的内容主要有 Vue.js 的基础入门知识，调试工具等，并且还有一些 Vue.js 自身的一些指令，并且详细讲解了 MVVM 的概念模型，简单高效的学习前端火热的框架之一：Vue.js ！！ 希望可以帮助到大家！.........
2022-07-19 00:58:36
2371
原创 宏任务、微任务 和 事件循环机制
每个任务都有一个任务源(tasksource)，源自同一个任务源的task必须放到同一个任务队列，从不同源来的则被添加到不同队列。js是运行于浏览器的脚本语言，因其经常涉及操作dom，如果是多线程的，也就意味着，同一个时刻，能够执行多个任务。JavaScript是单线程的，也就是说，同一个时刻，JavaScript只能执行一个任务，其他任务只能等待。微任务（microtask）是宏任务中的一个部分，它的执行时机是在同步代码执行之后，下一个宏任务执行之前。所以，引入了异步任务。...
2022-07-18 00:55:59
1627
原创 Promise 解决回调地狱、async await 修饰符
Promise对象可以解决回调地狱的问题Promise是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理更强大Promise可以理解为是一个容器，里面可以编写异步程序的代码从语法上说，Promise是一个对象，使用的时候需要new//实例化一个Promise，表示定义一个容器，需要给它传递一个函数作为参数，而该函数又有两个形参，通常用resolve和reject表示。......
2022-07-17 15:00:26
460
原创 Node.js 对 npm 包的操作
npmjs.com//别人加载的就是我的index.js//所以，必须在index.js中导出内容functiona(){a,b}//导出内容。
2022-07-17 13:26:53
478
原创 Node.js 模块化分类
我们创建的每个JS文件都是一个自定义模块，并且具有模块作用域，也就是在一个模块中创建的变量、常量、函数等等一切，都只能在当前模块中使用。
2022-07-17 01:27:56
191
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人