- 博客(87)
- 收藏
- 关注
RSS订阅原创 开发某个前端项目时debugger不生效，但是其他项目的debugger是生效的
这也是我最近遇到的一个问题，突然我在项目中打的断点就不生效了，首先我没有停用断点，而且我新建一个项目进行测试，发现是断点是正常的，偏偏对我开发的项目断点不生效，这可能是由于某些插件或者其他情况导致了浏览器忽略了我们这个项目的断点。假如某些时候弹出这个的时候，点击 remove 那个选项就好了。我来说一下解决方法，以 chrome 为例。
2025-04-01 17:33:07
166
原创 qiankun微前端的使用
以上三个钩子函数可以收到 主应用 传递过来的参数 props，然后再在子应用中通过 window.__POWERED_BY_QIANKUN__ 判断一下当前的环境，如果是在 qiankun（主应用） 环境下该怎么渲染，不在 qiankun（自己单独） 环境下怎么渲染。在主应用中需要进行使用qiankun进行注册需要加载的子应用，并准备一个容器用于子应用的加载，还有路由的切换，因为qiankun就是监视路由来进行响应的。加载 export async function bootstrap。
2025-03-24 15:29:32
472
原创 vxe-table的复选框更新页面后没有选项
过程就是在我们使用vxe-table的时候，页面进行了更新，重新渲染，但是之前在vxe-table中选中的的选项就没了，下面来看一下过程。当我勾选上面的 “备选项” 对页面进行刷新时，下面勾选的选项就自动清空了。一开始选择了两个选项。
2025-02-20 09:53:36
144
原创 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
692
原创 redux 结合 @reduxjs/toolkit 的使用
使用React Toolkit 创建 counterStore（store目录下） --> 为React注入store（src下面的index） --> React组件使用store中的数据（组件）页面是这样的，点击加减数字就会改变了。
2025-01-16 17:33:49
634
原创 vue2配置跨域后请求的是本机
这个我来说明一下，因为我们公司的后端设置解决了跨域问题，所以我有很久没有看相关的内容了，然后昨天请求了需要跨域的接口，请求半天一直不对，浏览器显示的是本机地址，我以为是自己配置错了，后面发现。比如现在我在本地启动了一个端口是 2555 的接口，然后配置跨域。
2025-01-16 11:02:02
519
1
原创 vue3里面，事件触发一次，方法执行多次
现在我们两个组件，父组件 parent 和子组件 son，如果我们在父组件中引入自助件的时候，给他命名是驼峰命名法，然后父组件中又有一个方法和子组件的名字类似，就是驼峰的不一样而已，就可能会出现这种问题。这个bug也是我在v2升v3的时候，根据上一个前端写的代码，发现的问题。此时当点击按钮触发 teSt 方法的时候，就会执行多次。
2025-01-14 17:34:02
257
原创 vue3页面是空白页，没有显示
这是一个标签使用的问题，假如在 根标签（不过vue3组件可以直接不用添加根标签） div 里面直接嵌套一个 template 标签，就是会导致页面是空白页。解决办法，直接把根标签里面的 template 标签去掉就好了，反正 template 标签最终也不会渲染到 dom 里面。
2025-01-14 11:02:04
638
原创 使用 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
759
原创 使用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
1142
原创 在vscode中已经安装了插件Live Server，但是在命令面板确找不到
有时VS Code的缓存可能导致插件无法正确加载。尝试删除VS Code缓存文件夹（如C:\Users\你的用户名\AppData\Roaming\Code）中的文件，并重启VS Code。尝试卸载Live Server插件，并从VS Code的扩展市场中重新安装。我是直接卸载后重新安装解决的。
2025-01-12 17:37:11
1193
原创 前端常用网站官网(MDN,vue,react,element,lodash,axios,vxe-table,dayjs,Muse-ui,typescript,sass,less,eslint)
分享一些前端开发可能会经常看的官网。
2025-01-08 11:46:46
1092
原创 vue（2,3）, react (16及以上)开发者工具资源
在开发前端项目的时候，使用框架的开发者工具可以更加方便，一般下载相关的插件我们会在谷歌商店里面进行下载，但是有时会因为是外网的原因从而使进入谷歌商店不稳定，所以我把开发者工具进行了压缩上传，使用的时候直接解压拖拽到谷歌浏览器扩展那里就好。
2025-01-08 11:29:54
1389
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
1505
原创 vue里面的comments的讲解及使用
所以我们通过完整版的 vue 来看一下 comments 的使用，我这里是通过 bootcdn 引用的远程资源完整版 vue，如果试验的时候这个 cdn 用不了了，你们可以 npm i vue@2 之后在 node_modules 里面找到完整版自己引用就行。下面我们来说一下 完整构建版本中编译时 是什么意思，我们平常通过 vueCLI 用的 vue 的，并不是完整版的。先说明一下，我干前端也挺久了，这个属性一般不使用，只是今天有时间，发现没有了解过这个属性，恰好看一下。
2024-12-27 16:00:56
1072
原创 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
2044
1
原创 v-model直接把数据初始化成空字符串‘‘,el-select没有回显初始数据，有关element-plus的el-select组件和TreeSelect组件
我直接说原因吧，就是当 element 选择组件在没有开启可以多选时，传递的是一个数组时，就会把传递的数据初始化成一个空字符传''所以当没有开启多选 multiple 时，我们需要传递是字符串，当开启 multiple 时，我们才传递数组。
2024-11-29 17:24:29
1010
原创 js里面if的小坑（和return有关）
我们都只知道，在js里面，当只有一个条件时，并且后面只有一条执行语句时，是可以忽略中括号 { } 的，并且可以加上 return 来代表代码到此结束，但是 return 后面的内容换不换行却有关系。当 return 后面的那条语句不换行时，代表返回 return 后面那条语句。当 return 后面的那条语句换行时，代表到此执行结束。
2024-11-26 12:00:49
1051
原创 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
1732
原创 onMounted is called when there is no active component instance to be associated with. Lifecycle inje
这个是说明我们的 onMounted 没有在 setup 里面使用，来看一下我的代码。
2024-11-25 16:12:22
985
原创 [less] Operation on an invalid type
在scss中，我们使用 除号 / 的时候，不用加上 括号()，但是在less中，我们使用 除号/ 的时候，需要加上 括号()，否则对less的写法就是错的。
2024-11-22 15:33:41
1994
原创 scss中的@include讲解以及关于scss和less中mixin的应用
指令时，你实际上是在告诉 SCSS 编译器将指定的 mixin 中定义的样式规则复制到当前的选择器中。这允许你创建可重用的样式块，并在需要时将它们包含到不同的选择器中，从而减少代码的重复和提高样式的可维护性。指令类似的功能，它允许你将一组 CSS 属性或选择器封装到一个可重用的模块中，并在需要时将其包含（或插入）到其他选择器中。在 SCSS（Sass 的一个语法糖，它是 CSS 的一个超集，意味着所有的 CSS 都是有效的 SCSS，但 SCSS 提供了额外的功能和语法）中，的混合，它接受一个参数。
2024-11-22 15:12:02
2067
原创 vue3怎么根据字符串获取组件实例
我在点击某个按钮的时候，调用了方法handler，传递了一个参数是字符串 'condition'，然后方法中通过 this.$refs[strRef] 后去到绑定 ref = 'condition' 的组件，我在vue3中也需要通过这样的方法获取到相关组件。所以当 strRef 是字符串变量时，我们可以通过 instance.refs[strRef] 的方法获取到相关的组件实例。获取到当前的组件实例，其中 instance 就是当前组件实例，下面我们来输出一下，看看 instance 下面都有什么。
2024-11-20 12:02:20
1767
原创 隧道 http://qnbk65.natappfree.cc 无效，无法连接到127.0.0.1:2999. 此端口尚未提供Web服务
说一下我这里出现这个问题的原因，我们在 natapp 官网把 端口配置好了，但是后台的服务没有启动或者后台服务的端口不是我们配置的那个的话，就会出现这个问题。但是假如我没有启动服务，或者启动的服务是其他端口的，就会出现这个问题。使用 natapp 进行内网穿透的时候出现了这个问题。例如这里配置了 2999 这个端口。
2024-11-18 11:53:25
1268
原创 云服务器安装mysql8.0（阿里云或者腾讯云都可以）
先说明一下，我使用的是腾讯云，之前用阿里云，然后试用期到期了，所以这次换腾讯云使用，没想到，我在腾讯云里面需要按照阿里云的教程做，还成功了。
2024-11-14 11:59:35
1840
原创 前端表格复制粘贴自动根据标识进行填充
需求是需要在 wps 或者 excel 的表格中复制一个表格，然后在前端的表格中自动根据 姓名 去进行填充，下面我来演示一下功能。下面来看一下我的代码，注意，代码中已经写了必需是根据 姓名来匹配数据，需要根据其他的，你们自己调整，在我的代码中会报错，我没有继续研究这个东西了，所以没有处理。我的思路就是可以获取到需要粘贴的数据，然后又可以获取到表格的数据，对比两份数据，找到 姓名 那一行，进行处理，处理完之后再填充到前端表格。来大概说一下过程，提供思路，不过代码是之前写的了，只能说个大概。
2024-11-01 15:23:59
756
原创 vue3的defineSlots()
上述代码在 vscode 里面并没有任何报错或者提醒，说明代码是正常的，但是 假如我们在 插槽子组件中 使用了 defineSlots() 对 slot 的属性进行标注，就会有提示。这个主要是用于类型校验使用的，和 ts 一起对 slot 进行传递的值进行类型检查，主要在 具名作用域插槽 里面。接下来我们来看代码吧，我有一个文件夹，里面分别有一个 父组件one 和 一个 插槽子组件two。先来看一下官网的说明，后面我会详细解释。
2024-11-01 10:59:53
1955
原创 [el-checkbox] [API] label act as value is about to be deprecated in version 3.0.0, please use value
这个错误主要是发生在 element-plus 的 el-checkbox 中，原因是 element-ui 和 element-plus 的 el-checkbox 组件有所改变。之前的 label 属性可以作为 值 来进行选项，现在得换成 value 了。这是 element-plus 的说明。
2024-10-28 10:38:56
2434
原创 error Unexpected mutation of “xxxxx“ prop
不改变父组件传递过来的 props，如果需要改变父组件传递过来的值，可以使用 defineModel() 进行接收值，如果不了解 defineModel() 的可以去 vue3 的官网看一下。eslint的配置文件名可能为以下名称，以前的版本还有 .eslintrc.js 等也是 eslint 的配置文件。错误是在进行 eslint 检查的时候触发的，这个错误的原因是我们在子组件中改变了父组件传递过来的 props。在 eslint 的配置文件中，直接关闭此条 eslint 的规则，
2024-10-24 15:55:43
1292
原创 ConfigError: Config (unnamed): Key “rules“: Key “constructor-super“: structuredClone is not defined
我们把 eslint 的版本降到 8 ,命令行输入。当 eslint 进行检查的时候，报了这个错误。
2024-10-24 15:30:19
2873
原创 Cannot read properties of undefined (reading ‘type‘)vue每个 *.vue 文件最多可以包含一个顶层 ＜template＞ 块。语块包裹的内容
原因二：虽然没有直接 template 嵌套 template 标签，但是中间的过渡标签是 div 等原生标签。原因一：template 直接嵌套了 template 标签。我来说一下报错的原因。
2024-10-21 17:35:54
1637
原创 eslint的使用及部分配置规则
虽然随着 eslint 的更新，上面的视频操作已经和新版本的 eslint 有所差别了，但是仔细看一下官网，然后在看一边视频，一般都是可以使用的。然后如果我们在项目中使用 vue 或者 react 等框架，他们对应有自己的 eslint 插件，有插件自己的配置语法检查规则。强制执行 "for" 循环更新子句，使计数器向正确的方向移动。首先创建一个项目文件夹，我这里叫做 eslint-test。在数组方法的回调中强制执行 return 语句。禁止使用异步函数作为 Promise 执行器。
2024-10-17 11:59:15
1385
1
原创 Uncaught (in promise) TypeError: Cannot convert object to primitive value
说一下我这里这个错误和警告的原因，是因为我把传给 第三方组件的值 也当做了 第三方组件的 ref，可能没太说清楚，所以接下来看代码，我这里使用的第三方组件是 vxe-table。使用vue3的时候报了这个错误，而且还同时报了一个警告。
2024-10-15 17:36:53
2326
原创 [Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automa
我这里的错误是由于将多余的属性 class 绑定给了第三方组件，删除属性即可。项目是用vue3写的，报了这个错误。
2024-10-15 15:59:57
1551
原创 el-image-viewer 大图预览（源码，属性讲解）
以上是组件共享出来的属性，如果我们想有一些个性化的需求，比如轮播到最后一张不能滚动等，可以使用 infinite，infinite 虽然没有共享出来，我们可以在 父组件 通过 this.$refs 的方法获取到这个组件，然后就可以改变他的 infinite 属性了，要注意的是，需要在当前组件 v-if 为真的时候通过this.$refs获取。或者我们可以自己把源码封装成一个自己的组件，方便使用。图片的urc数组，里面的每一项元素是一个图片地址。预览的初始图片在urlList的索引。
2024-09-25 14:36:22
2605
原创 三元表达式的嵌套用法a ＞ 0 ? b ＞ 0 ? c : d : e；（我之前还以为是五元表达式）
c : d : e;其实就是两个三元表达式的嵌套用法，这是我看见之前的同事写的代码，当时没看出来，就研究了一下，上面的代码就等于 let test = b > 0?
2024-09-13 11:44:34
1468
原创 vscode中全局代码片段怎么改名字
在使用vscode定义自己的代码片段的时候，有几个选项，如果我们选择了 vue.json 的文件定义代码片段，那么只能在 vue 文件中使用该片段，并且是 vue 文件中没有写其他代码的时候，如果 vue 文件中写了其他代码，那么 vue.json 里面定义的代码片段还还使用不了，所以我们需要定义一个全局代码片段，我下面会跟着说全局代码片段的定义以及定义了之后，怎么更改全局代码片段的名字。跳出文件来在这里定义自己的全局代码片段就好了，这里定义的代码片段，全局生效。然后会弹出文件所在位置。
2024-09-05 16:25:14
1598
原创 v-bind后面不加属性和v-bind的动态属性
v-bind 平常常见的用法我们应该都知道，说一说 v-bind 的不常用的方式，第一个就是 v-bind 后面直接不添加任何属性，此时会将一个对象的所有 property 都作为 prop 传入。下面来说一下 v-bind 的动态属性，例如 v-bind:[str]="sonObj" 的 str 会自动根据 data 里面的数据来充当属性。
2024-09-04 15:28:51
3337
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人