码海扬帆：前端探索之旅-优快云博客

原创 React创建项目实用教程

报错@testing-library/dom要求react v18.0.0但我的为react v19.0.0版本。npx 是 npm 5.2.0 及以上版本自带的一个工具，用于临时安装并运行 npm 包。不需要全局安装包（如 create-react-app），直接运行最新版本的包。提示找不到not found web-vitals报错。不知道为什么react项目第一次运行起来很慢。刚好放假了，过了几天，星期一再创建，使用。避免全局安装包的版本冲突问题。窗口不关闭的情况下，使用。，两次结束本次运行，再次。

2025-02-17 12:56:24 500

原创使用HX搭建UNI-APP云开发项目（适合新手小白与想学云开发的宝子）

uni-app云开发是uni-app提供的一套后端服务，它可以帮助开发者快速搭建起一个完整的后端服务，包括数据库、云函数、存储等。开发者只需要关注前端页面的开发，后端服务由uni-app云开发提供。uni-app云开发的优势：快速搭建后端服务：uni-app云开发提供了一整套的后端服务，包括数据库、云函数、存储等，开发者只需要关注前端页面的开发，无需自己搭建后端服务。灵活扩展：uni-app云开发支持自定义云函数，开发者可以根据自己的需求编写自定义的云函数，实现更复杂的功能。

2025-02-13 14:50:05 653

原创 06_掌握Python列表、元组、字典、集合

在本篇中，我们学习了 Python 中列表、元组、字典、集合的创建与删除，访问及遍历，操作方法及生成式。希望你能熟练掌握并应用到实际编程中。到了本篇结尾，希望你能熟练掌握并应用到实际编程中。元组的操作方法及元组的遍历。集合的操作方法及集合的遍历。集合的操作方法及集合的遍历。列表生成式及二维列表。字典元素的访问及遍历。字典元素的访问及遍历。

2024-12-09 22:07:06 108

原创 05_掌握Python3.11新特性-模式匹配

在 Python 3.11 中，引入了模式匹配（pattern matching）的新特性。模式匹配是一种强大的工具，可以用来简化代码和提高代码的可读性。通过本篇教程，我们学习了 Python 3.11 中的模式匹配新特性，并了解了如何使用它来简化代码和提高代码的可读性。希望你能熟练掌握并应用到实际编程中。到了本篇结尾，希望你能熟练掌握并应用到实际编程中。

2024-12-09 22:03:58 106

原创 04_掌握Python基础语句

在本篇中，我们学习了 Python 中基础类型和语句的使用。这些方法可以方便地对字符串进行各种操作，例如大小写转换、去除空格、分割和连接字符串、检查字符串的起始和结束等。在 Python 中，可以使用 break 和 continue 来控制嵌套循环的执行。在 Python 中，可以使用 break 和 continue 来控制循环的执行。在 Python 中，字符串可以通过索引来访问其中的字符，索引从 0 开始。在 Python 中，可以使用嵌套的 if 语句来实现复杂的条件判断。

2024-12-09 21:58:28 87

原创 03_掌握Python基础用法

Python 中使用缩进来表示代码块，缩进通常使用四个空格，但也可以使用制表符（Tab）。chr()的使用, 将一个 Unicode 码转换为对应的字符。ord()的使用, 将一个字符转换为它的 Unicode 码。str()的使用, 将其他类型的数据转换为字符串类型。input()的使用, 从控制台获取用户输入的数据。到了本篇结尾，希望你能熟练掌握并应用到实际编程中。输出语句 print(), 输出内容到控制台。使用 print()将内容输出到文件中。len()的使用, 获取字符串的长度。

2024-12-09 21:50:34 89

原创 02_理解 Python 中的关键字、命名、常量和变量、数据类型

复数是包含实部和虚部的数字，例如 1+2j、-3.5+4j、0j 等。变量可以存储任何类型的数据，例如整数、浮点数、字符串、列表、字典等。在 Python 中，常量是指那些在程序执行过程中其值不会改变的变量。在本篇中，我们学习了 Python 中的关键字、标识符命名规则、常量和变量，以及 id() 函数的作用。Python 中的关键字是 Python 语言中保留的标识符，用于特定的语法结构。在 Python 中，每个对象都有一个唯一的标识符，可以使用 id() 函数来获取对象的标识符。

2024-12-09 21:43:46 98

原创 01_掌握Python和Pycharm解释器的安装与使用

立即安装，勾选添加环境变量，默认是 C 盘；卸载：搜索控制面板，程序和功能，搜索框搜索 python，python3.11.4（64-bit）、pythonlauncher，右键卸载；自定义安装，勾选添加环境变量，自定义安装路径，如：D:\Program Files\Python\Python39；

2024-12-09 00:11:51 59

原创 UNI-APP 富文本编辑器，可以对图片、文字格式进行编辑和混排。

✍找了几篇文章对比了一下，大体都差不多各有各的说辞和见解,但是没有提供@/style/editor-icon.css文件，找起来虽然说不算太麻烦，但是不够直接，又要花费时间去弄，虽然用的不是很多但是，我还是决定自己写一篇，本篇富文本编辑器样式还需自己按照需求调整，组件需自己自行封装引用，都挺简单的就不说了。富文本组件内部引入了一些基本的样式使得内容可以正确的展示@/style/editor-icon.css。上传图片的代码区域，单独来说不然看不明白，记得上传的url一定要写，就是你们公司的上传接口。

2024-09-12 08:41:55 1797

原创 IT前端好用的工具集

自动编写代码助手通义灵码配合vscode使用,减少编写工作量。国内人工智能kimi.moonshot工具。将iconfont转成css显示。JSON在线格式化工具。

2024-09-10 13:12:16 410

原创 DevEco Studio中文汉化配置

点击file=>选择Settings(设置)在输入框输入chinese点击回车。点击启用=>再点击OK重启即可。

2024-09-10 12:54:14 3990 3

原创 UNI-APP 溢出隐藏显示省略号

✍经常在项目里面使用到，又没有记住懒得找了，故此写一篇记录一下!在 SCSS与LESS中，定义一个混合器（mixin）使用。CSS单行显示省略号。CSS多行显示省略号。

2024-09-06 08:59:01 1041

原创 UNI-APP评论他人消息怎么换行展示

UNI-APP评论他人消息怎么换行展示?

2024-08-12 21:33:47 230 1

原创使用vite创建一个v3应用

它是 Vue 官方的项目脚手架工具。已安装 18.3 或更高版本的。// yarn 安装。

2024-05-20 09:47:04 428

原创 Vue 双向数据绑定的原理(MVVM)

因为将一个普通的js对象传入new vue的实例作为data选项 ,vue将遍历对象所有的属性 , 并且使用Object.defineProperty 把这些属性全部转化为getter与setter ,然后它们就成为了响应式的数据。使用 Object.defineProperty 方法为 model 的每个属性定义自定义的 getter 和 setter。这是要定义或修改的属性的名称。这是你要在其上定义或修改属性的目标对象。函数，从而更新视图中的显示内容。函数，更新显示区域中的内容。

2024-05-20 00:13:24 1197

原创 Vue solt插槽(v2v3)实战详解

在实际开发中，两种写法可以根据个人习惯和代码风格选择使用。通常情况下，如果只有一个作用域插槽并且不需要指定特定的插槽名称，可以使用。实际上，这两种写法在功能上是等价的，它们都可以用于定义作用域插槽并传递数据到子组件。是用于在父组件中传递内容到子组件的一种机制。它允许你在父组件中定义一些内容，并在子组件中使用。如果需要指定具名插槽的名称，可以使用。标签来插入这些内容，从而实现父子组件之间的内容传递和复用。使用插槽接收父组件传递的内容。是用于具名插槽的分配语法。，成为了更加简洁的写法。

2024-05-17 10:41:05 459

原创 Vue filter实战详解

是一种用于在模板中对数据进行格式化的功能。它可以用来对数据进行处理、过滤或格式化，然后在模板中直接使用。是一种全局的 Vue 实例方法，可以在任何组件的模板中使用。可以在模板中使用多个过滤器，它们会按顺序执行。在 Vue 实例创建之前，可以通过。符号将过滤器名称添加到表达式中。在模板中使用过滤器时，通过。在 Vue.js 中，

2024-05-17 09:47:33 355

原创 vue watch使用详解

immediate监听。在Vue实例创建时，处理函数会立即执行一次，不必等到。当你需要深度监听对象或数组内部值的变化时，可以使用。是一个用来监听数据变化并执行相应操作(1. immediate立即执行监听。2. deep（深度监听）data里面的数据变化)设置为一个初始值，并使用。的值发生变化才开始执行(值默认时就会执行一次。

2024-05-16 18:00:30 1323

原创 Vue.component v2v3注册(局部与全局)组件使用详解

这种方法的好处是，你可以在任何其他组件中直接使用它，无需在每个文件中导入。在实际应用中，通常推荐使用局部注册来管理组件的可复用性和可维护性，因为它避免了全局污染，而全局注册则适用于项目范围内广泛使用的组件。全局注册是在Vue实例（根组件）创建之前注册的组件，一旦注册，这个组件在所有的子组件中都可以使用。这种方法的好处是，你可以在插件中注册多个组件。注意：在Vue 3.x中，全局组件的注册方式有所不同。在Vue中，可以通过两种方式注册组件：局部注册和全局注册。选项注册的组件，仅在当前父组件及其子组件中可用。

2024-05-15 19:07:30 1140

原创 Vue.directive注册(全局与局部)自定义指令使用详解与实战

Object.keys(directives).forEach((key) => { Vue.directive(key, directives[key]) })：在 install 方法中，使用 Object.keys(directives) 获取 directives 对象的所有键名（即 draggable 和 longpress），然后通过 forEach 循环遍历这些键名。布局自定义指令：注册了布局自定义指令后，可以在 Vue 模板中使用该指令。Vue自定义指令有全局注册和局部注册两种方式。

2024-05-15 19:00:49 3962

原创 vue props接收组件数据(类型配置)

"props"接收的常见传参类型有以下几种：String：字符串类型。required：是否必传, true必传，false 非必传。Function：函数类型。,Boolean：布尔类型。Function：函数类型。Boolean：布尔类型。default：默认值。String：字符串类型。Number：数字类型。Object：对象类型。type：传参的类型。Number：数字类型。Object：对象类型。Array：数组类型。Array：数组类型。

2024-05-15 10:31:24 997

原创 Vue中的全局事件总线：EventBus与$bus的比较详解与实战应用

定义了 $bus 属性的 get 方法，当我们在组件中使用 this.$bus 访问时，实际上是在获取 EventBus 这个 Vue 实例。这个实例将作为我们的事件总线，用于在 Vue 组件之间进行事件通信。因此，虽然这两种方式都可以实现全局事件总线的功能，但在使用上有一些细微的差别。// 发送名为 'custom-event' 的事件，可以携带额外的数据。// 创建一个全局的事件总线并挂载到 Vue 原型上。// 监听名为 'custom-event' 的事件。// 监听名为'sendMsg'的事件。

2024-05-14 23:53:41 893

原创 Unexpected token, expected “from“ (2:18)

没仔细的时候我以为是label-loader的依赖问题，又研究的小半天，没有效果。最后竟然发现是引入字段写错了的问题，是在对自己有点无语了。所以说写代码，一定要认真看仔细。在代码中，import语句中的关键字"form"应该是"from"。这是一个常见的拼写错误，但是它会导致JavaScript解析器无法正确解析你的代码，从而导致语法错误。

2024-05-14 17:38:58 692

原创 error Component name “Child4“ should always be multi-word

这是因为单单一个单词可能与HTML的内建标签或者其他组件的名称产生冲突，从而导致意外的行为。不过这不是推荐的做法，因为它可能会导致项目中出现更多的命名冲突。如果你不想改变组件的名称，可以在ESLint的配置文件（例如。这个错误是来自于ESLint的规则，它强制要求组件的名称。将组件的名称改为多单词组合，例如，将。或其他任何不会与现有单词冲突的组合。

2024-05-14 13:16:10 587

原创一个能显示 boss 直聘职位时间的插件

将下载的插件解压boss-show-time-gh-pages，然后打开扩展程序。选中解压的文件boss-show-time-gh-pages，打开控制台，发现boss直聘已经将相应的时间字段没有返回。虽然说不能使用了 , 总的来说感兴趣的小伙伴可以尝试一下。选择gh-pages，点击code下载.zip压缩包。然后看到了显示的时间内容如下，如下图, 即可使用打开。

2024-05-13 16:08:42 2741 2

原创 document.body.contentEditable让开发者在网页中轻松实现可编辑

document.body.contentEditable是一个属性，用于控制网页中元素的可编辑性。当你将这个属性设置为"true"时，你就可以在网页上编辑文本内容，包括输入、删除、拖拽等操作，就像在一个富文本编辑器中一样。这个属性常常被用来创建可编辑的网页内容，比如在线文档编辑器、博客编辑界面等。

2024-05-13 15:16:14 1120

原创 Vue 项目中使用防抖与节流

在上述代码中，handleSearch函数使用了防抖函数debounce，在输入框的@input事件中触发搜索操作。handleScroll函数使用了节流函数throttle，在滚动事件中触发滚动处理逻辑。在某个事件触发后，间隔一段时间执行函数，如果在这段时间内再次触发该事件，则忽略该事件。常见的应用场景是滚动事件，当用户滚动页面时，只在一定时间间隔内执行滚动处理函数。在某个事件触发后，延迟一段时间执行函数，如果在这段时间内再次触发该事件，则重新计时。），然后在需要使用的组件中引入并使用它们。

2024-05-13 13:41:27 452

原创 Node npm yarn全局安装与国内镜像切换

注：这将清除npm缓存目录中的所有文件。需要注意的是，这可能会导致重新下载项目的依赖，因此在执行此命令之前，请确保重要的依赖您已备份了。因为电脑是window10的,所以我选择的是(window安装包).msi的64位,直接点击下载,如果是其他系统找对应的下载安装就行了。注：这将清除yarn缓存目录中的所有文件。和清除npm缓存一样，在执行此命令之前，请确保重要的依赖您已备份了。清除缓存：npm cache clean --force。查看缓存路径：yarn cache dir。2.设置成淘宝镜像 (旧)

2024-05-13 13:37:15 1142 1

原创 UNI-APP生成小程序太阳码

和获取小程序码的逻辑封装成两个独立的函数，提高了代码的可读性和可维护性。在需要获取小程序码的地方直接调用。这样可以提高代码的可维护性和可读性。）的逻辑进行整合和优化，确保在。的有效性自动刷新或直接使用旧的。过期时能够自动刷新并获取新的。和获取不限制的小程序码（

2024-05-13 13:03:50 611 1

原创 UNI-APP根据用户设备的操作系统来实现文件预览功能01

这样写优点：可以提高代码的可读性、可维护性，并且增加了错误处理机制，确保程序在异常情况下也能正确处理。

2024-04-28 10:07:46 283 3

原创 UNI-APP使用了防抖函数debounce来处理收藏按钮的点击事件

这段代码使用了防抖函数debounce来处理收藏按钮的点击事件，在点击收藏按钮时会发送一个POST请求到指定的接口地址，并根据返回的结果做相应的处理，最后通过setTimeout重新渲染数据。这段代码在Uni-App中的确可以发挥作用，但有一些地方可以进行优化和改进。首先，确保在Vue或Uni-App的组件中正确引入和使用防抖函数。你可以在export default之前定义debounce函数，这样它就可以在整个组件中被使用。其次，建议对debounce函数进行一些改进，比如增加一个立即执行的选项

2024-04-26 15:02:41 400

原创 UNI-APP块级元素行级展示

UNI-APP块级元素行级展示

2024-04-10 21:15:25 315

原创 js 去除图片之间的间距

当鼠标悬停在图片上时，边框变为黑色，但这仅是为了演示，你可以根据需要调整边框样式或去除悬停效果。使用了 Grid 布局来自动填充列，每列的最小宽度是 300px，并且使用了。使用Flexbox 和 Grid 布局，同时去除图片之间的间距。在现有的 Flexbox 布局上稍作调整，通过将。通过给图片添加了一个透明的边框来占位，同时利用了。设置了宽度为 100% 以充满其容器，并使用。来实现多张图片一行排列并去除图片之间的间距。函数计算了每个图片的宽度，并且通过。来确保图片之间没有额外的空白间隔。

2024-04-10 21:00:42 262 1

原创 UNI-APP 获取video视频实际宽高

- 在模板中使用 video 标签，并绑定 loadedmetadata 事件到 onVideoLoaded 方法 -->

2024-03-02 15:09:17 1700

原创 object-fit属性(可以用于img和video元素)，以控制它们的内容如何适应其容器

object-fit 是一个CSS属性，用于指定替换元素（如img或video）的内容如何填充其容器。object-fit: cover是该属性的一个值，它保证内容的宽高比保持不变，同时尽可能大地填充其容器，可能会裁剪掉一些内容以适应。

2024-03-02 14:58:16 1259

原创 UNI-APP 分包使用(详解与实战)

4、在pages.json中创建"subPackages"数组，数组中包含两个参数：1.root：为子包的根目录，2.pages：子包由哪些页面组成（参数同pages）；js文件：当某个 js 仅被一个分包引用时，该 js 会被打包到该分包内，否则仍打到主包（即被主包引用，或被超过 1 个分包引用）静态文件：分包下支持 static 等静态资源拷贝，即分包目录内放置的静态资源不会被打包到主包中，也不可在主包中使用。自定义组件：若某个自定义组件仅被一个分包引用时，且未放入到分包内，编译时会输出提示信息。

2024-03-02 14:31:17 2819 2

空空如也

空空如也