- 博客(98)
- 收藏
- 关注
RSS订阅原创 promise.resolve,promise.reject,promise.all的理解和运用
在 JavaScript 中，Promise是一种处理异步操作的机制，它可以避免回调地狱，使异步代码更易于阅读和维护。和是Promise对象的三个重要方法，下面为你详细解释它们的含义和运用。
2025-04-21 16:30:53
435
原创 package.json 里面出现 workspace:*，关于工作区的解释
这里我说明一下，这里没有专门配置到哪个工作区，vue 项目寻找的时候，应该是当前目录没有找到，然后又跳到父级目录去找，之后找到的，关于 workspace 还有一些配置，大家自己去研究了，这里做一个简单的演示。当package.json 里面出现 workspace:*，一般用的是 MonoRepo 策略，关于这个策略，懂的就懂，不懂的也可以继续看下去，能理解 workspace:* 的。此时，vue 的 App.vue 和 vue 里面的 package.json 是这样的。启动 vue 项目，
2025-04-18 16:21:37
420
原创 dispaly: inline-flex 和 display: flex 的区别
display: flex：将一个元素设置为块级弹性容器。而 display: inline-flex 的外部显示类型为行内块级（inline-block），这使得它可以和其他行内元素一起出现在同一行内，除非空间不足导致换行。都是 CSS 中用于创建弹性盒子布局（Flexbox）的属性值，但它们之间有一些关键的区别，主要体现在元素如何在页面上被渲染和它们对周围元素的影响。使用 display: inline-flex 时，元素仅占用其内容所需的宽度，并允许其他行内或行内块级元素与其并排显示在同一行中。
2025-04-17 10:00:15
465
原创 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
341
原创 用node编写git钩子hooks的示例
以 pre-commit 钩子为例，会在用户 git commit 的时候进行执行，假如我想在提交之前在终端输出一句话，正在提交。关于 git 钩子函数，就是在 git 进行提交的时候触发一些可执行脚本的功能，详情可以看这篇博客。此时在进行 git commit 的时候就会触发脚本里面的内容了。，我这里稍微演示一下怎么用 node 编写钩子的脚本。的文件（没有扩展名），编辑。2，在项目根目录下创建一个。文件夹，并在其中创建。
2025-04-16 15:17:05
362
原创 微前端无界的底层逻辑
由于 乾坤 目前对 vite 的支持不是很好，所以这是 无界 一个比较大的优势，接下来我会演示一下无界的底层逻辑理解无界的底层逻辑，需要对前端有一定的基础，用到的相关内容有 iframe，customElements.define，ShadowDOM(webcomponent)，Object.define， new Proxy如果对 ShadowDOM 没怎么接触过的人可以看看相关内容或者看这篇博客我的逻辑根据。
2025-04-15 16:35:29
1219
原创 tsconfig.json配置不生效
说明一下我遇到的问题，这是我的配置文件代码的和我想象不同的是，我编译成 js 没有在 dist 目录下生成 bundle.js下面我来说一下情况。
2025-04-14 15:24:13
486
原创 谈谈 typescript 中 namespace 的理解
在 TypeScript 中，namespace是一种将代码组织到逻辑组中的方式。它主要用于避免全局命名空间污染，并帮助开发者更好地组织和管理代码。尽管现代 TypeScript 开发中更推荐使用模块（importexport），但在某些场景下（尤其是旧项目或需要兼容性时），namespace仍然有其用途。我的理解是， namespace 相当与 模块化的思想，因为那时候 js 的 module 还没有出来，所以 ts 出了这种功能，不过现在随着 js （importexport。
2025-04-14 15:05:53
439
原创 No staged files match any configured task
我在拉取一个新项目的时候，进行 git commit 的时候就出现了这个问题然后我现在来说一下我出现这个问题的解决思路我们点击 “显示命令输出”我们把第二行的错误 subject may not be empty [subject-empty] 复制搜索一下。
2025-04-11 15:41:20
1139
原创 Uncaught (in promise) TypeError: container.contains is not a function（微前端无界报错）
最近公司项目需要使用微前端，最后找了几个框架，就在 乾坤 和 无界之间选择了无界，因为乾坤不太支持 vite。这个错误是因为我们在配置的时候，容器并不是一个 标签实例，给大家看一下我的代码。我在刚开始配置容器的时候，并没有进行 .value，所有导致报了这个错误。然后我刚刚上手无界的时候，就报了这个错误。
2025-04-11 09:23:28
1441
原创 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
1305
原创 开发某个前端项目时debugger不生效，但是其他项目的debugger是生效的
这也是我最近遇到的一个问题，突然我在项目中打的断点就不生效了，首先我没有停用断点，而且我新建一个项目进行测试，发现是断点是正常的，偏偏对我开发的项目断点不生效，这可能是由于某些插件或者其他情况导致了浏览器忽略了我们这个项目的断点。假如某些时候弹出这个的时候，点击 remove 那个选项就好了。我来说一下解决方法，以 chrome 为例。
2025-04-01 17:33:07
1389
原创 qiankun微前端的使用
以上三个钩子函数可以收到 主应用 传递过来的参数 props，然后再在子应用中通过 window.__POWERED_BY_QIANKUN__ 判断一下当前的环境，如果是在 qiankun（主应用） 环境下该怎么渲染，不在 qiankun（自己单独） 环境下怎么渲染。在主应用中需要进行使用qiankun进行注册需要加载的子应用，并准备一个容器用于子应用的加载，还有路由的切换，因为qiankun就是监视路由来进行响应的。加载 export async function bootstrap。
2025-03-24 15:29:32
1676
原创 vxe-table的复选框更新页面后没有选项
过程就是在我们使用vxe-table的时候，页面进行了更新，重新渲染，但是之前在vxe-table中选中的的选项就没了，下面来看一下过程。当我勾选上面的 “备选项” 对页面进行刷新时，下面勾选的选项就自动清空了。一开始选择了两个选项。
2025-02-20 09:53:36
274
原创 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
769
原创 redux 结合 @reduxjs/toolkit 的使用
使用React Toolkit 创建 counterStore（store目录下） --> 为React注入store（src下面的index） --> React组件使用store中的数据（组件）页面是这样的，点击加减数字就会改变了。
2025-01-16 17:33:49
640
原创 vue2配置跨域后请求的是本机
这个我来说明一下，因为我们公司的后端设置解决了跨域问题，所以我有很久没有看相关的内容了，然后昨天请求了需要跨域的接口，请求半天一直不对，浏览器显示的是本机地址，我以为是自己配置错了，后面发现。比如现在我在本地启动了一个端口是 2555 的接口，然后配置跨域。
2025-01-16 11:02:02
1733
1
原创 vue3里面，事件触发一次，方法执行多次
现在我们两个组件，父组件 parent 和子组件 son，如果我们在父组件中引入自助件的时候，给他命名是驼峰命名法，然后父组件中又有一个方法和子组件的名字类似，就是驼峰的不一样而已，就可能会出现这种问题。这个bug也是我在v2升v3的时候，根据上一个前端写的代码，发现的问题。此时当点击按钮触发 teSt 方法的时候，就会执行多次。
2025-01-14 17:34:02
1018
原创 vue3页面是空白页，没有显示
这是一个标签使用的问题，假如在 根标签（不过vue3组件可以直接不用添加根标签） div 里面直接嵌套一个 template 标签，就是会导致页面是空白页。解决办法，直接把根标签里面的 template 标签去掉就好了，反正 template 标签最终也不会渲染到 dom 里面。
2025-01-14 11:02:04
1919
原创 使用 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
1189
原创 使用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
1182
原创 在vscode中已经安装了插件Live Server，但是在命令面板确找不到
有时VS Code的缓存可能导致插件无法正确加载。尝试删除VS Code缓存文件夹（如C:\Users\你的用户名\AppData\Roaming\Code）中的文件，并重启VS Code。尝试卸载Live Server插件，并从VS Code的扩展市场中重新安装。我是直接卸载后重新安装解决的。
2025-01-12 17:37:11
1258
原创 前端常用网站官网(MDN,vue,react,element,lodash,axios,vxe-table,dayjs,Muse-ui,typescript,sass,less,eslint)
分享一些前端开发可能会经常看的官网。
2025-01-08 11:46:46
2279
原创 vue（2,3）, react (16及以上)开发者工具资源
在开发前端项目的时候，使用框架的开发者工具可以更加方便，一般下载相关的插件我们会在谷歌商店里面进行下载，但是有时会因为是外网的原因从而使进入谷歌商店不稳定，所以我把开发者工具进行了压缩上传，使用的时候直接解压拖拽到谷歌浏览器扩展那里就好。
2025-01-08 11:29:54
1400
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
1512
原创 vue里面的comments的讲解及使用
所以我们通过完整版的 vue 来看一下 comments 的使用，我这里是通过 bootcdn 引用的远程资源完整版 vue，如果试验的时候这个 cdn 用不了了，你们可以 npm i vue@2 之后在 node_modules 里面找到完整版自己引用就行。下面我们来说一下 完整构建版本中编译时 是什么意思，我们平常通过 vueCLI 用的 vue 的，并不是完整版的。先说明一下，我干前端也挺久了，这个属性一般不使用，只是今天有时间，发现没有了解过这个属性，恰好看一下。
2024-12-27 16:00:56
2323
原创 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
2235
1
原创 v-model直接把数据初始化成空字符串‘‘,el-select没有回显初始数据，有关element-plus的el-select组件和TreeSelect组件
我直接说原因吧，就是当 element 选择组件在没有开启可以多选时，传递的是一个数组时，就会把传递的数据初始化成一个空字符传''所以当没有开启多选 multiple 时，我们需要传递是字符串，当开启 multiple 时，我们才传递数组。
2024-11-29 17:24:29
2229
原创 js里面if的小坑（和return有关）
我们都只知道，在js里面，当只有一个条件时，并且后面只有一条执行语句时，是可以忽略中括号 { } 的，并且可以加上 return 来代表代码到此结束，但是 return 后面的内容换不换行却有关系。当 return 后面的那条语句不换行时，代表返回 return 后面那条语句。当 return 后面的那条语句换行时，代表到此执行结束。
2024-11-26 12:00:49
1489
原创 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
3045
原创 onMounted is called when there is no active component instance to be associated with. Lifecycle inje
这个是说明我们的 onMounted 没有在 setup 里面使用，来看一下我的代码。
2024-11-25 16:12:22
1001
原创 [less] Operation on an invalid type
在scss中，我们使用 除号 / 的时候，不用加上 括号()，但是在less中，我们使用 除号/ 的时候，需要加上 括号()，否则对less的写法就是错的。
2024-11-22 15:33:41
2019
原创 scss中的@include讲解以及关于scss和less中mixin的应用
指令时，你实际上是在告诉 SCSS 编译器将指定的 mixin 中定义的样式规则复制到当前的选择器中。这允许你创建可重用的样式块，并在需要时将它们包含到不同的选择器中，从而减少代码的重复和提高样式的可维护性。指令类似的功能，它允许你将一组 CSS 属性或选择器封装到一个可重用的模块中，并在需要时将其包含（或插入）到其他选择器中。在 SCSS（Sass 的一个语法糖，它是 CSS 的一个超集，意味着所有的 CSS 都是有效的 SCSS，但 SCSS 提供了额外的功能和语法）中，的混合，它接受一个参数。
2024-11-22 15:12:02
2193
原创 vue3怎么根据字符串获取组件实例
我在点击某个按钮的时候，调用了方法handler，传递了一个参数是字符串 'condition'，然后方法中通过 this.$refs[strRef] 后去到绑定 ref = 'condition' 的组件，我在vue3中也需要通过这样的方法获取到相关组件。所以当 strRef 是字符串变量时，我们可以通过 instance.refs[strRef] 的方法获取到相关的组件实例。获取到当前的组件实例，其中 instance 就是当前组件实例，下面我们来输出一下，看看 instance 下面都有什么。
2024-11-20 12:02:20
1775
原创 隧道 http://qnbk65.natappfree.cc 无效，无法连接到127.0.0.1:2999. 此端口尚未提供Web服务
说一下我这里出现这个问题的原因，我们在 natapp 官网把 端口配置好了，但是后台的服务没有启动或者后台服务的端口不是我们配置的那个的话，就会出现这个问题。但是假如我没有启动服务，或者启动的服务是其他端口的，就会出现这个问题。使用 natapp 进行内网穿透的时候出现了这个问题。例如这里配置了 2999 这个端口。
2024-11-18 11:53:25
1346
原创 云服务器安装mysql8.0（阿里云或者腾讯云都可以）
先说明一下，我使用的是腾讯云，之前用阿里云，然后试用期到期了，所以这次换腾讯云使用，没想到，我在腾讯云里面需要按照阿里云的教程做，还成功了。
2024-11-14 11:59:35
1863
原创 前端表格复制粘贴自动根据标识进行填充
需求是需要在 wps 或者 excel 的表格中复制一个表格，然后在前端的表格中自动根据 姓名 去进行填充，下面我来演示一下功能。下面来看一下我的代码，注意，代码中已经写了必需是根据 姓名来匹配数据，需要根据其他的，你们自己调整，在我的代码中会报错，我没有继续研究这个东西了，所以没有处理。我的思路就是可以获取到需要粘贴的数据，然后又可以获取到表格的数据，对比两份数据，找到 姓名 那一行，进行处理，处理完之后再填充到前端表格。来大概说一下过程，提供思路，不过代码是之前写的了，只能说个大概。
2024-11-01 15:23:59
876
原创 vue3的defineSlots()
上述代码在 vscode 里面并没有任何报错或者提醒，说明代码是正常的，但是 假如我们在 插槽子组件中 使用了 defineSlots() 对 slot 的属性进行标注，就会有提示。这个主要是用于类型校验使用的，和 ts 一起对 slot 进行传递的值进行类型检查，主要在 具名作用域插槽 里面。接下来我们来看代码吧，我有一个文件夹，里面分别有一个 父组件one 和 一个 插槽子组件two。先来看一下官网的说明，后面我会详细解释。
2024-11-01 10:59:53
1999
原创 [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
2675
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人