- 博客(41)
- 收藏
- 关注
RSS订阅原创 Pinia持久化插件pinia-plugin-persistedstate
如何让pinia存放的东西不丢失？你还在为页面刷新而丢失数据，多次调用接口而苦恼吗？你还在为localstore一个一个存感到繁琐吗？请使用这款pinia-plugin-oersistedstate全自动持久化插件。3，在store中启用持久化。2，在main.ts中配置。即使切换页面或刷新浏览器，
2025-04-02 20:52:56
190
原创 前端如何导入谷歌字体库
Googles Fonts下面的filters可以筛选文字，字体库同族字体会支持不同的语言，如果不确定是否支持自己想要的多语言，可以在筛选栏中打入多国语言，对照右侧字体是否正常显示即可。这里会存在所有你点击来过的字体，后续的引用也会全部引入，如果不想引入，需在此删除。#谷歌字体库内容丰富，涵盖上千种多语言支持的字体，学习导入谷歌字体库来增加网站的阅读性，是必不可少的一项技能#3，进去后 点击右上角的Get font按钮。6，然后在你的主css中定义全局字体族即可。4，点击会进入自己的字体库。
2025-04-01 17:51:05
300
原创 ReCaptcha集成人机验证教学（Vue3篇）
完全隐形，返回用户风险评分（0.0-1.0），由后端根据评分决定是否允许操作。：自动在后台触发（例如表单提交时），仅可疑流量需交互。剩下的交给后端就行了，你就复杂拿到token带给他。需无感分析流量风险（如API调用）→ v3。需要用户交互（如登录表单）→ v2。注册站点，选择版本（v2/v3）。：确保注册时填写正确的域名（如。：用户点击复选框完成验证。本文使用V2显性复选框。
2025-03-31 12:25:11
819
原创 Pinia的安装，使用，与情景教学
本文基于Vue3和ts去实现Pinia的使用与安装，Pinia用法为组合式API，情景教学为一个基于全局的举报框的pinia逻辑#
2025-03-30 22:26:21
409
原创 Vue-admin-template安装教程
该项目环境需要node17及以下，如果npm install这一步报错可能是这个原因成功跑起来后访问端口即可如果npm install这一步初始化失败，报错python，可以去下载一个3.7以上的python，安装时务必勾选添加到路径，这样就大概率解决问题了。
2025-03-25 20:38:09
266
原创 SEO优化小总结
1，Title 属性：head中设置的标题属性，对目标关键词的重要补充，能提高搜索排名，不超过80字，关键词总数不超过五个 xx-xxx-xxx-xxx-xx，控制在三个以内。2，description：描述内容符合标题，辅助关键词排名，字符建议控制在200字符内。3，keywords：面向搜索引擎的关键词，不超过100字符，不超过五个核心关键词。
2025-03-23 16:53:06
216
原创 前端安全之DOMPurify基础使用
DOMPurify时一款专门用于防御XSS攻击的库，通过净化HTML的内容，移除恶意脚本，同时保留安全的HTML标签和数学。以下是基础使用指南，涵盖基础的安装与用法。 常常设置在表单的提交中，或者需要根据用户改变html内容的时候，净化字符串，放置隐藏恶意脚本 效果举例：3，进阶用法配置config，允许或禁止特定的标签或者属性跳过净化 自定义钩子函数在净化过程中插入自定义逻辑：4. 处理特殊场景允许 SVG 内容默认情况下，DOMPurify 会移除 SVG 中
2025-03-17 15:23:48
670
原创 Tailwindcss开启黑夜模式
3，进入网页前，记忆用户选择的模式，在index.html中写入函数，使其在页面渲染前执行，如果localstorage已经存放了dark 代表开启暗夜模式 如果没有 则不执行。tailwindcss自带的暗夜切换会比css自带的theme主体切换来得方便很多，学习成本也很低，只要求会用tailiwndcss。1，tailwindcss.config有两种暗夜模式切换，媒体查询和手动类切换。手动控制需要开启类模式。切换后 将是否有dark类 存放在localstorage中，保持记忆性。
2025-03-15 13:52:12
313
原创 vue3实现虚拟滚动Vue-Virtual-Scroller
Arr是自定义的比如一个对象数组，至少含有id，min-item-size是最小的高度默认px单位，key-field会读取posts中的id，列表的长度由posts长度决定，行内style的两个样式是必须有的，高度代表视窗高度，然后设置overscroll-scroll才能滚动，其他属性就没必要管了，不用去看官方又臭又长的文档。2，main.ts中配置导入。
2025-03-12 19:12:41
574
1
原创 Vue-Virtual-Scroller虚拟滚动
Arr是自定义的比如一个对象数组，至少含有id，min-item-size是最小的高度默认px单位，key-field会读取posts中的id，列表的长度由posts长度决定，行内style的两个样式是必须有的，高度代表视窗高度，然后设置overscroll-scroll才能滚动，其他属性就没必要管了，不用去看官方又臭又长的文档。2，main.ts中配置导入。
2025-03-12 18:58:50
445
原创 Nginx部署spa单页面的小bug
我遇到的最大的bug是进入后只有首页正常显示 其他页面全是404，于是问问问才知道，需要这个。没部署过，都是给后端干的，自己尝试部署了一个下午终于成功了。让进入非index的页面能返回主页执行js的路由跳转配置。
2025-03-05 09:14:53
233
原创 vue-i18n国际化插件安装教程（Vue3篇）
i18n是一个国际化语言插件，意译为internationalization的缩写，代表头尾字母加上十八个字母。
2025-02-23 10:57:20
532
原创 Ts＋Vue3＋Vite如何配置@路径
由vite创造的ts加vue3会有三个ts.json文件 因此不需要include其他路劲，4.如果报错了可能是没下Node.js的类型声明包。2，修改src下的vite-env.d.ts。3，配置vite.config。
2025-02-20 12:43:09
322
原创 vue3+ts+vite创造路由
4，在你的组件中，可以使用 <router-link> 和 <router-view> 来实现路由导航和显示。1，在 Vue 3 + TypeScript 项目中配置路由，可以使用 Vue Router 4。2，在你的项目中创建一个路由配置文件，例如 src/router/index.ts。3，在你的主应用文件中（通常是 src/main.ts），引入并使用路由。今天第一次用ts 搞了半天。
2025-02-20 12:36:12
207
原创 Vue3＋Vite创造路由
需要配注意使用 Vite 的环境变量，在 Vite 中，环境变量需要以 VITE_ 前缀命名。webpack和vite的vue-router添加路由有所不同，小编踩坑了。然后创建src/router/index.js。1，先下载vue-router。2，配置vue-router。
2025-02-19 19:04:39
257
原创 TailwindCss的vue3安装使用
在根目录的index.html引用link生成的output.css。这样就能使用tailwindcss了。在终端运行tailwind CIL。npm下载tailwindcss。npx初始化tailwind配置。
2025-02-17 09:34:23
513
原创 通过Canvas获得视频某一帧
并没有直接获得某一个时间视频内容的功能，但我们可以结合画布canvas来提取视频内容。这样也能用于获得视频封面等等功能。
2024-12-18 09:17:37
522
原创 滚动属性＋scrollIntoView实现轮播图
这里只封装了横向滚动的轮播图，垂直滚动一个道理。比起原来的translate轮播图，scroll实现的更美观易懂一点，缺点是因scrollIntoView函数的局限性，轮播图切换的速度无法控制。
2024-12-17 17:16:26
585
原创 通过Canvas获得视频某一帧
原生js的video标签并没有直接获得某一个时间视频内容的功能，但我们可以结合画布canvas来提取视频内容。这样也能用于获得视频封面等等功能。
2024-12-07 14:57:19
332
2
原创 vue3实现徽章组件
引子引用elementUI的徽章组件（右上角红点）时发现，红点和他的主体是绑定的，使用起来非常不方便，无法实现随时随地每个元素添加红点提示的功能，于是我写了一个，感觉是很基础的组件。
2024-12-04 17:40:47
735
原创 scroll事件初步实现个人主页下拉回弹功能
这是我写移动版抖音时遇到的难题：如何实现个人主页的下拉回弹动画？起初以为是顺手的事，没想到大有讲究，下拉时背景区域会跟随并放大背景图片， 松手时回弹到初始状态，大幅上滑时会在尽头触发动画。：下拉部分的高度为最大下拉高度，通过滚动事件的相关函数相关来控制下拉区域的显示。一开始便滚动到一个初始位置，后续进行也通过滚动执行回弹函数。也可以用scrollend来替换两种逻辑判断，但似乎不太兼容，便没有使用。，对应短接触和长接触。判断当前视窗的scrollY，如果超过默认值就执行回弹函数。下拉时多出的部分从哪来？
2024-12-02 11:53:39
576
1
原创 DomColor库获取图片主色调
今天写仿抖音意外发现抖音的背景图片都有覆盖一层渐变的色调，于是我找了个提取主色调的库：domcolor。DomColor是一个轻量的js库，可以提取图片的主颜色，用在图片加强渲染主色调上。
2024-11-29 22:18:19
219
原创 vue3手搓固钉组件
这时候会有一个bug：如果元素本来并没有定位，直接添加定位属性会使其脱离文档流造成周围元素坍塌，这该怎么办？于是我再在下面添加一个div作为占位符，当内容被固定上去时，v-if渲染一个相同高度的div撑着文档流的内容，防止坍塌。slot插槽可以自由添加内容。获取钉子的ref实例并监听window滚动事件，当window.scrollY等于钉子的offsetHeight，添加position:fixed和top:0到钉子上，就能强行固定不动了。不知道为什么固定上去还需要额外设置宽度和原来一样，这点我也不懂。
2024-11-27 19:22:37
1018
原创 js网页开发实现移动端的自适应
我们需要将所有px单位取代为rem，而rem大小为font-size的大小，所以只要根据页面大小的不同，同步font-size对应的值，从而改变rem的大小，实现在每个页面上的布局相同。我原先在电脑上好好的开发网页版抖音，写一半到手机上访问却发现整个页面都乱掉了，窗口只能看到页面的一部分，而这个网页抖音又是针对移动端的项目。高度单位在大多数浏览器上用vh高度百分比就行，但有些浏览器的导航栏会覆盖掉顶部或底部的一部分内容，所以我们可以再根据高度去自定义一个新的单位来取代vh，取名为--vh。
2024-11-23 17:13:57
409
原创 原生js实现抽屉组件
在实现抖音评论区弹窗时设想引用了很多组件库，却发现没有合适的ui组件库，就自己手搓了一个，但是动画效果依然存在一定的bug，如果开启和关闭弹窗连续点击，弹窗会在第二次点击时直接跳过弹出动画变成弹出完毕的状态进行关闭动画。
2024-11-23 15:51:57
468
原创 transition-group实现抖音点赞爱心动画
在实现抖音点赞动画时发现其中大有讲究--点赞出来的爱心每个都有不同的倾斜度，我顺便用了vue自带的transition-group实现了动画效果 定义一个索引数组，让动画组件在transition-group内据其进行循环，触发动画时push元素进入数组，实现爱心动画的出现，再用定时器延迟后splice删除该元素，实现爱心动画的消失动画组件部分 该部分使用animation实现就行。为了保证元素动画中的rotate属性不了，keyframe的translate需要带
2024-11-21 10:00:00
321
原创 vue单击事件click实现双击和连击事件
于是我又写了一个连击事件。对单击事件做一个单击or双击的判断，单击事件由setTimeout函数在延迟时间后执行，如果在延迟时间内触发了双击，则用if判断语句阻止双击事件的发生。连击事件只需在双击事件的基础上将isOne = false放到一个定时函数中，触发双击时清空定时器并重新计时即可。需要注意：isTwo变量的重置需放在第一次点击事件的开头，否则后续触发双击事件时，单击事件也会被触发。
2024-11-20 19:33:48
856
原创 Vue3全局事件总线的跨组件传递（mitt篇）
在vue3中，全局事件总线可通过mitt轻量级事件库或者vue自带的组合式API--reactive来实现，本篇仅进行mitt的实现。全局事件总线是一种简化的跨组件通信方法，尤其适用于不直接存在父子关系的组件之间的消息传递，比props和emit更好用也更简介。在项目对应根目录下创建一个名为eventBus.js的文件。推荐npm后yarn安装。
2024-11-17 18:14:18
524
原创 Quill编辑器无法通过v-model重置文本内容
在 Vue 中，富文本编辑器组件的内容可能不会完全响应外部表单的重置操作。通过重置v-model绑定的值进行文本清空是无效的如上对编辑器绑定的form.content = ‘ ’ 重置了其文本内容，富文本编辑器仍然保留上次开打的文本内容。
2024-10-27 11:00:26
557
1
原创 前端Day7-Vue2结束
目标：明确Vuex是什么，应用场景以及优势state: {count: 0},// 定义mutations})通过mutations修改state的步骤1.定义 mutations 对象，对象中存放修改 state 的方法2.组件中提交调用 mutations(通过$store.commit('mutations的方法名'))getters: {// getters函数的第一个参数是 state// 必须要有返回值。
2024-09-25 21:37:40
1857
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人