雪人的小屋

【从零到一手撕脚手架 | 第三节】项目集成CommitLInt+ESLint+Prettier+StyleLint+LintStaged Hello大家好我是⛄，前两节教大家如何初始化一个脚手架项目以及如何封装Vue技术栈常用的工具库。本小节教大家如何向我们的脚手架中配置ESLint、Prettier、StyleLint、LintStage。帮助大家规范项目代码，能够更好的进行团队协作开发。 项目地址： GitHub：LonelySnowman/sv3-template 官方文档：SV3-Family | Vue3 前置知识：Vue全家桶，了解Vite或WebPack等构建工具，Node.js 您将收获到：从零到一构建一个规范的 Vue3+TS+Vite 脚手架 配置 ESLint ESLint 是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一代码的风格。它拥有以下功能： 查出 JavaScript 代码语法问题。 根据配置的规则，标记不符合规范的代码。 自动修复一些结构、风格问题。 防止代码成为shi山� ...

【从零到一手撕脚手架 | 第二节】模块化封装 降低耦合度 封装 axios pinia router Hello大家好我是⛄，前一节我们讲解了脚手架的基础项目搭建。接下来教大家将Vue技术栈常用的工具进行封装，让我们项目的代码更易维护。 GitHub：LonelySnowman/sv3-template 官方文档：SV3-Family | Vue3 前置知识：Vue全家桶，了解Vite或WebPack等构建工具，Node.js 您将收获到：从零到一构建一个规范的 Vue3+TS+Vite 脚手架 封装axios状态码提示 当浏览器接收并显示网页前，此网页所在的服务器会返回一个包含 HTTP 状态码的信息头（server header）用以响应浏览器的请求。 每个状态码都代表一种提示信息 分类 分类描述 1** 信息，服务器收到请求，需要请求者继续执行操作 2** 成功，操作被成功接收并处理 3** 重定向，需要进一步的操作以完成请求 4** 客户端错误，请求包含语法错误或无法完成请求 5** 服务器错误，服务器在处理请求的过程中发生了 ...

【从零到一手撕脚手架 | 第一节】配置基础项目结构 Vite + TypeScrpit + Vue3 初始化项目 hello大家好我是雪人⛄，不知不觉断更好久了😄，经过了长时间的学习，终于踏入了前端工程化的大门，大家再日常开发中总是会用到一个开发工具：脚手架，大家在使用其他人的脚手架或者一些官方脚手架的时候，可能只懂得使用并不懂得如何实现，看到一些代码只是知其然不知其所以然，今天为大家带来一套教程，教大家入门“脚手架”，相信你一定会有所收获。 GitHub：LonelySnowman/sv3-template 官方文档：SV3-Family | Vue3 前置知识：Vue全家桶，了解Vite或WebPack等构建工具，Node.js 您将收获到：从零到一构建一个规范的 Vue3+TS+Vite 脚手架 项目使用的依赖： 使用 Vite 进行项目构建 使用 TypeScript 使用 Sass 编写样式 对 pinia，vue-router，axios 进行模块化封装 使用 CommitLint，ESLint，StyleLint，Prettier，LintSta ...

470d40a13319dd5202c7e8667eadc5c9dff3ccb84d4bcff22c717d465e98526a3aef0124637f4316ef35591b77e4dddf5589913b87a47bd72899154d764dc63cc8fabf6f23ebb9e8140f5dc535143d950052d6f500d45712f3d13fc0e4d4c61cd409760d13560a8b27a53f88cd0d7c02da52b36a4f2ce5d84f2355355b5cd8af85937bba41a81df081a316eb7cefad1cb2b0642c5a97a55798ae25b8165fdce923056a8d7224316806d09f3f38bdcd681bc65a986abd067304188d08978ae4782d11c7798f60ddb2027b60819921356b08bd203e9c340d44c5d6a764b349cccf2e141a0bd09f99af5e1c0f8a21ebf00c811a1a874f7ff98f6 ...

涨知识了，最近的每日一题都好难💥 资料百度百科：「格雷码」 我们先看看普通的格雷编码LeetCode89 格雷码规律解析1234567891011# n为1时 0 1 因为只有这两个数n = 1 [0, 1]# n为2时前两个数不变只是因为位数变了向前补0 [00, 01]# n为2时后两个数可以总结出一个规律 # 最高位补1 低位数由n-1的数倒序排列 [11, 10]n = 2 [00，01，11，10]# n=3 时规律也是如此n = 3 [000, 001, 011, 010, 110, 111, 101, 100]... 那么我们就可以根据这个思路实现代码 代码实现1234567891011121314151617var grayCode = function(n) { // 起始数字为0 const ret = [0]; // i 是需要在第i-1位补1 // 刚开始需要在第0位补构成 [0, 1] for (let i = 1; i <= n; i++) { // 我们在这里获取 ...

【算法日记】快速幂：关于我知道答案却做不出来这档事 ⭐LeetCode第330场周赛，直接卡在了第二题😭，掉大分，学到一手快速幂。 ⭐本文包含以下内容：快速幂，快速幂取余。 ⭐参考教程： 2550. 猴子碰撞的方法数 - 力扣（Leetcode） 50. Pow(x, n) - 力扣（Leetcode） 50. Pow(x, n) - 力扣（Leetcode） Math.pow(x, n) 这个函数大家应该并不陌生，他就是用来计算 x^n^ 的函数，那么他是怎么实现的呢？ 快速幂的讲解推荐大家去看一个视频：50. Pow(x, n) - 力扣（Leetcode） 下面给出代码实现，使用语言：TypeScript 暴力计算1234567891011// 直接将x连乘n次即可// 时间复杂度 O(n)function myPow(x: number, n: number): number { let m: number = 1 // 遇到负数需要连乘 1/x if(n<0) x = 1/x for(let i=0;i<Math.ab ...

【学习笔记】黑马程序员Node.js全套入门教程 | 基础篇 ⛄最近要写一些npm命令发现文件读写和路径API忘记了，索性直接复习了一遍NodeJS，边学边忘真的痛苦。 ⛄本文包含以下内容：对NodeJS的基础介绍，NodeJS的内置包的简单介绍，CommonJS模块化介绍，npm包下载与发布介绍。 ⭐注：本文是对黑马程序员Node.js全套入门教程的学习笔记记录，加入了一些自己的练习改动与思考。 ⭐推荐大家去看原视频：黑马程序员Node.js全套入门教程 初识NodeJs思考与认识JS为什么可以在浏览器中被执行12345====浏览器====待执行的JS代码 ↓JavaScript解析引擎====浏览器==== 浏览器中含有JavaScript解析引擎负责解析JS代码 不同的浏览器使用不同的JavaScript解析引擎： Chrome => V8 Firefox => OdinMonkey（奥丁猴） Safri => JSCore IE浏览器 => Chakra（查克拉） 等… Chrome浏览器的V8解析引 ...

470d40a13319dd5202c7e8667eadc5c9dff3ccb84d4bcff22c717d465e98526a3aef0124637f4316ef35591b77e4dddf653ce7f9bcbd21e6e3ca8f83ef35cd6dde4b79bb7240ad92d5ab011b654ecfc2a9199e29312edeb917b0519ed5bfd60e2494aec28fe0a49f31e457d693e4824ff8723adf28ed2c2d8daab0c3cde26088e88078a34a4218348ff11e0e221015793f66ab6cf7e399afa8482a2068dac02495f4bff7b566c5d7707c552b5abb5e0f67bde5b93d82857a9be9055fa730c37f368aea1c2eb4d34ee5151013a31ceacaf03fc12bd149f5be046c39f8170990406f9f84eab1f1b2a833f903922409b9e1d743ee144994255c9 ...

WebPack5高级篇 ⛄继续学习WebPack5的高级篇。 ⛄这一篇主要讲的是WebPack5打包优化的思路，全是配置项，无技术含量，主要是思路的学习。 ⭐注：本文是对尚硅谷 Web 前端之 Webpack5 教程的学习笔记记录，加入了一些自己的练习改动与思考。 ⭐推荐大家去看原视频：尚硅谷Webpack5入门到原理（面试开发一条龙）_哔哩哔哩_bilibili 我的总结 下面都是一些配置项，在这里大概描述一下优化的思路 开发者体验优化 SourceMap：打包后报错可映射源码报错位置 打包加速 HotModuleReplacement：热模块替换 OneOf：正则匹配优化 Include/Exclude：匹配需要打包的文件，对不需要的进行过滤 Cache：缓存优化，对Eslint检查与Babel编译结果进行缓存 Thread：多进程打包 压缩代码体积 TreeShaking：只打包所需库的被引用内容，而不是打包整个库 Babel：有优化Babel体积的插件 ImageMinimizer：打包图片压缩 兼容性 Core-js：babel的补丁，可以将asyc函数， ...

WebPack5入门到原理 ⛄最近报名了字节跳动的前端青训营，大作业是要做一个组件库项目。 ⛄当我自信的打开IDE准备大展身手的时候发现一点思路都没有，网上搜罗了很多教程后发现自己对工程化的知识了解尚浅。 ⛄于是就发现了谷谷的这套教程，真的讲的很好，学完Webpack就可以去搭建一个组件库脚手架了。 ⭐注：本文是对尚硅谷 Web 前端之 Webpack5 教程的学习笔记记录，加入了一些自己的练习改动与思考。 ⭐推荐大家去看原视频：尚硅谷Webpack5入门到原理（面试开发一条龙）_哔哩哔哩_bilibili 前言为什么需要打包工具？ 开发时，我们会使用框架(React、Vue)，ES6模块化语法，Less/Sass等css 预处理器等语法进行开发。 这样的代码要想在浏览器运行必须经过编译成浏览器能识别的JS、Css 等语法，才能运行。 所以我们需要打包工具帮我们做完这些事。 除此之外，打包工具还能压缩代码、做兼容性处理、提升代码性能等。 有哪些打包工具？ Grunt Gulp Parcel Webpack Rollup vite … 基本使用 webpack是一个静态资 ...