qq_39933787的博客

原创 CodeMirror实现代码示例

【代码】CodeMirror实现代码示例。

原创 threejs学习记录

环境： "three": "^0.165.0", node：v20.12.2，react:18.0.11。放在public文件夹下。test.glb地址。

原创 前端上传minio

node file-uploader.mjs // file-uploader.mjs为文件名。注意事项：nodejs服务，文件扩展名为mjs，版本号8.0，引入的时候。accessKey和secretKey注意要从服务端生成。执行命令：到文件所在文件夹打开终端。

原创 js请求text-scream类型数据SSE方法

server.js 【启动命令：node server.js】nodejs模拟服务。

原创 高德地图2.0高亮地区显示

1、先获取区域边界线。

原创 monorepo搭建记录

创建辅助应用 例：react-demo，具体步骤：1、 cd web;2、 npm init vite // 名字可以为react-demo。2、pnpm -F main add common // 此时main项目的package.json中已有common相关依赖。2、创建文件夹npm init vite // 名字可以为main（自定义）pnpm -F main dev // 其中main为项目名。npm init vite // 名字可以为main。内容：// 举例，按实际情况来。

原创 react实现时钟翻牌效果

解决方案：通过判断数字改变（这里通过新旧数值变动来判断，不贴代码啦），每次变动的时候手动把animationIterationCount设置为infinite（持续动画），半秒后改为1（动画只执行一次），需求：随着数字的变动要求有时钟翻动动效。问题：只在加载时有动效。

原创 css动画实现呼吸灯效果

【代码】css动画实现呼吸灯效果。

原创 echarts legend图标和文字不在同一水平线上

解决方案：注意：不加rich不生效。

原创 umijs打包后的文件没有index.html

在.umirc.ts文件中设置esbuildMinifyIIFE: true。

原创 echarts柱形图实现2.5D

思路：使用markpoint。

转载 微前端记录

参考【

原创 keepAlive踩坑记录

列表页跳转报告页，报告页涉及多个接口和图表，及从报告页跳转其他页返回，灵魂画手上线，如下图：a页面为列表页，b页面为主页面，c页面从b页面跳转，从C页面返回B时要定位到以前的位置，因此，我选了给B页面设置keepAlive。问题：从页面A进入页面B时，从页面B直接跳转页面C，返回后定位正确，但是echarts失效，然后B页面中的tab栏吸顶失效，随之好多样式错乱。解决方法：在actived中重新调接口。

原创 react面试题总结

在使用 Genymotion时，首先需要在SDK的 platform-tools中加入环境变量，然后在 Genymotion中单击 Setting，选择ADB选项卡，单击 Use custom Android SDK tools，浏览本地SDK的位置，单击OK按钮就可以了。在创建期的其他阶段，组件尚未渲染完成。上述代码为 Icketang组件传递了user属性数据，因此将直接渲染Info组件，当父组件的user状态数据发生改变时，我们发现Info组件产生了更新，在整个过程中， Loading组件都未渲染。

原创 移动端H5常见兼容性问题

【代码】移动端H5常见兼容性问题。

原创 项目优化相关

项目优化相关

原创 尚硅谷webpack5笔记2

尚硅谷webpack笔记

原创 尚硅谷webpack5笔记base部分

webpack5

转载 分享当下较新的30道Vue面试题！

答案v-model可以看成是方法的语法糖（组件）。原生的v-model，会根据标签的不同生成不同的事件与属性。解析一个指令来。自定义：自己写model属性，里面放上prop和event答案避免组件中的数据互相影响。同一个组件被复用多次会创建多个实例，如果data是一个对象的话，这些实例用的是同一个构造函数。为了保证组件的数据独立，要求每个组件都必须通过data函数返回一个对象作为组件的状态。🚀🚀 觉得不错的朋友可以⭐️关注我，后续会持续更新~

原创 2024最新前端面试题

数组是属于Object类型的，也就是引用类型，所以不能使用 typeof 来判断其具体类型。Object.getPrototypeOf()方法返回指定对象的原型，然后和Array的原型对比。isPrototypeOf()方法可以判断一个对象是否存在于另一个对象的原型链上。5、Array原型链上的isPrototypeOf。主要是判断某个实例（arr）是否属于某个对象。判断实例（arr）的构造函数是否等于某个对象。把对象转化成字符串和一个已知的对象进行对比。ES5新增数组方法，判断数组是不是数组。

原创 Vue3笔记

自动补充ref的value插件，vol。修改组件name插件。

原创 React Router6笔记

原创 修改antd底部样式配置

原创 React18笔记

Iii。

转载 关于react18引入less不生效问题

使用craco

原创 机器学习相关笔记

机器学习笔记

原创 前端面试笔试题

题目中原数组为[1,2,3,4,5]，splice后删除开始索引为1，即数组中数值为2的元素，开始向后数2个元素，即2和3，而newArr的元素则为原数组去除2和3后，在同一位置插入3，4，5的新数组。let newArr = arr.splice(起始索引index, 删除的个数, 新增元素1, 新增元素2...) // 返回被删除元素组成的新数组,新数组：起始索引为1，结束索引为2（不包括结束索引），后面参数则为多余的。newArr：删除元素后的原数组与新增加的元素组成的数组。

原创 常用方法ms总结

浏览器缓存的强缓存和协商缓存如下图：

转载 前端性能优化

async、defer 是 script 标签的专属属性，对于网页中的其他资源，可以通过 link 的 preload、prefetch 属性来预加载如今现代框架已经将 preload、prefetch 添加到打包流程中了，通过灵活的配置，去使用这些预加载功能，同时我们也可以审时度势地向 script 标签添加 async、defer 属性去处理资源，这样可以显著提升性能。

转载 Vue 注意事项，内含详细讲解

vue面试题

转载 还在对正则恐惧的小伙伴看这篇就够了！

还在对正则恐惧的小伙伴看这篇就够了！

原创 less常用语法总结&react css模块化引用

less常用语法总结&react css模块化引用

原创 canvas实现刮刮卡，vue3实现

使用canvas实现刮刮卡

原创 vue2使用swiper6

代码】vue2使用swiper6。

原创 vue3中兄弟传值

在vue2中常见的兄弟组件间传值有vuex等，vue3中继续使用发现vuex中值发生变化，然而列表没有更新，百度后得到另一种方法传值的组件<script>import { ref, reactive, onMounted,getCurrentInstance } from 'vue'import { useStore } from "vuex"export default { setup() { const store = useStore()

原创 vue引用图片链接报403

在index.html中加上这个<!-- 解决图片403问题 --><meta name="referrer" content="no-referrer" />

原创 vue3中reactive赋值失败

前提：标题绑定点击事件，对于ref定义的普通类型的数据可以实现改变数值，对于reactive定义的数据不能直接赋值解决方法：再封装一层数据如：原本： let arr = reactive([]) =======> arr = [1,2,3] ×改为：let data = reactive({arr: []})data.arr = reactive([1,2,3]) √...

原创 vue3中css配置热更新

var px2rem = require('postcss-px2rem');const IS_PROD = ['production', 'test'].includes(process.env.NODE_ENV)module.exports = { devServer: { proxy: { '/api': { target: 'http://192.168.3.143:8080',//后端接口地址 c...

原创 java打包

来自前端菜鸟的记录

原创 解决编程式路由往同一地址跳转时会报错的情况

//解决编程式路由往同一地址跳转时会报错的情况const originalPush = VueRouter.prototype.push;const originalReplace = VueRouter.prototype.replace;//pushVueRouter.prototype.push = function push(location, onResolve, onReject) { if (onResolve || onReject) return originalPu.