雪人的小屋

【Docker速成】前端最好的Docker指北 Hello 大家好啊，我是雪人⛄ 之前实习的时候发现项目是用 Docker 部署的，然后 Mentor 让我速成一下。 火速补习一波🔥，在这里分享给大家，教大家如何快速使用 Docker 部署前端项目。 在这里给大家推荐一个视频：🐳Docker概念，工作流和实践。 很喜欢技术蛋老师这个UP主，讲的内容都生动有趣，安利一波。 环境安装 直接前往官网选择对应操作系统下载安装即可：Dokcer官网。 Windows 版本的 Docker Desktop 会自动配置环境变量并且包含 GUI 式傻瓜操作，非常好用。 基础概念概述 Docker🐳 是一种容器技术，只隔离应用程序的运行时环境但容器之间可以共享同一个操作系统，可以理解成一个更轻量级的 虚拟机 并且使用的是本机的操作系统。 从官网 Copy 了一些 Docker 的用途和优点。 构建： 利用 Docker 映像在 Windows 和 Mac 上高效开发自己独特的应用程序，从而在编码方面抢占先机。 使用 Docker Compose 创建多容器应用程序。 在整个开发管道中与您喜欢 ...

【Wbpack原理】基础流程解析，实现 mini-webpack⛄：webpack 对前端同学来说并不陌生，它是我们学习前端工程化的第一站，在最开始的 vue-cli 中我们就可以发现它的身影。我们的 vue/react 项目是如何打包成 js 文件并在浏览器中运行的呢？本系列文章将会帮助你由浅入深理解 webpack 原理，了解其中的 loader/plugin 机制，熟悉 webpack 打包流程。实现简易 webpack 核心代码，run-loader 模块，示例 loader 与 plugin。Tip：在阅读本文前需要了解一些 webpack 的基础概念及常用配置。 本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个**依赖图(dependency graph)**，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。 本系列全部代码与文章会在 LonelySnowman/mini-webpack 同步，如果 ...

【雪人日记】记一次解决issue的踩坑 ~大家好啊，我是⛄。今天下午遇到一个很头疼的问题，业务上要给树形结构表格加一个逻辑，选择子节点的时候要求父级节点的兄弟节点及父级节点不允许选中，并且还要在不允许选中的选择框上加一个Hover的提示文字。 然后我就开始查阅Semi的文档，发现无法选中的API是支持的，但是要想有Hover操作的话需要去使用自定义的API。写到一半发现如果把筛选框一栏隐藏，他的resize的操作列还在，然后就开始一个个过用到的API，查了半天，好像没有相关的API可以操作成我这个样子，像下面这样。 简单排查API后，发现是同时使用rowSelection并且加入hidden属性，并且使用resizable属性才会触发，不可变长的表格列是正常的。所以这个是一个Bug，然后就想着自己处理一下，提了PR合并后业务的问题就解决了，2024年的第一个PR也就有啦😊。 下班回家后歇了一下就开始处理，我直接打开packages/semi-ui/table/index.tsx，直接定位到render函数去看DOM结构，发现刚好受到resizable属性影响分为了两个表格，那么我们 ...

470d40a13319dd5202c7e8667eadc5c9dff3ccb84d4bcff22c717d465e98526a3aef0124637f4316ef35591b77e4dddf1d29842bfe5a906beeea589c46f09b796e378a0a2e1bd15fd3538ff5e346806de80b996547acbbc9c39101a257903bf83a91227830ba007c2a118b8ee7e589be8b4b9e3d938696a8aa98dd697dba5367aae1eed43e6c2f6a63e16ad9c4ae6515a4fc690d10d6afe80c99f5288a13bfb0e222cb2a2d286a4b7848e9ea1eee92920a33d959cb08b1ae0690a8cda22e8c55c74453f97d693051abe7ea788d8f2e36246f895eee43a6585cb2b6933212811150d70560c7703bdeb7cef6b8d4737f3452558d2d9474b72d2 ...

在迷茫中成长 | 2023年度总结 ⛄，hello~~大家好，我是雪人，又到了一年一度的年终总结时间，马上就是 2024 年了，开始提笔记录我的 2023 ~ 2023年的目标回顾 2023 年，我第一次一个人在外地住，第一次实习，第一次一个人旅行，第一次去看海。发生了太多，以至于我不知道该从哪里写起。 那就从 2023 年的起点开始吧，2022 的最后我发布了我的第一篇年终总结，给我的 2023 定下了几个小目标（实现了 50%）。 2023年我要： 拿到大厂实习offer；拿到国家级奖项；拿到驾驶证；通过CET6；上线一个开源项目，持续输出高质量博文，每周至少更一篇；LeetCode全勤；篮球场轻松过人； 专业技能 拿到大厂实习offer ✅ 上线一个开源项目 ✅ LeetCode全勤 ❌ 2023 年的开始每天都在坚持学习，刷算法题，准备自己的项目。寒假期间还参加了字节跳动的青训营，拿到了大项目第八（还是不错的🤭）。坚持到了找到实习后，因为每天都这样真的好累😂，然后就开始间接性的坚持，再到后来直接摆烂。 归功于我前几个月的坚持，到后来暑假的时候拿到了京东的实习 off ...

【从零到一手撕脚手架 | 第五节】自定义命令行下载cli工具 Hello大家好我是⛄，之前我们已经成功搭建了一套Vue3的快速开发模板，提高我们搭建新项目的效率，但是当我们的模板逐渐增多，如果依然使用git clone的方式去下载模板较为繁琐。为了解决这个问题，我们就可以自己去搭建一个命令行交互式的工具包去生成我们需要的模板。 GitHub： Vue3开发模板：LonelySnowman/sv3-template 自定义cli工具包：LonelySnowman/arceus-cli 官方文档：SV3-Family | Vue3 基础结构 我们这次的目标就是搭建一个类似于vue-cli，create-react-app等cli工具类似的工具包。要实现的核心功能就是使用命令行交互的效果去生成我们需要的Vue项目模板。 首先把项目文件结构创建一下，一步步教大家实现。 12345678arceus-cli/ |- bin/ # node 命令配置 |- src/ # 项目资源 |- command/ # 命令逻辑 |- utils/ # 公共方法 |- ...

【Minecraft开服】如何使用云服务器搭建我的世界服务器Tags：服务器，我的世界，开服，MC，Minecraft 大家好呀，我是雪人⛄ ~ 好久没更新了，刚开学跟室友聊天的时候聊到了暑假都玩什么，LOL、下棋、王者… ⛄：我都不知道该玩啥了，电子阳痿了。 舍友：“我的世界”。 ⛄：嗯？（唤醒了封尘已久的记忆） ⛄：你和谁一起玩？ 舍友：一个人。 ⛄：我的天哪，你一个人都能玩进去，要不咱们一起玩吧😄。 （火速执行，先用内网穿透 + 本地开服玩了一段时间，每次都得等房主上线才能玩，非常不方便） emmm，为什么不开个服务器呢？开整！ 买一台云服务器 开服当然是需要先有一台服务器啦😀。 选择购买方式购买云服务器的选择有很多很多种：阿里云，腾讯云，华为云…. 也有一些活动可以白嫖服务器， 大家可以自行搜索资料，我第一次用的就是阿里云云翼计划的服务器，可以用学生认证免费领取三个月然后写一个文章能续一年。 现在我在用腾讯云的服务器，各大厂商都会有一些新人优惠，价格还是可以接受的。 【腾讯云2023金秋上云季】：https://cloud.tencent.com/act/pro/2 ...

470d40a13319dd5202c7e8667eadc5c9dff3ccb84d4bcff22c717d465e98526a3aef0124637f4316ef35591b77e4dddf6f63108a0166f3787c9213b2b39d33fd179b4d265038d1eb54a9302472a43eee9f46a314448ab43ee3945d56e714ce9125fcb43c37a02e33231ea94f51f4c06322f8a37a04dc7963b6d66e22c4b3aed3fe77ec2e8398c07afc3a68a34c2923d1beb8a7fb22e19ae62f1718f3cb45f628319949e5abfdf528ef2d1cf6f041785faea04c024ec69b3dafdee7eb77215f601523eb6c7fa989edc800d8329b704357effb30da1d040621bfe52bf5e475e8bdbed33a36e6b204cd7acb08c3319fc614175fececdada9c758 ...

JavaScript深拷贝，看这一篇就够啦！ 大家好我是雪人⛄ 最近面试的时候被问到了深拷贝，我自信满满的写出了使用JSON的快捷方法，与递归深拷贝方法(只写了基础版的拷贝对象)。然后… 面试官：如果传入的是Map呢？⛄：那可以判断一下，加一个 clone Map 的。 面试官：如果传入的是Set呢？⛄：那可以判断一下，加一个 clone Set 的。 面试官：如果传入的是Date RegExp Function呢？⛄：嗯？ 面试官：如果 Obj 中含有 Symbol 为 key 的呢？⛄：嗯？嗯？嗯？ 面试官：如果有循环引用怎么办？ ⛄：☞🤡👈 我直接呆住😳，这确实没看过🤡，痛定思痛，火速补习了一波，分享给大家。 数据类型在实现深拷贝之前，我们需要先了解一下JS的数据类型，一共有两大类。 基本数据类型：number，string，boolean，undefined，null，symbol，bigint 引用数据类型：object，function，array，map，set等..（都是对象） 那么他们有什么区别呢？ 基本数据类型在赋值的时候会直接创建一个新的栈地址去存放 ...

【从零到一手撕脚手架 | 第四节】加速开发效率 使用plop生成开发模板 使用mock进行数据模拟 Hello大家好我是⛄，之前我们已经配置了脚手架需要具备的基本功能：代码封装，团队协作规范等。但是可能我们有其他的需求，比如说我们想快速生成几个基础的组件模板我们可以使用Plop或者使用文件写入实现。比如我们不想等后端同学的接口，可以直接使用mock模拟数据生成。 GitHub：LonelySnowman/sv3-template 官方文档：SV3-Family | Vue3 前置知识：Vue全家桶，了解Vite或WebPack等构建工具，Node.js 您将收获到：从零到一构建一个规范的 Vue3+TS+Vite 脚手架 配置 plop 想一想平时我们是如何新建一个组件的，右键->新建文件->命名文件->编写组件代码，或者直接使用命令行生成文件，并且这些组件都会编写一些重复的内容，这些内容在新建时就具备，我们平常可能就直接ctrl+c、ctrl+v，还是有一点繁琐的😓。有没有一种方法能快速生成各种组件的模板呢？接下来就要用到我们的plop啦😀， ...