【从零到一手撕脚手架 | 第四节】加速开发效率 使用plop生成开发模板 使用mock进行数据模拟
【从零到一手撕脚手架 | 第四节】加速开发效率 使用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啦😀, ...
【从零到一手撕脚手架 | 第三节】项目集成CommitLInt+ESLint+Prettier+StyleLint+LintStaged
【从零到一手撕脚手架 | 第三节】项目集成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
【从零到一手撕脚手架 | 第二节】模块化封装 降低耦合度 封装 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 初始化项目
【从零到一手撕脚手架 | 第一节】配置基础项目结构 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全套入门教程 | 基础篇
【学习笔记】黑马程序员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解析引 ...
【雪人日记】2023年的除夕夜
470d40a13319dd5202c7e8667eadc5c9dff3ccb84d4bcff22c717d465e98526a3aef0124637f4316ef35591b77e4dddf653ce7f9bcbd21e6e3ca8f83ef35cd6dde4b79bb7240ad92d5ab011b654ecfc2a9199e29312edeb917b0519ed5bfd60e2494aec28fe0a49f31e457d693e4824ff8723adf28ed2c2d8daab0c3cde26088e88078a34a4218348ff11e0e221015793f66ab6cf7e399afa8482a2068dac02495f4bff7b566c5d7707c552b5abb5e0f67bde5b93d82857a9be9055fa730c37f368aea1c2eb4d34ee5151013a31ceacaf03fc12bd149f5be046c39f8170990406f9f84eab1f1b2a833f903922409b9e1d743ee144994255c9 ...
【学习笔记】尚硅谷Webpack5入门到原理 | 高级篇
WebPack5高级篇
⛄继续学习WebPack5的高级篇。
⛄这一篇主要讲的是WebPack5打包优化的思路,全是配置项,无技术含量,主要是思路的学习。
⭐注:本文是对尚硅谷 Web 前端之 Webpack5 教程的学习笔记记录,加入了一些自己的练习改动与思考。
⭐推荐大家去看原视频:尚硅谷Webpack5入门到原理(面试开发一条龙)_哔哩哔哩_bilibili
我的总结
下面都是一些配置项,在这里大概描述一下优化的思路
开发者体验优化
SourceMap:打包后报错可映射源码报错位置
打包加速
HotModuleReplacement:热模块替换
OneOf:正则匹配优化
Include/Exclude:匹配需要打包的文件,对不需要的进行过滤
Cache:缓存优化,对Eslint检查与Babel编译结果进行缓存
Thread:多进程打包
压缩代码体积
TreeShaking:只打包所需库的被引用内容,而不是打包整个库
Babel:有优化Babel体积的插件
ImageMinimizer:打包图片压缩
兼容性
Core-js:babel的补丁,可以将asyc函数, ...