早八睡不醒午觉睡不够的程序猿-CSDN博客

原创随机掉落的项目足迹：修改组件库默认样式

为了便于讲解，我直接引入案例在使用element ui的表单组件时，我觉得输入框前面的“文章标题”几个字太小了，想改大一点。

2024-10-11 16:23:34 392

原创随机掉落的项目足迹：解决TypeError: Cannot read properties of undefined (reading ‘push‘)报错

useRouter() 是 Vue Router 提供的组合式 API，它只能在 Vue 组件的 setup() 函数中有效。如果在其他地方（例如 Axios 的拦截器中）调用它，可能会导致 router 为 undefined，因为这时没有 Vue 组件的上下文。要解决这个问题，可以将将 useRouter() 替换为直接导入 router 实例

2024-10-10 15:05:42 491

原创随机掉落的项目足迹：Element UI组件库 ElMessage 组件报错或样式丢失

使用 Element UI 组件库时，如果用的是自动按需导入，那么就无需通过import语句导入组件，直接就能在项目里使用但是 ElMessage 虽然可以正常使用，但是代码却会出现报错虽然组件用起来没问题，但是这个报错看着还是让人很不舒服但如果加上import { ElMessage } from 'element-plus' ，报错虽然消失了，但组件样式又失效了要怎样才能让代码不报错，组件样式又不失效呢？

2024-10-09 12:57:52 371

原创随机掉落的项目足迹：使用箭头函数时踩到的坑

这篇博客没有啥硬核知识，讲的是我遇到问题然后排错的过程，大家可以当故事看看

2024-10-09 12:42:55 215

原创随机掉落的项目足迹：Vue3中vite.config.ts配置代理服务器解决跨域问题

本博客涵盖：什么是跨域问题、产生跨域问题的原因（浏览器同源策略）、前端解决跨域问题的原理、配置代理服务器解决跨域问题的方法，以及整个过程中可能踩到的坑

2024-10-08 12:57:11 1244

原创随机掉落的项目足迹：100vh - 50px——减法居然还能这么玩儿？

但今天，我向 chatGPT请教了一番，他的操作让我大为震撼，原来100vh - 50px 是能计算的！减法居然还能这么玩儿？但是，如果用 vh 为单位的话，我们就需要用 100vh 减去导航栏的高度 50px ，两个单位不相同，也不能减啊。顶部导航栏是 50px，然后左侧导航栏的高度需要占满屏幕剩余的高度，那么问题来了，剩余的高度是多少？很显然，不同的屏幕尺寸对应的像素值也不同，我们需要适配所有尺寸的屏幕，所以绝对不能用 px 单位。, 你可以灵活地设置元素的大小或位置，便于响应式设计。

2024-09-23 21:51:37 210

原创随机掉落的项目足迹：Vue3 + wangEditor5富文本编辑器——toolbar.getConfig() 查看工具栏的默认配置

小提示：问题引入是一个讲故事的废话环节，各位小伙伴可以直接跳到第二大点：问题解决我的项目不需要在富文本编辑器中引入添加代码块的功能，于是我寻思在工具栏上把操作代码的菜单删一删于是我来到官网文档找到了相关配置的步骤到这里一切看起来都还很简单，我只需要在 toolbarConfig.excludeKeys 中添加我要删除的菜单的 key 值就行，好，那接下来我需要取获取“代码块”的 key 值文档上说获取 key 值用 toolbar.getConfig().toolbarKeys，具体怎么用？

2024-09-23 17:01:55 579

原创解决VSCode中Eslint插件无法自动折行的问题

Ctrl+s保存不能自动折行具体表现是短时间内出现两次格式化，第一次格式化会将长代码自动拆行成短代码，但第二次格式化又将短代码变回了长代码（按Ctrl+z可以看到第一次格式化的代码，也就是折行的代码）。而且只有出现长代码的时候会出现这样的情况，其他规范问题——比如加了分号，没有用单引号，都能正常格式化出现上述情况的原因是其他格式化插件和ESLint的格式化插件起冲突，就比如我的是因为插件Vue - Official冲突

2024-09-20 14:36:25 420

原创 husky 工具配置代码检查工作流：提交代码至仓库前做代码检查

提示：这篇博客以我前两篇博客作为先修知识，请大家先去看看我前两篇博客。

2024-09-08 09:53:25 452

原创前端 Vue3 项目开发—— ESLint & prettier 配置代码风格

如果你用的是 pnpm create vue 来创建项目，那么创建项目时就会让你选择是否添加 ESLint 和 prettier如果说 ESLint 是为了使代码更加规范，那 prettier 的引入则是为了使代码更加美观。

2024-09-07 09:43:52 695

原创 JavaScript前端面试题——JS 中 Map 和 WeakMap 有什么区别 ?

为了避免有小伙伴和我一样连 map 和 weakmap 是什么都不知道，我在这里详细介绍一下。Map和WeakMap是 ECMAScript 2015（ES6）引入的两种数据结构，用于改进键值对的管理方式。Map：适用于需要保持键值对插入顺序、允许多种数据类型作为键、需要遍历和获取大小的场景。WeakMap：适用于需要将对象作为键并确保这些键不会阻止对象被垃圾回收的场景，通常用于存储对象的元数据。

2024-09-06 22:36:14 912

原创前端 ESlint 代码规范及修复代码规范错误

代码规范：一套写代码的约定规则。例如：赋值符号的左右是否需要空格？一句结束是否是要加分号？虽然不遵守这些代码规范并不会造成语法错误，但是一个团队中，我们通常希望各个团队成员的代码风格是统一的没有规矩不成方圆ESLint：是一个代码检查工具，用来检查你的代码是否符合指定的规则（你和你的团队可以自行约定一套规则）。在创建项目时，我们使用的是代码风格的规则。创建vue项目时可以添加ESLint代码检查工具。

2024-09-06 10:23:30 909

原创 JavaScript前端面试题——深拷贝及浅拷贝

深拷贝和浅拷贝是复制数据结构的两种不同方式。浅拷贝是指创建一个新对象，但仅复制原对象的属性引用，而不是其属性值。即，如果原对象的属性值是对象或数组，浅拷贝后的新对象会引用相同的内存地址，因此修改内层对象会影响到原对象。（简单数据类型拷贝值，引用数据类型拷贝地址）深拷贝是创建一个新的对象，并复制原始对象的所有属性，包括嵌套的对象和数组。这意味着在原始对象或新对象上的更改不会相互影响。

2024-09-05 16:41:42 915

原创 github / gitee 多人协作开发——克隆项目、运行代码、关联远程仓库

在多人协同开发的github项目中，如果是你的队友创建的项目，那么你首先要将项目克隆到本地，这样你才能提交或拉取远程仓库中的代码。

2024-09-04 12:53:56 502

原创 JavaScript前端面试题——JavaScript中如何终止网络请求？

在 JavaScript 中，我们可以通过 AbortController 和 AbortSignal 来中止网络请求。使用 AbortControler 创建一个新的 Abortcontroler对象,然后使用它的 aport0方法来中止请求。在创建请求时,将 AbortControlersignal分配给请求的 siqnal 属性，以便在调用 abort() 方法时取消请求。

2024-08-03 09:20:37 514

原创 JavaScript前端面试题——fetch

什么是fetch？AJAX/axios/fetch的区别fetch核心语法我们为什么要学fetch？提交formdata提交JSON

2024-08-02 11:18:39 1126

原创 CSS前端面试题——CSS 中，有哪些方式可以隐藏页面元素？有什么区别?

这些方式的区别在于是否占据空间和是否可见，开发者可以根据实际情况选择不同的方式来隐藏页面元素。

2024-07-25 10:18:55 511

原创 CSS前端面试题——怎么用CSS实现一个宽高自适应的正方形？

这种方法通过设置元素的padding属性来实现宽高比例相等的正方形。假设我们希望正方形的边长为相对于父容器的百分比值，比如50%使用而不是直接使用是因为这种技术可以确保元素是一个正方形，而不会因为内容的变化或者浏览器的调整而失真。

2024-07-25 09:45:35 726

原创 CSS前端面试题之哪些CSS属性可以继承？

在 CSS 中，并不是所有的属性都可以继承。下面是一些常见的可继承属性font-sizefont-stylecolortext-alignvisibility这些属件在父元素中设置后，子元素可以继承相同的属性值。但需要注意的是，这些属性只能继承，而不能被子元素覆盖。此外，并不是所有的 HTML 元素都可以继承这些属性，具体需要查看相关属性的文档。相信有小伙伴已经发现了，所有和字体有关的属性都可以继承。

2024-07-24 16:11:37 662

原创 HTML前端面试题之＜iframe＞标签

面试题：iframe 标签的作用是什么?有哪些优缺点 ?标签是 HTML中的一个元素,用于在当前 HTML文档中嵌入另一个 HTML文档。它可以在一个 HTML页面中嵌入另一个 HIML页面或其他类型的文档,比如 PDF 文件或视频文件。标签的主要作用是将一个页面嵌入到另一个页面中。例如，在一个页面中嵌入一个地图或一个视频,或者在一个页面中嵌入一个在线表单。都可以使用标签。

2024-07-23 18:05:56 711

原创前端框架前置知识之Node.js：模块化、导入导出语法、包的概念、npm介绍

什么是模块化？在Node.js中，每一个文件都被视为一个单独的模块概念：项目是由很多个模块文件组成的好处：提高代码复用性，按需加载，独立作用域使用：需要标准语法导出和导入进行使用

2024-07-14 10:12:30 1263

原创 element-ui将组件默认语言改为中文

在main.js中加入以下代码即可。现在组件已经变成中文的啦。

2024-06-12 14:41:38 713

原创对象和引用类型的赋值都是通过引用传递的方式进行的，这意味着变量实际上存储的是对象的引用，而不是对象本身的副本

这篇博客我主要想解释一下这句话：对象和引用类型的赋值都是通过引用传递的方式进行的，这意味着变量实际上存储的是对象的引用，而不是对象本身的副本。其实这段话早在学习JS的时候就接触过，只是被我丢进了“记忆垃圾桶”，但是昨天遇到的一个bug，让死去的回忆突然攻击我。

2024-06-12 11:02:41 664 1

原创 Vue3项目准备：utils工具插件文件夹中封装request.js配置axios请求基地址及超时时间、请求拦截器、响应拦截器

概念：访问权限的令牌，本质上是一串字符串创建：正确登录后，由后端签发并返回作用：判断是否有登录状态等，控制访问权限注意：前端只能判断token有无，而后端才能判断token的有效性通俗地讲，每个已经登录的用户都会有一个独一无二的token，这个token是用户访问除登录页之外的其他网页、向服务器发请求的一把“钥匙”，如果token为空（没有钥匙）或用户伪造了token（钥匙是假的）或者token已过期，那么就需要将用户“踢”回登录页，让用户登录之后再访问网页。

2024-06-06 21:38:00 855

原创什么？！这年代还有人用父子组件通信？

因为本前端菜鸟写代码从没考虑过代码是否易于维护，所以一旦涉及组件通信，一律使用Pinia状态管理，至于父子组件通信啥的，学完Pinia之后就被我狠狠抛弃了，当时就在想：为什么不直接教Pinia，这玩意儿不是远比父子组件通信好用吗？但是这几天研读黑马程序员大事件的代码居然发现了父子组件通信，为了完全读懂代码，打算前来复习，重拾被我扔掉的知识。

2024-06-05 13:51:42 240

原创 Vue插槽的介绍及使用：默认插槽 / 后备内容 / 具名插槽 / 作用域插槽

在认识插槽前，我们先了解一下什么时候可以用插槽。

2024-06-05 11:46:30 337

原创前端企业级代码到底是什么样的？

这篇博客就是想聊聊天，讲讲最近前端学习上发生的一些趣事，以及我的一些经验和感触

2024-06-04 15:48:54 327

原创 Pinia的介绍、使用、持久化、统一管理

Pinia 是 Vue 的最新状态管理工具，状态就是数据。通俗地讲：Pinia 是一个插件，可以帮我们管理 vue 通用的数据 (多组件共享的数据)。比如一份数据有多个组件需要使用，在学Pinia之前我们需要用父子组件通信这样麻烦的方法，但是学习了Pinia之后，我们只需要把这些需要共享的数据扔进一个数据仓库，在需要使用这些共享数据的组件中导入这个数据仓库就可以了。

2024-06-03 21:00:50 542

原创前端框架前置知识之Node.js：fs模块、path模块、http模块、端口号介绍

类似插件，封装了方法 / 属性。

2024-06-03 15:58:16 489

原创前端框架前置知识之Node.js：Node.js入门

前端程序员有必要学 Node.js 吗？要学到什么程度？其实 node.js 并不属于前端，它是后端，只不过他是用 js 语法写的。如果你想前端转后端，那node.js是一个很好的跳板那为什么黑马程序员的前端学习路线图上，node.js 却是Vue 框架的前置知识呢？其实主要是想让大家了解一下前端工程化的知识，因为node.js 是前端工程化的基础。这有利于后续 Vue 框架的学习，而且可以让大家更深入地了解一些原理层面的知识，应该也会有利于后续的面试

2024-06-03 15:39:55 511

原创 CSS学习笔记：bootstrap的介绍、下载、使用及响应式布局的实现

Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的CSS 样式bootstrap过时了吗？其实在学bootstrap这一部分的网课时，在弹幕上看到一些同学说bootstrap已经过时了，这里谈谈我的看法

2024-05-30 15:01:09 1418 2

原创 CSS学习笔记：响应式布局的原理——媒体查询

在实际书写代码时，我们不会自己去手写媒体查询来实现响应式布局，我们一般会调用现成的代码库或使用现成的框架（但这些代码库或框架的底层原理是媒体查询，所以了解媒体查询也是很有必要的）当视口大小变化时，网页布局也随之变化以腾讯前端官网为例，当视口宽度逐渐缩小时，一行排列的盒子数量从4个减少到2个再减少到1个。

2024-05-29 15:10:41 561