程序员白彬-CSDN博客

原创 Vue3+TS+Node打造个人博客（总览篇）

从 Vue3 正式发布到现在，也快过去一年了（写这行文字的时候是2021年09月08日，拖延症…）。但是就我最近招聘面试的一些经历来看，很多 Vue 技术栈的候选人依然还没有使用过 Vue3。关于他们没有选择使用 Vue3 这个事情，我觉得也是可以理解的。一方面，Vue3 直接放弃了 IE11。虽然 IE 的用户数量在持续下降，但是想让老板们直接放弃 IE11 还是有一些困难。另外就是，做项目这种事情，有时候人们的选择就是能用就行，升级 Vue3 可能并不能给项目带来太多效益。对于一些历史悠久的项

2022-02-24 09:18:43 2215

原创 url 和 uri 就差一个字，到底有什么区别

URI 是一个更广泛的概念，用于唯一标识资源，而 URL 是 URI 的一个子集，除了标识资源外，还提供了如何访问该资源的信息。URL 必须是绝对的，而 URI 可以是相对的[1][2][3][4][5]。

2024-07-26 09:33:41 226

原创我想给 git 分支换一个名字，应该怎么做？

通过以上步骤,你可以成功重命名Git分支,并保持本地和远程仓库的同步。通知团队成员分支名称已更改,让他们更新本地仓库[2][5].参数是"move"的缩写[1][4].确保你在要重命名的分支上。命令查看当前所在分支[1][2].

2024-07-26 09:28:44 180

原创 unplugin-vue-components 的作用是什么

总的来说,unplugin-vue-components 通过自动化组件的导入过程,大大简化了 Vue 项目的开发流程,提高了开发效率和代码质量。自动导入组件:无需手动 import 和注册组件,插件会自动识别并按需导入使用到的组件。支持第三方UI库:内置了多个流行UI库的解析器,可以自动导入第三方组件库的组件。灵活的配置:可以通过配置文件自定义导入行为,如排除某些组件或添加自定义解析器。支持全局组件:可以设置某些组件为全局组件,在所有地方都可以直接使用。支持自定义组件目录:可以配置多个自定义的组件目录。

2024-07-25 11:05:20 154

原创 css in js 相比较 css modules 有什么好处？

CSS-in-JS 和 CSS Modules 都是用于管理 React 组件样式的流行方案，它们各有优势。动态样式：CSS-in-JS 可以轻松创建基于 props 或状态的动态样式，更灵活地处理复杂的样式逻辑。无需额外的构建配置：大多数 CSS-in-JS 解决方案可以直接使用，不需要额外的 webpack 配置。无需命名约定：CSS-in-JS 自动生成唯一的类名，避免了命名冲突，不需要遵循特定的命名规范。运行时优化：一些 CSS-in-JS 库支持运行时的样式优化，只加载当前渲染所需的样式。

2024-07-25 10:59:09 280

原创 2024年，最推荐哪个 react 样式方案

生态系统：Tailwind CSS拥有庞大的社区支持和丰富的插件生态，如Headless UI和DaisyUI等[3].性能优化：Tailwind CSS通过PurgeCSS等工具可以有效减小生产环境的CSS文件大小，提高加载性能[1].流行度：Tailwind CSS在2023年获得了广泛的关注，预计在2024年将继续保持强劲势头[1][3].高效开发：Tailwind CSS提供了大量预定义的工具类，可以快速构建UI，无需编写自定义CSS[2].

2024-07-24 09:43:30 198

原创 react 样式管理方案除了 styled-components，还有什么推荐的

例如，如果你喜欢 CSS-in-JS 的方式但想尝试 styled-components 的替代品，Emotion 可能是个不错的选择。CSS-in-JS 库：如 Radium，允许你在 React 组件中直接使用内联样式，并提供了一些额外的功能[4].PostCSS：一个用 JavaScript 插件转换 CSS 的工具，支持变量、混合、未来 CSS 语法等[4].Tailwind CSS：一个实用优先的 CSS 框架，通过预定义的工具类快速构建自定义设计[2].

2024-07-24 08:10:22 280

原创 react 为什么还分了 react 和 react-dom 两个包

React 将核心库拆分为 react 和 react-dom 两个包主要有以下几个原因:关注点分离。react 包包含了组件、状态管理、生命周期等核心功能,而 react-dom 专注于将 React 组件渲染到浏览器 DOM[1][2].支持多平台。将核心逻辑与平台特定代码分离,使 React 可以支持 Web、移动端等多个平台。react 包可以在 Web 和移动端通用,而 react-dom 只用于 Web 应用[2][4].优化包大小。对于不需要 DOM 操作的场景(如服务器端渲

2024-07-23 09:43:17 278

原创 react-scripts 这个包的作用是什么

通过 react-scripts start 命令，它会启动一个基于 webpack-dev-server 的开发服务器，支持热模块替换等功能[1][2].封装和简化项目配置。react-scripts 封装了 Webpack、Babel、ESLint 等工具的配置，使开发者无需手动配置这些复杂的构建工具[1][3].总的来说，react-scripts 大大简化了 React 项目的开发流程，让开发者可以专注于编写应用逻辑，而不必花费大量时间在环境配置上[1][3][5].提供开发和构建脚本。

2024-07-23 09:38:20 323

原创为什么 centos 下使用 tree 命令看不见 .env 文件

您可能没有安装 tree 命令。如果在 CentOS 中执行 tree 命令时提示 “command not found”，那么您需要先安装 tree 命令。默认情况下，tree 命令不显示隐藏文件。在 Linux 系统中，以点(.)开头的文件或目录被视为隐藏文件。.env 文件就属于这种隐藏文件。记住，在 Linux 系统中，文件权限也可能影响您是否能看到某些文件。这个命令会列出当前目录下的所有文件和子目录，包括隐藏文件，并以树状结构显示。这个命令会列出当前目录下所有以 .env 开头的文件。

2024-07-22 14:28:05 194

原创 JWT 没那么神秘，用它换掉 Session + Cookie 认证

本项目代码已开源，具体见。数据库初始化脚本：关注公众号，回复关键词“博客数据库脚本”，即可获取。

2024-07-22 09:04:10 2202

原创我的 VSCode 彻底崩溃了，重新安装无效，踩坑分享

换句话说，如果不删除这些，仅仅是卸载 VScode 程序，重新安装 VSCode 就会保持卸载前的状态。理性思考后，我想着既然系统功能都正常了，那多多少少还是 VSCode 自己的问题，会不会卸载过程中还留下了什么数据没删掉？而当我们遇到不可解决的 bug 时，此时的状态是一个糟糕的状态，也就没有保持的必要，如果不彻底清理 VSCode 用户数据，就无法正常使用。只要卸载程序后，将这两个文件夹顺手清空，就能恢复到一个干净的状态，重新运行 VSCode 安装程序就能正常使用了，也就不会遇到这个。

2024-07-21 19:29:26 348

原创使用 Docker 搭建 NodeJS 开发环境是一种什么体验？

最近和一些小伙伴在沟通这个博客全栈项目时，会发现其中一些朋友在安装依赖这个阶段就出现问题了，总是会问我“为什么依赖安装失败？”这个问题可能是前端或者 node 领域最常见的问题了，基本上每个人都遇到过，拉取一个项目后，依赖都装不成功，何谈继续使用呢？依赖安装阶段就失败，一部分原因来自于依赖版本锁的宽松性，很多时候我们不会锁死一个依赖的版本号，而是会采用这种范围限制，这就会导致在的时候，可能会尝试去安装一个更高版本的依赖，而这个更高版本的依赖可能会带来它的一些依赖项的兼容性问题，引起安装阶段报错。

2024-07-21 19:23:34 712

原创轻松学会生产环境 Docker 部署 Nodejs Express 项目

在前面的分享中，我们学会了使用 Docker 部署 Vue 前端项目，也学会了在 github actions 进行自动化部署。本文就来继续学习一下使用 Docker 部署 Express 项目，并最终将其移植到 github actions 中。

2024-07-21 19:19:50 802

原创在 CI/CD 中怎么使用 Docker 部署前端项目？

在上一篇文章《前端不懂 Docker？先用它换掉常规的 Vue 项目部署方式》中，我们学会了怎么使用 docker 制作镜像、推送镜像到 aliyun 私有镜像仓库，也学会了怎么在服务器上拉取最新的镜像进行容器部署。不过，这些都是过程式的命令，我们需要把这些过程提炼出来做成脚本，最终在 CI/CD 工具中直接使用，以实现全自动化的部署。具体怎么做呢？我们来看看！

2024-07-21 11:21:15 652

原创五分钟学会 Docker Registry 搭建私有镜像仓库

在上一篇文章《》中，我们学习了如何使用 aliyun 私有镜像仓库，也了解到可以使用 Docker Registry 搭建私有镜像仓库。这篇文章就分享下实操过程。是官方提供的 registry 镜像，可以用来搭建私有镜像 registry，有了它，我们就可以建立起私有的镜像仓库。

2024-07-21 11:11:48 983

原创前端不懂 Docker ？先用它换掉常规的 Vue 项目部署方式

本项目代码已开源，具体见：数据库初始化脚本：关注公众号，回复关键字“博客数据库脚本”，即可获取。

2024-07-20 12:07:57 1265

原创小程序博客搭建分享，纯微信小程序原生实现

我是在 2019 年启动这个全栈博客项目的，当时自己的前端技术其实也不怎么样，但是我脑子里就一个想法，必须掌握一点点全栈技术，了解整个系统全栈是怎么运行起来的。于是，我就决定自己动手做一个全栈的博客，当时也还从没在公司做过小程序项目，就想着也做个小程序版的博客练练手。我学习一个新东西不太喜欢一来就上框架，我会先开始学一点最原始的基础，有了基础后，再换框架做，这样效率高，同时遇到框架问题也不至于由于没有了解过底层基础而无从下手去解决。

2024-07-20 12:06:16 729

原创前端上手全栈自动化部署，让你看起来像个“高手”

作为前端开发，你或许开发过很多酷酷的界面效果，做过很多复杂的产品需求，但是可能对服务器生产部署还不是很清楚。没关系，本文会分享一个开源博客系统是如何将前后端自动化部署到生产环境的，如果你正好缺乏这项技能，相信本文一定会给你带来巨大的价值，系好安全带，准备发车吧！

2024-07-19 09:16:15 619

原创前端轻松拿捏！最简全栈登录认证和权限设计！

你或许作为前端的课代表，开发了很多高级的登录功能，比如扫码登录、手机号一键登录、第三方授权登录、生物认证登录等，对 OAuth、JWT、双 Token 等关键词也能脱口而出，但是你可能还从未以一个全栈的身份完整地开发过一个登录功能。没关系，本文的目的就是解决你的这份忧虑，从一个极简的全栈登录认证功能入手，打破这个枷锁！前几篇文章提到过，在博客系统中，我们需要后台管理功能去维护我们的文章、留言评论等内容。既然是这样，后台管理的安全问题也得考虑，登录和权限设计是非常有必要的。

2024-07-19 09:00:08 1048

原创别背八股文了，WebSocket 是什么，我劝你花几分钟让面试官惊艳！

作为前端工程师，我们几乎每天都在使用 ajax / fetch 请求与后端进行数据交互，这种基于请求-响应的通讯模式，我们再熟练不过了，无论是C端产品或者是B端产品，都离不开这种通讯模式。但是像即时通讯IM类场景，通常不会选择这种“你来我回”的通信模式，而是会选择 WebSocket 这类的全双工通信模式。本文会带您全方位去了解一下 WebSocket 的本质，方便您搞清楚“Connection: Upgrade 是什么意思，为什么是它？”、“Upgrade: WebSocket 又是什么意思？

2024-07-18 09:39:43 734

原创评论系统的全栈设计思路，学会自己也能快速上手搭建

上篇文章讲完了文章详情页的整体实现思路，但是唯独没有讲到评论的实现，因为我认为评论这个功能的实现用几百到一千的文字根本讲不清楚，必须要单独抽离出来，而且文章评论和留言板又有很多相通之处，或者说本质上是一样的！

2024-07-17 13:54:58 909

原创一篇博客如何来到用户面前，分享前端也能看懂的文章详情页全栈设计

本项目代码已开源，具体见：数据库初始化脚本：关注公众号，回复关键字“博客数据库脚本”，即可获取。根据费曼学习法，把知识传递给别人并让ta懂，你才是真的学会了，好的，不偷懒，继续更新！

2024-07-16 09:33:56 917

原创在 Docker 容器中运行 Vite 开发环境，有这两个问题要注意

容器化开发给我们带来了很多便捷，但是在开发环境下也有一些问题要注意，如果不解决这些问题，你的开发体验不会很好。

2024-07-07 15:41:29 363

原创 Vite 中怎么添加全局 scss 文件

通过这些步骤，你就可以在 Vite 项目中成功添加并使用全局 SCSS 文件了。这种方法可以让你在整个项目中共享 SCSS 变量、mixins 和其他全局样式，提高代码的复用性和维护性。注意，对于 mixin 文件，需要在 vite.config.ts 中进行配置，而不是在 main.ts 中直接导入.当我们使用 scss 时，希望能够把一些定义变量，定义mixin 的文件全局加载，避免每处用到还要单独引入这些文件。在 src 目录下创建一个 styles 文件夹，并添加你的全局 SCSS 文件，例如。

2024-07-05 15:18:20 548

原创用 Coze 挖掘出疑似的掘金标题党，纯娱乐

最近 AI 的热度居高不下，Sora 横空出世又在 AI 话题上掀起了一个新的高潮。虽然每天还是会时不时的用一些平台的大模型工具帮助自己打开思路、提高工作效率，但是像这样的 AI 应用一站式平台，我之前确实没使用过。

2024-07-04 10:23:42 971

原创一键到顶和侧边弹射效果制作，复习巩固“切图仔”基本技能

2023 年再写一键到顶和侧边菜单栏弹射效果显得过于简单，不过既然是目录里规划好的一篇内容，咱还是按计划把它完成。首先通过两个动图看看具体效果，再来研究怎么实现！一键到顶：侧边菜单栏弹射效果：既然上面两种方法的兼容性不是很好，那么我们可以尝试自己用 JS 实现一下。得益于 JS 的灵活性，整个滚动行为的缓动效果和时长我们都能很好地控制。这里有两个问题要考虑，一个是总时长，一个是缓动效果。假设网页当前滚动的距离是1000px，计划0.5秒完成滚动到顶部的效果，假设是匀速滚动，那么相当于每个px。

2024-07-03 09:38:50 628

原创 git commit 怎么跳过 husky, commitlint 的检查

我们引入 commitlint 是为了保障代码入库的质量，但是有些时候，我们需要应急处理，比如你在升级框架时，通常不是一两天能解决的，可能希望临时把代码提交到一个分支，而这个时候，你改造的代码可能会有很多报错，这就意味着很难通过 commitlint 的检查。需要注意的是,这仅仅是应急使用，不要在正常开发节奏中跳过 commitlint 检查，这可能会导致 commit 质量下降,应该谨慎使用这些方法。可以在 commitlint 配置中设置忽略包含特定关键词的 commit。可以临时重命名或删除。

2024-07-02 23:34:09 431

原创 vue2 遇到 ?? 操作符不兼容问题，只要这两步就解决

我的 Vue2 项目是用 Vue CLI 搭建的，使用的 @vue/cli-service 是 4.5.x 版本。最后修改 vue.config.js，将 mermaid 加入到 transpileDependencies。研究过后，发现是?操作符不兼容，这个可以用 babel 配置解决。重新启动项目就不会报错了。

2024-07-02 15:13:15 171

原创跨域不一定不能共享 cookie

例如,baidu.com可以设置cookie的域名为.baidu.com,使其子域名如www.baidu.com、map.baidu.com等都能访问该cookie.然而，值得注意的是，虽然端口不同在理论上应该被视为跨域，但在实际的 cookie 共享机制中，同一域名下的不同端口可以共享 cookie。同一域名下的不同子域名可以共享cookie。虽然端口不同的情况下可以共享cookie，但完全不同的域名（例如example.com和example.org）之间默认情况下仍然不能共享cookie。

2024-07-01 17:50:21 273

原创解决 prettier/prettier 和 indent 冲突问题和一点简单思考

用过 prettier 的都知道，经常会遇到 prettier 与 eslint 的某些规则冲突的情况。在之前的一篇文章中，我简单地描述过怎么搭建起应用 eslint/prettier 的基本配置，也提到了怎么解决 prettier 与 eslint 的一些冲突问题。

2024-07-01 10:15:47 1110

原创为什么 npm run serve 正常，npm run build 就报错：digital envelope routines::unsupported

这个错误通常与 Node.js 版本和使用的加密算法有关。

2024-06-30 12:42:11 647

原创关于 pnpm monorepo 项目中 TS2742 Error 的 workaround

最近我在使用 pnpm 作为包管理器开发一个 monorepo 项目，从个人体验来说，在 monorepo 项目中，pnpm 确实要比 yarn classic 用得舒心，最让我欣喜的是 pnpm 对 workspace 协议的支持度很好；另外感受比较明显的一点就是，开发过程中感知到的由于依赖层级导致的 bug 也变少了。但是任何事情都不可能是完美的。果不其然，一个关键的 bug 就在等着我。

2024-06-23 21:13:50 1038

原创昨天发的 npm 包，却因为 registry 同步问题无法安装使用

如果你需要用到 HBuilderX 安卓云打包，就必须及时跟进 HBuilderX 的版本更新，否则可能会因为编译时和运行时版本不一致而在APP运行时爆出提示，如果这个提示被用户看见，那就有点尴尬。我想大概率是 registry 的问题，在国内环境，我们通常会用到 npmmirror，如果镜像站和源站的资源信息不同步，就有可能会出现这个问题。用过 HBuilderX 云打包的都知道，云上面的 Android 环境很有限，其实并不能覆盖 uniapp 生态所有的版本，甚至说只能覆盖最新的一两个版本。

2024-06-20 11:08:53 474

空空如也

空空如也