随笔分类 - 前端技术/Front-end technology
摘要：显示屏的刷新频率与动画原理简介 过去没有显示屏的年代里，存在一种叫作连环画的东西，它的每一页都将人物在某一指定时间的动作详细地画出来，读者可以通过快速翻看连环画来达到一种画面中的人物在连贯运动的效果。 这种现象后来被总结为"视觉停留效应"，即人眼所看到的影像消失后，大脑仍然会保存这一图像一段时间(可
阅读全文
摘要：React 在响应用户交互或事件时，会将多次状态更新合并（batching）并延后到下一次渲染中一起执行。这意味着当你调用 setState（或 useState 的 setter）后，状态并不会立即更新到最新值，而是在 React 下一轮更新阶段才生效。这样的设计可以减少不必要的重渲染，提升性能，
阅读全文
摘要：在不指定背景颜色渲染区间的情况下, repeating-linear-gradient与linear-gradient的没有区别 <div class="test test1"></div> <div class="test test2"></div> .test { width: 150px; h
阅读全文
摘要：通过向https://api.ipify.org/发起请求来获取用户ip // utils/index.js export const getUserIp1 = async function () { return new Promise((resolve, reject) => { const x
阅读全文
摘要：目录安装在vue3中安装安装按需引入插件配置按需引入插件 安装 在vue3中安装 yarn add vant 安装按需引入插件 yarn add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D 配置
阅读全文
摘要：目录安装在vue3中安装安装按需引入插件配置按需引入插件 安装 在vue3中安装 yarn add vant 安装按需引入插件 yarn add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D 配置
阅读全文
摘要：目录将富文本中img的src转换为data-src引入指定的加载中图片与加载错误图片将富文本挂载元素添加v-lazy-container vant4本身使用vue-lazyload插件实现图片的懒加载, 参照vue-lazyload进行配置 将富文本中img的src转换为data-src const
阅读全文
摘要：目录服务端代码调用代码解决思路 情景复现: 在开发服务端渲染程序时, 出现开发环境可以从远程服务器正确获取到数据, 但是线上环境无法获取数据并且报错 _fetch is not a function 错误. 服务端代码 // /server/detail.get.js export default
阅读全文
摘要：目录安装nuxt3的pinia包修改nuxt.config.ts的配置在项目中创建pinia仓库创建本地的测试服务器用于测试ssr在nuxt项目中创建服务器端请求接口在/article/[id]路由页面中实现服务器端渲染使用postman向http://localhost:3000/article/
阅读全文
摘要：通过js获取设置的css变量的值 已经设置好的css的变量值 :root{ --main-white:#fff; } .theme_light { --header-bg: var(--main-white); } 通过js获取已经设置好的css变量值 console.log( getCompute
阅读全文
摘要：配置.env文件 在根目录下添加不同的环境文件 .env.dev NUXT_PUBLIC_API_BASE=http://192.168.110.209:8000 NUXT_API_KEY=my-api-key-dev NUXT_TEST_VARIABLE=dev NUXT_TEST_TEST_VA
阅读全文
摘要：目录常规示例子组件: /components/testCom1.vue父组件: App.vue监听defineExpose返回的数据的变化实现子组件向父组件传递数据父组件中修改子组件defineExpose抛出的数据, 实现父组件向子组件回传数据 官网说明 defineExpose用于子组件向其父组
阅读全文
摘要：需求场景 在适配移动端的过程中, 可以通过@media screen 来设定屏幕宽度在指定条件下的元素样式; 现要求在pc端与移动端有不同的html结构, 可以使用window.matchMedia进行判断并实现条件渲染 代码 假设我以900px作为pc端与移动端的分界 window.addEven
阅读全文
摘要：在/assets/scss/global.scss中写入样式 $black: #000; $height: 1666px; .test { color: red; background-color: $black; height: $height; } 在/nuxt.config.ts文件中写入如下
阅读全文
摘要：yarn的安装 npm i yarn -g yarn设置镜像源 查看全局镜像源: yarn config get registry 更换淘宝镜像源: yarn config set registry https://registry.npmmirror.com 恢复yarn官方镜像源: yarn c
阅读全文
摘要：依赖版本 "vite": "^5.0.10" 在vite.config.js中写入以下 export default defineConfig({ plugins: [ vue(), ], // 添加以下配置去除打包后的代码中的console build: { minify: 'terser', t
阅读全文
摘要：使用的是vue3-count-to组件 安装: npm install vue3-count-to --save 全局注册: // main.js import countTo from 'vue3-count-to' app.use(countTo) 局部引入组件并使用 // xx.vue文件 <
阅读全文
摘要：一般而言, 在vue中引入图片会使用类似import slideImg1 from '@/assets/imgs/kenny-eliason-Ak5c5VTch5E-unsplash.jpg'这种方式, 但是当需要引入的图片数量众多的时候, 这么写就非常麻烦了. 参考vite+v3批量一次性引入本地
阅读全文
摘要：在开发中经常遇到需要图片按某个纵横比显示, 并且等比缩放; 比如现有以下需求: 一张header图片, 按照长宽比5:2进行显示并能进行等比缩放 思路: 当padding/margin 的值是百分比时, 是以父元素的宽度来进行计算的 <div id="container"> <div id="con
阅读全文
摘要：目录常规示例子组件: /components/testCom1.vue父组件: App.vue监听defineExpose返回的数据的变化实现子组件向父组件传递数据父组件中修改子组件defineExpose抛出的数据, 实现父组件向子组件回传数据 官网说明 defineExpose用于子组件向其父组
阅读全文
浙公网安备 33010602011771号