20240407 前端开发日报

一组解决常见设计问题的 CSS 片段和技巧；我的Next.js之旅：第四天 – API路由与服务器端功能的秘境；JSSDK开发思路，基于RollupJS记录；从0到1搭建基于@tarojs/components组件库；《深入理解react》之render流程；周末卷一卷，一个音乐生成AI网站写好了，开源啦；掌握JavaScript：多种方法生成二维数组；后端前行Vue之路(三)：计算属性和监视属性

1. 一组解决常见设计问题的 CSS 片段和技巧

   一组解决常见设计问题的 CSS 片段和技巧 例如： 此 CSS 代码段以具有该类的元素为目标.button，并将背景颜色设置为#f1f1f1。 代码片段可以是简单的一行，也可以是选择器、属性和值的更复

2. 我的Next.js之旅：第四天 – API路由与服务器端功能的秘境

   嘿，朋友们！昨天我们一起寻找了Next.js城市的宝藏——数据获取与状态管理。今天，我将带你们进入这座城市的秘境——API路由与服务器端功能。准备好了吗？让我们开始吧！

3. JSSDK开发思路，基于RollupJS记录

   背景 项目需要开发一个发版通知插件，同时公司项目属于乾坤架构的微前端应用，涉及多个子应用，如果每个项目都写一遍逻辑，在修改时可能会重复修改多个项目，于是想着能不能通过开发一个插件，对项目侵入最少方式，

4. 从0到1搭建基于@tarojs/components组件库

   在使用组件时，因为都是大家随手封装的，没有文档也没有注释，很是难受。并不知道有什么具体功能也不知道长什么样子。决定从0到1来封装一个组件库

5. 《深入理解react》之render流程

6. 周末卷一卷，一个音乐生成AI网站写好了，开源啦

7. 掌握JavaScript：多种方法生成二维数组

8. 后端前行Vue之路(三)：计算属性和监视属性

9. vue封装自定义指令，实现表格滚动到底部加载下一页

10. React 生命周期详解与示例

    文章浏览阅读706次，点赞14次，收藏8次。了解并正确使用React的生命周期，对于构建稳定、可维护的React应用具有重要意义。在实际开发中，我们需要根据需求合理选择生命周期方法，并在合适的时机执行相应的操作。同时，我们还需要注意React版本的变化，因为不同版本的React可能会对生命周期方法进行一些调整。

11. electron-react-boilerplate 打包逻辑浅析 | 如何向公共路径添加脚本并在 html 中添加全局脚本

    文章浏览阅读496次，点赞6次，收藏6次。随着前端技术的迅速发展，我们见证了从最初的 HTML + JS + CSS 到如今的各种前端框架的崛起。在这篇文章中，我们将探讨如何在 HTML 中添加全局脚本，特别是在 Electron 应用程序中的需求。由于很多网站使用 CDN 脚本，但在 Electron 的本地化和安全需求下，将 CDN 脚本下载到本地并在 HTML 中引用成了一个挑战。许多初学者可能不清楚如何配置它，我们将以 Electron-React-Boilerplate 为例，简要介绍打包逻辑以及如何向公共路径添加脚本。

12. electron-react-boilerplate 模版项目介绍 | 快速构建跨平台Todo待办事项桌面应用

    文章浏览阅读583次，点赞6次，收藏8次。在本教程中，我们将使用 Electron React Boilerplate（ERB）和 Ant Design 来构建一个简单的 Todo 待办事项软件。Electron 是一个允许你使用 HTML、CSS 和 JavaScript 构建跨平台桌面应用的框架。而 React 是一个用于构建用户界面的 JavaScript 库，它能够让你创建可复用的组件。通过使用 Electron React Boilerplate 和 Ant Design，我们创建了一个简单的 Todo 应用程序。

13. 【Vue CLI ref props mixin plugin scoped】

    文章浏览阅读183次。通过v- bind绑定使得里面的18是数字。注意：age前面加了。

14. 【关于Vue CLI ref props mixin plugin scoped】

    文章浏览阅读153次。备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中，然后去修改data中的数据。Vue中的webpack并没有安装最新版，导致有些插件也不能默认安装最新版，如 npm i less-loader@7，而不是最新版。：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。第一种方式（只接收）props:[‘name’, ‘age’]

15. react api:forwardRef

    文章浏览阅读424次，点赞14次，收藏5次。*// …});使用 forwardRef() 让组件接收 ref 并将其传递给子组件：forwardRef 返回一个可以在 JSX 中渲染的 React 组件。与作为纯函数定义的 React 组件不同，forwardRef 返回的组件还能够接收 ref 属性。return (});props：父组件传递过来的 props。ref：父组件传递的 ref 属性。ref 可以是一个对象或函数。如果父组件没有传递一个 ref，那么它将会是 null。

16. vue中三种watcher

    文章浏览阅读565次，点赞16次，收藏11次。vue中三种watcher

17. vue 动态设置系统在浏览器中的标题title和图标favicon

    文章浏览阅读107次，点赞4次，收藏3次。vue动态修改系统title和favicon

18. audio示例-基于Vue的一个小项目（上传音乐链接

    文章浏览阅读332次，点赞7次，收藏2次。此处的ref属性，可以很方便的在vue组件中通过 this.$refs.audio获取该dom元素。/* 控制进度条 */

19. Vue使用高德地图（快速上手）

    文章浏览阅读584次，点赞7次，收藏8次。【代码】Vue使用高德地图（快速上手）

20. Vue3-3 尚硅谷天禹主讲

    文章浏览阅读162次。双向绑定，表单变，值也会改变 表单里面 v-model=“” 如果只是value=“”，只能取得设定好的数值。返回值：一个RefImpl的实例对象，简称ref对象或ref，ref对象的属性是响应式的。如果要修改ref里面的数据，必须加上value，先加上value才能动里面数据。若需要使用一个响应式对象，层次不深，ref、reative都可以。reative重新分配一个新对象，会失去响应式。若需要一个基本类型的响应式数据，必须使用ref。ref定义：基本类型数据、对象类型数据。若需要使用一个响应式对象，

21. 全栈的自我修养 ———— react router6默认二级路由配置？嵌套时候如何实现默认导航

    文章浏览阅读113次。即把element: (},换成path: ”,element: (},即可实现访问/public直接去我的path为空的地址！！