- 博客(105)
- 收藏
- 关注
RSS订阅原创 Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidde
这是我在使用 antdesign 里面的轮播图时遇到的问题，后面上网查了一下，说明一下这个问题的原因及解决方法这个错误通常与网页 accessibility（无障碍访问）相关，涉及 ARIA 标签的不当使用，会导致屏幕阅读器等辅助技术无法正确识别焦点元素，影响用户的操作体验。以下是详细分析和解决方案一、错误原因解析核心问题：aria-hidden 与焦点冲突aria-hidden="true" 的作用是告诉辅助技术 “忽略该元素及其所有子元素”（包括视觉上不可见的元素）。
2025-05-25 16:32:57
823
原创 log.js:5 [vxe table v4.12.5] 缺少 “vxe-tooltip“ 组件,请检查是否正确安装。
那我们就把 vxe-tooltip 安装一下，不过需要注意的是， vxe-tooltip 不是从 vxe-table 导入的，而是从 vxe-pc-ui 导入的。在使用 vxe-table 的时候，假如我们选择的不是全部安装，而是自己的按需导入，后面在使用表格的时候报了这个错误。我们在安装 vxe-table 的页面加上。
2025-05-13 16:12:54
444
原创 （pnpm）引入 其他依赖失败，例如‘@element-plus/icons-vue‘失败
此时我们通过 npm 安装 A 包的时候，A 包和 B 包都会安装在 node_modules 目录下 ，所以即使我们只安装了 A 包，但是我们在项目中仍然可以使用 B 包。但是假如我们是通过 pnpm 安装的 A 包，那么在 node_modules 目录下就只有 A 包，当我们想着在项目使用 B 包的时候，就得重新下载。当我们在开发项目的时候，利用了 pnpm 来进行管理，可能有些依赖就无法引入，这是因为 pnpm 和 npm 管理包的方式不一样，
2025-05-09 15:02:51
427
原创 electron 结合 react(cra创建的) 创建桌面应用和打包桌面应用
我们开两个终端一个先执行 npm run start ，注意，这里需要等项目启动之后，再在另外一个终端中执行 npm run dev:ele。我们可以把刚刚的项目关闭后，直接在一个终端中输入 npm run dev 试试，就会发现，目前项目只会自己打开电脑桌面端了。wait-on 用于配合 concurrently ，在一个终端中，等上一个命令执行成功之后，在执行下一个命令。1，我们需要打开两个终端，一个执行完成之后我们在执行另外一个，可不可以直接在一个终端中进行操作；
2025-05-09 10:16:29
1249
原创 tailwindcss如何改变antd子组件的样式
我们在引入 tailwindcss 的文件加上这个，表示类名为 ant-select-arrow，并且是 arrow-none 的后代的元素会被隐藏。开发项目使用的是 tailwindcss ，当我们使用一些第三方组件的时候，有些时候需要改变第三方组件的样式，接下来我简单演示一下。假如我们的项目使用的是 react + tailwindcss + antdesign。之后我们在 App.js 中给 Select 组件加上类名 arrow-none。我们以把下拉选择框的箭头去掉为例。
2025-04-30 10:11:51
464
原创 Warning: [antd: compatible] antd v5 support React is 16 ~ 18. see https://u.ant.design/v5-for-19 for
这个错误的意思是指当前版本的 antdesign 主要是支持 react16-react18的，而我们目前使用的 react 版本是 react19，但是给我们提供了解决办法，下面我们来看一下解决办法。第二种方法官方还加了说明 Only for special scenarios such as umd, micro-applications, etc., use the。这里提供了两种解决方法，官方推荐第一种，第一种也是最简单的，下面来看一下第一种方法。
2025-04-29 10:16:07
868
原创 css中:is和:where 伪函数
is() 和 :where() 都能对选择器进行分组，但二者在优先级计算上有所不同。:is() 的优先级由其参数中优先级最高的选择器决定，而 :where() 的优先级始终为 0。在 CSS 里，:is() 属于伪类函数，其作用是对一组选择器进行匹配，只要元素与其中任何一个选择器相匹配，就可以应用对应的样式规则。运用 :is() 能够把多个选择器组合起来，让匹配这些选择器的元素应用相同的样式。在编写复杂选择器时，:is() 能避免重复书写相同的选择器前缀，使代码更简洁。与 :where() 的区别。
2025-04-28 21:49:13
915
原创 promise.resolve,promise.reject,promise.all的理解和运用
在 JavaScript 中，Promise是一种处理异步操作的机制，它可以避免回调地狱，使异步代码更易于阅读和维护。和是Promise对象的三个重要方法，下面为你详细解释它们的含义和运用。
2025-04-21 16:30:53
1255
原创 package.json 里面出现 workspace:*，关于工作区的解释
这里我说明一下，这里没有专门配置到哪个工作区，vue 项目寻找的时候，应该是当前目录没有找到，然后又跳到父级目录去找，之后找到的，关于 workspace 还有一些配置，大家自己去研究了，这里做一个简单的演示。当package.json 里面出现 workspace:*，一般用的是 MonoRepo 策略，关于这个策略，懂的就懂，不懂的也可以继续看下去，能理解 workspace:* 的。此时，vue 的 App.vue 和 vue 里面的 package.json 是这样的。启动 vue 项目，
2025-04-18 16:21:37
1264
原创 dispaly: inline-flex 和 display: flex 的区别
display: flex：将一个元素设置为块级弹性容器。而 display: inline-flex 的外部显示类型为行内块级（inline-block），这使得它可以和其他行内元素一起出现在同一行内，除非空间不足导致换行。都是 CSS 中用于创建弹性盒子布局（Flexbox）的属性值，但它们之间有一些关键的区别，主要体现在元素如何在页面上被渲染和它们对周围元素的影响。使用 display: inline-flex 时，元素仅占用其内容所需的宽度，并允许其他行内或行内块级元素与其并排显示在同一行中。
2025-04-17 10:00:15
1226
原创 This host (“xxx“) is not allowed. To allow this host, add “xxx“ to `server.allowedHosts` in vite.con
大概就是在浏览器中输入一个 域名，会映射到已经配置的 ip 地址去，比如我们之前输入的 localhost 会映射到 127.0.0.1 去。allowedHosts 是一个数组或者布尔值，如果设置为 true，则代表所有的 域名 都可以映射到，下面是 vite 官网给的说明。这是我在配置 域名映射到 ip 地址的时候发生的，域名 映射 ip 地址需要配置 hosts 文件，详情可以看这篇博客。下面假如我要配置一个域名 lysun，使在浏览器输入 lysun 的时候也会给映射到 127.0.0.1 ，
2025-04-17 09:34:16
1247
原创 用node编写git钩子hooks的示例
以 pre-commit 钩子为例，会在用户 git commit 的时候进行执行，假如我想在提交之前在终端输出一句话，正在提交。关于 git 钩子函数，就是在 git 进行提交的时候触发一些可执行脚本的功能，详情可以看这篇博客。此时在进行 git commit 的时候就会触发脚本里面的内容了。，我这里稍微演示一下怎么用 node 编写钩子的脚本。的文件（没有扩展名），编辑。2，在项目根目录下创建一个。文件夹，并在其中创建。
2025-04-16 15:17:05
951
原创 微前端无界的底层逻辑
由于 乾坤 目前对 vite 的支持不是很好，所以这是 无界 一个比较大的优势，接下来我会演示一下无界的底层逻辑理解无界的底层逻辑，需要对前端有一定的基础，用到的相关内容有 iframe，customElements.define，ShadowDOM(webcomponent)，Object.define， new Proxy如果对 ShadowDOM 没怎么接触过的人可以看看相关内容或者看这篇博客我的逻辑根据。
2025-04-15 16:35:29
1797
原创 tsconfig.json配置不生效
说明一下我遇到的问题，这是我的配置文件代码的和我想象不同的是，我编译成 js 没有在 dist 目录下生成 bundle.js下面我来说一下情况。
2025-04-14 15:24:13
1227
原创 谈谈 typescript 中 namespace 的理解
在 TypeScript 中，namespace是一种将代码组织到逻辑组中的方式。它主要用于避免全局命名空间污染，并帮助开发者更好地组织和管理代码。尽管现代 TypeScript 开发中更推荐使用模块（importexport），但在某些场景下（尤其是旧项目或需要兼容性时），namespace仍然有其用途。我的理解是， namespace 相当与 模块化的思想，因为那时候 js 的 module 还没有出来，所以 ts 出了这种功能，不过现在随着 js （importexport。
2025-04-14 15:05:53
1119
原创 No staged files match any configured task
我在拉取一个新项目的时候，进行 git commit 的时候就出现了这个问题然后我现在来说一下我出现这个问题的解决思路我们点击 “显示命令输出”我们把第二行的错误 subject may not be empty [subject-empty] 复制搜索一下。
2025-04-11 15:41:20
1197
原创 Uncaught (in promise) TypeError: container.contains is not a function（微前端无界报错）
最近公司项目需要使用微前端，最后找了几个框架，就在 乾坤 和 无界之间选择了无界，因为乾坤不太支持 vite。这个错误是因为我们在配置的时候，容器并不是一个 标签实例，给大家看一下我的代码。我在刚开始配置容器的时候，并没有进行 .value，所有导致报了这个错误。然后我刚刚上手无界的时候，就报了这个错误。
2025-04-11 09:23:28
1479
原创 Refused to apply style from ‘http://127.0.0.1:5500/assets/AboutView-CSIvawM9...(vue打包之后的index.html)
下面我来说一下我的这个错误的原因及解决方法，错误是因为我是通过 vscode 插件 LiveServer 启动的，通过这个插件启动的时候，我是直接在 vue 的项目里面启动的，导致了插件寻找的路径不对。解决方法：我们把打包之后的 dist 文件夹单独通过 vscode 打开，然后再在 index.html 文件通过插件打开就可以了。创建一个最新的 vue 项目的时候，我直接打包，但是发现启动 dist/index.html 会报这个错误。
2025-04-10 10:36:31
1451
原创 开发某个前端项目时debugger不生效，但是其他项目的debugger是生效的
这也是我最近遇到的一个问题，突然我在项目中打的断点就不生效了，首先我没有停用断点，而且我新建一个项目进行测试，发现是断点是正常的，偏偏对我开发的项目断点不生效，这可能是由于某些插件或者其他情况导致了浏览器忽略了我们这个项目的断点。假如某些时候弹出这个的时候，点击 remove 那个选项就好了。我来说一下解决方法，以 chrome 为例。
2025-04-01 17:33:07
1542
原创 qiankun微前端的使用
以上三个钩子函数可以收到 主应用 传递过来的参数 props，然后再在子应用中通过 window.__POWERED_BY_QIANKUN__ 判断一下当前的环境，如果是在 qiankun（主应用） 环境下该怎么渲染，不在 qiankun（自己单独） 环境下怎么渲染。在主应用中需要进行使用qiankun进行注册需要加载的子应用，并准备一个容器用于子应用的加载，还有路由的切换，因为qiankun就是监视路由来进行响应的。加载 export async function bootstrap。
2025-03-24 15:29:32
1707
原创 vxe-table的复选框更新页面后没有选项
过程就是在我们使用vxe-table的时候，页面进行了更新，重新渲染，但是之前在vxe-table中选中的的选项就没了，下面来看一下过程。当我勾选上面的 “备选项” 对页面进行刷新时，下面勾选的选项就自动清空了。一开始选择了两个选项。
2025-02-20 09:53:36
425
原创 vue2的$el.querySelector在vue3中怎么写
这个也属于直接操作 dom 了，不建议在项目中这样操作，不过我是在vue2升级vue3的时候遇到的，是以前同事写的代码，也没办法先来看一下对比在vue2中获取实例是直接通过 this.$refs.xxx 获取绑定属性 ref=xxx 的实例，并且实例上面的$el存在 querySelector 方法，看一下 vue2 的组件代码：此时当弹出那个出现时，是能看到这个方法的在vue3中我们获取实例是通过 const xxxInstance = ref(xxx) 获取绑定属性 ref=xxx 的实例，但是在
2025-01-21 16:20:18
887
原创 redux 结合 @reduxjs/toolkit 的使用
使用React Toolkit 创建 counterStore（store目录下） --> 为React注入store（src下面的index） --> React组件使用store中的数据（组件）页面是这样的，点击加减数字就会改变了。
2025-01-16 17:33:49
650
原创 vue2配置跨域后请求的是本机
这个我来说明一下，因为我们公司的后端设置解决了跨域问题，所以我有很久没有看相关的内容了，然后昨天请求了需要跨域的接口，请求半天一直不对，浏览器显示的是本机地址，我以为是自己配置错了，后面发现。比如现在我在本地启动了一个端口是 2555 的接口，然后配置跨域。
2025-01-16 11:02:02
1766
1
原创 vue3里面，事件触发一次，方法执行多次
现在我们两个组件，父组件 parent 和子组件 son，如果我们在父组件中引入自助件的时候，给他命名是驼峰命名法，然后父组件中又有一个方法和子组件的名字类似，就是驼峰的不一样而已，就可能会出现这种问题。这个bug也是我在v2升v3的时候，根据上一个前端写的代码，发现的问题。此时当点击按钮触发 teSt 方法的时候，就会执行多次。
2025-01-14 17:34:02
1158
原创 vue3页面是空白页，没有显示
这是一个标签使用的问题，假如在 根标签（不过vue3组件可以直接不用添加根标签） div 里面直接嵌套一个 template 标签，就是会导致页面是空白页。解决办法，直接把根标签里面的 template 标签去掉就好了，反正 template 标签最终也不会渲染到 dom 里面。
2025-01-14 11:02:04
1989
原创 使用 react 报Objects are not valid as a React child (found: object with keys {count}). If you meant to
我这里是在 react 中使用 redux 的时候报的这个错误，原因是我使用 useSelector hook函数的时候，返回的值没有进行解构就直接在模板中使用了。
2025-01-13 11:06:26
1210
原创 使用script标签，设置type=module,进行引入，报跨域的错误“from origin ‘null‘ has been blocked by CORS policy: Cross origi
这个策略阻止从本地文件系统加载的网页访问其他本地文件，因为浏览器将本地文件系统视为一个特殊的“null”源，而CORS策略不允许从一个“null”源发起跨源请求。使用本地服务器是解决这个问题的最常见和最推荐的方法。它不仅解决了CORS问题，还提供了更接近真实生产环境的测试条件，包括URL结构、路由和可能的服务器配置问题。：由于模块脚本默认从网络加载依赖，即使这些依赖同样是本地文件，浏览器也会尝试以跨源请求的方式处理它们，从而导致上述错误。
2025-01-12 17:47:11
1269
原创 在vscode中已经安装了插件Live Server，但是在命令面板确找不到
有时VS Code的缓存可能导致插件无法正确加载。尝试删除VS Code缓存文件夹（如C:\Users\你的用户名\AppData\Roaming\Code）中的文件，并重启VS Code。尝试卸载Live Server插件，并从VS Code的扩展市场中重新安装。我是直接卸载后重新安装解决的。
2025-01-12 17:37:11
1344
原创 前端常用网站官网(MDN,vue,react,element,lodash,axios,vxe-table,dayjs,Muse-ui,typescript,sass,less,eslint)
分享一些前端开发可能会经常看的官网。
2025-01-08 11:46:46
2308
原创 vue（2,3）, react (16及以上)开发者工具资源
在开发前端项目的时候，使用框架的开发者工具可以更加方便，一般下载相关的插件我们会在谷歌商店里面进行下载，但是有时会因为是外网的原因从而使进入谷歌商店不稳定，所以我把开发者工具进行了压缩上传，使用的时候直接解压拖拽到谷歌浏览器扩展那里就好。
2025-01-08 11:29:54
1416
1
原创 react构建项目报错 `npm install --no-audit --save @testing-l
第二步：添加依赖 web-vitals（@testing-library/jest-dom 和 @testing-library/user-event 自己可选是否添加）第一步：在 package.json 中把依赖 react19 改为 react 18。这应该是我们想构建 react18 的项目，但是 通过。进行构建时，给我们安装的依赖是 react 19。之后重新 npm i 一下就可以正常安装依赖了。
2025-01-06 11:21:41
1522
原创 vue里面的comments的讲解及使用
所以我们通过完整版的 vue 来看一下 comments 的使用，我这里是通过 bootcdn 引用的远程资源完整版 vue，如果试验的时候这个 cdn 用不了了，你们可以 npm i vue@2 之后在 node_modules 里面找到完整版自己引用就行。下面我们来说一下 完整构建版本中编译时 是什么意思，我们平常通过 vueCLI 用的 vue 的，并不是完整版的。先说明一下，我干前端也挺久了，这个属性一般不使用，只是今天有时间，发现没有了解过这个属性，恰好看一下。
2024-12-27 16:00:56
2393
原创 Failed to resolve import “element-plus/es/components/submenu/style/css“ from “src/components/trimxxx
报错是[vite] Internal server error: Failed to resolve import "element-plus/es/components/submenu/style/css" from "src/components/trimxxx.vue". Does the file exist?找到这个东西，是引入的，那么我们就去官网找 element-ui 和 element-plus 的使用案例对比一下，看看差别就好了。下面来说一下解决思路。
2024-12-02 17:33:45
2486
1
原创 v-model直接把数据初始化成空字符串‘‘,el-select没有回显初始数据，有关element-plus的el-select组件和TreeSelect组件
我直接说原因吧，就是当 element 选择组件在没有开启可以多选时，传递的是一个数组时，就会把传递的数据初始化成一个空字符传''所以当没有开启多选 multiple 时，我们需要传递是字符串，当开启 multiple 时，我们才传递数组。
2024-11-29 17:24:29
2260
原创 js里面if的小坑（和return有关）
我们都只知道，在js里面，当只有一个条件时，并且后面只有一条执行语句时，是可以忽略中括号 { } 的，并且可以加上 return 来代表代码到此结束，但是 return 后面的内容换不换行却有关系。当 return 后面的那条语句不换行时，代表返回 return 后面那条语句。当 return 后面的那条语句换行时，代表到此执行结束。
2024-11-26 12:00:49
1513
原创 vue2中的this.$el,this.$parent,this.$children 在vue3中如何表示
当在 vue2 根据 this.$children 获取到的子组件是一个数组，而在 vue3 中通过 ref 获取到的子组件，如果只有一个 ref=xxx,获取到的 xxx 就是一个子组件实例，当有多个 ref=xxx 的时候，获取到的才是数组，下面来看一下详细的。然后在说一下 this.$children,在vue2中，this.$children 就是获取子组件的实例，vue3 我们可以通过 ref 获取。输出的是它的父组件，我们在vue3中获取父组件是这样的。让我们来看一下输出是什么样子的。
2024-11-25 16:21:03
3178
原创 onMounted is called when there is no active component instance to be associated with. Lifecycle inje
这个是说明我们的 onMounted 没有在 setup 里面使用，来看一下我的代码。
2024-11-25 16:12:22
1030
原创 [less] Operation on an invalid type
在scss中，我们使用 除号 / 的时候，不用加上 括号()，但是在less中，我们使用 除号/ 的时候，需要加上 括号()，否则对less的写法就是错的。
2024-11-22 15:33:41
2594
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人