跳至主要內容
王天的博客

王天的博客

98年👦🏻 | 零基础转行前端 | 工作7年 | 持续分享前端知识,助力0~2年的前端新人

react+ts实战开发
从零到1学习react
王天的魔法工具盒
奇趣、好玩、无用的乐趣
开源项目
一些有用的工具库,希望对你有帮助
vuepress主题自定义布局

场景

假如读者任意点开了王天的一篇文章,看完拖到文末、均显示王天的个人简介,如下图:
image.png
如何实现呢? 咱们可以通过配置替换主题组件+主题组件内置插槽的形式

实现思路

通过替换vuepress主题组件,来实现页面的自定义布局

  1. config.ts 配置 alias 替换主题组件
  2. 主题组件内置插槽,提高开发效率

程序员王天大约 2 分钟
git常用的六个命令

git 常用的六个命令:1、第一次初始化;2、初始化仓库;3、加到缓存区;4、提交至本地仓库;5、推送本地仓库信息至远程仓库;6、拉取远程仓库最新文件。其中,第一次初始化有两种方式,一种语句较多,另一种语句较少。

精简版操作 git

初始化

  1. git init 【初始化 init】
  2. git add . 【提交到缓存区】
  3. git commit -m ‘代码描述’【提交到本地仓库】
  4. git remote add origin git 仓库地址,https开头的,码云粘贴 【本地仓库与云端关联】
  5. git pull origin master 【提交到云端仓库,如未成功,执行下面强制推送】
  6. git push origin master # -f 【强推】

程序员王天大约 2 分钟
解决eslint和prettier冲突

eslint 检测代码规范、pretter 修复代码格式,他们功能有一些重叠,配置不当情况下、比如 eslint 设置单引号、prettier 双引号,会导致编译执行错误,导致冲突,如何解决呢?

冲突本质原因是 eslint 和 prettier 并行导致,解决冲突的方法好几种:

  1. 关闭冲突规则
  2. 调整执行顺序
  3. 手动调整-统一配置

关闭冲突规则

使用 eslint-config-prettier 插件来禁用 ESLint 中与 Prettier 冲突的规则。
该插件会将 Prettier 的规则应用到 ESLint 中,并自动禁用冲突的规则。您可以在 ESLint 配置文件中添加以下配置:


程序员王天大约 1 分钟
reactRouter 实现页面级按钮权限

大家好,我是王天~
今天咱们用 reac+reactRouter 来实现页面级的按钮权限功能。这篇文章分三部分,实现思路、踩坑记录,代码实现。嫌啰嗦的朋友,直接拖到最后一章节看代码哦。

前言

通常情况下,咱们为用户添加权限时,除了页面权限,还会细化到按钮级别,比如、新增、删除、查看等权限。

如下效果,切换用户登录后,操作权限除了左侧菜单,还有页面按钮。
按钮权限演示效果.gif


程序员王天大约 4 分钟
苹果忘记锁屏密码怎么办?

哎,平时刷脸解锁手机习惯了,屏幕解锁密码给忘了,尝试多次解锁后,手机不出意料的锁住了,从1分钟重试、到3小时重试,最后一次不敢尝试了,生怕手机变搬砖了。

于是搜索iPhone忘记锁屏密码教程,踩坑了多种方案,亲测以下两种方式没毛病,

注意

注意!以下两种方式会重置手机, 如未备份数据,则默认恢复出厂设置

1、登录iCloud网页账号,解绑iPhone
2、电脑下载爱思助手,iPhone数据线链接到电脑上,手机切换恢复模式
image.png


程序员王天大约 1 分钟
vscode新建代码片段
  1. 打开 Visual Studio Code。
  2. 进入命令面板(Command Palette):通过快捷键 Ctrl+Shift+P(Windows/Linux)或 Cmd+Shift+P(Mac),或者从菜单栏选择 "View" > "Command Palette"。
  3. 在命令面板中,输入 "Preferences: Configure User Snippets",然后选择此命令。
  4. 在弹出的下拉菜单中,选择对应的文件类型,这里选择 "JavaScript"。

用 chatgpt 做一些繁杂简单的配置工作,简直是太爽啦
比如把一个代码片段发过去,让 chatgpt 直接生成配置文件,省区了一个个添加换行符了
image.png


程序员王天小于 1 分钟
如何提高redux开发效率?当然是redux-tookit啦!

前言

使用 react-redux 的朋友都经历过这种痛苦吧?
定义一个 store 仓库,首先创建各种文件,比如 reducer、action、store...,然后 将 redux 和 react 连接使用。整个流程繁琐,写起来代码冗余。
react-redux 创建仓库,文件目录如下:
image.png
好怀念使用 vuex 创建写仓库的日子.......
直到有一天我发现了 redux-toolkit ,原来 redux 还能这样写呀!


程序员王天大约 4 分钟
webhooks 自动部署git项目

❌ 经过不断尝试,果断放弃webhoooks!不是踩坑太多,而是最终配好后执行太耗时。
💡 自动部署,本质是在服务器执行 git clone ,因受服务器资资源限制、此过程会非常耗时,我20多兆的仓库,整个过程需要半个小时。
✔️过程太慢还浪费服务器宽度,还不如本地写个脚本上传算了

:::success
🔥对webhooks不刚兴趣可直接看最后一章节,通过ssh2-sftp-client 模块实现上传服务器
:::

webhoooks 自动部署 git项目


程序员王天大约 5 分钟
2
3
4
5
...
9