Fork me on GitHub
image frame

Junglexs

【npm】笔记

知识库 / npm

yarn

安装 yarn

1
npm install -g yarn

F&A

1.执行 yarn intall 报错，Error,certificate has expired.

image-20240430210213083

HTTPS 证书验证失败，导致这个问题。将 yarn 配置中的 strict-ssl 设置为 false , 在 info yarn config 信息中， ‘strict-ssl’ 为 true，表示需要验证 HTTPS 证书。我们可以将 ‘strict-ssl’ 设置为 false，跳过 HTTPS 证书验证。执行如下命令即可

1
yarn config set "strict-ssl" false -g

【Git&GitHub】使用指南

知识库 / Git

Git

本地代码上传

1.建立远程仓库
2.切换到项目路径，打开终端
3.设置用户名、邮箱 

1
2
git config --global user.name "[你的GitHub的用户名]"
git config --global user.email "[你的GitHub绑定的邮箱]"

4.查看是否创建成功

1
git config --list

5.初始化一个空的 git 本地仓库

1
git init

6.绑定本地仓库与远程仓库

1
git remote add origin [远程仓库的具体地址]

7.查看本地分支情况

1
git branch

8.创建并切换到 master 分支

1
git checkout -b master

9.添加文件到暂存区

1
git add .

10.将更改提交到本地仓库

1
git commit -m "[自定义的提交信息]"

11.将本地仓库 push 到远程仓库

1
git push origin master

12.若发生冲突，则可以先暂存本地代码

1
git stash -m "[自定义的暂存信息]"

13.再拉取远端代码后，pop 代码，再次 push

1
2
3
git stash pop
git pull origin master
git push origin master

14.生成 SSH Key，在图中路径找到并复制密钥

1
ssh-keygen -t rsa -C "你的GitHub绑定的邮箱"

image.png
或者以下代码查看密钥

1
cat ~/.ssh/id_rsa.pub

复制密钥到GitHub上

image.png

1
ssh -T git@github.com

image.png

stash pop 和 stash apply 的区别

  • 相同处：git stash apply 和 git stash pop 都是用来从存储区（stash）恢复工作目录的命令。它们的主要区别在于处理完恢复操作后对 stash 的影响。
  • 不同处：pop 会从 stash 中恢复保存的工作目录和索引，并将这些更改应用到当前分支上，但它与 apply 不同的是，pop 操作会从 stash 中删除恢复的 stash。
  • 总结：如果你打算在多个分支之间多次应用相同的 stash，可以使用 apply，这样 stash 不会被删除，你可以在需要的时候再次应用。如果你只需要一次性地应用 stash 并将其删除，可以使用 pop。

git commit 规范

1
2
3
4
5
6
7
8
9
feat(user-auth): add user authentication // 新功能（feat）
fix(database): resolve issue with data inconsistency // Bug修复（fix）
docs(readme): update project documentation // 文档变更（docs）
perf(api): improve response time for data retrieval // 性能优化（perf）
style(css): adjust layout for better readability // 样式修改（style）
test(api): add unit tests for user service // 测试相关（test）
refactor(database): restructure database schema // 重构（refactor）
revert: undo previous commit // 回滚变更（revert）

GitHub

SSH

【Chrome】使用指南

知识库 / Chrome

Google Chrome

谷歌浏览器

拓展程序

  1. Google 翻译 （选中翻译）
  2. 沉浸式翻译（巨好用，双语对照）
  3. Proxy SwitchOmega （管理和切换代理）
  4. JSON Formatter
  5. CSS Peeper
  6. Lighthouse （分析、改善网页性能）
  7. React Developer Tools （React 开发）
  8. Redux DevTools
  9. Shazam （听歌识曲）
  10. Voice Control for ChatGPT （ChatGPT 语音对话，练习口语听力）

【MacOS】使用笔记

知识库 / MacOS

日常

  • command + C 复制
  • command + V 粘贴
  • option + command + V （正常复制后）剪贴
  • command + Z 撤销
  • shift + command + Z 重做（相当于撤销上一步的撤销）
  • command + D 快速选中某词
  • command + tab 向后切换应用
  • command + ～ 向前切换应用 / 切换同一个应用的不同窗口
  • command + M 最小化窗口
  • command + W 关闭窗口
  • command + Q 退出程序
  • command + shift + 4 截屏
  • command + shift + 5 录屏
  • control + A 定位当前行首，现替换成 command + 左方向键更简单，配合 shift选中更丝滑
  • control + E 定位当前行尾，现替换成 command + 右方向键 更简单

访达

  • enter 重命名某文件
  • command + O 打开某文件
  • command + delete 删除某文件到废纸篓
  • command + [ 前往上一个文件夹
  • command + ] 前往下一个文件夹
  • command + 上方向键 前往上层文件夹
  • command + E 推出磁盘映像

VSCode

  • control + G 定位某行
  • control + C 结束终端当前进程
  • command + shift + K 删除整行代码
  • option + command + F 当前文件替换
  • option + shift + 向上/向下箭头 复制一行
  • option + shift + F 格式化代码

终端

当遇到提示：“你不能使用以点“.”开头的名称,因为这些名称已被系统预留。请选取其他名称。”可以使用以下命令

  • 显示隐藏文件
1
defaults write com.apple.finder AppleShowAllFiles -boolean true ; killall Finder
  • 隐藏隐藏文件
1
defaults write com.apple.finder AppleShowAllFiles FALSE ; killall Finder

Mac终端

  • Terminal 系统自带终端
  • iTerm2
  • Warp

FAQ

无法打开“xxx.app”，因为无法验证开发者。

打开【设置】，找到【隐私与安全性】，选择信任该 app即可。

【VSCode】使用笔记

知识库 / VSCode

必装插件

1. 基础插件

  1. GitLens （Git 提交记录提示）

  2. Error Lens （代码错误提示）

  3. Auto Rename Tag （自动补充 HTML 标签）

  4. AZ AL Dev Tools/AL Code Outline （梳理代码结构的插件）

  5. Better Comments （颜色区分不同注释）

  6. Turbo Console Log （自动写console）

  7. Bracket Pair Colorizer2 （颜色区分括号）

  8. Chinese （汉化 VSCode）

  9. Code Runner （允许简单代码）

  10. Code Spell Checker （代码拼写错误提示）

  11. Color Highlight （代码区域高亮）

  12. ESLint， 格式化代码

  13. 翻译（英汉词典）

  14. Image preview （预览图片文件）

  15. indent-rainbow （缩进高亮）

  16. Regex Previewer （预览正则表达式）

  17. Material Icon Theme （主题）

  18. open in browser （浏览器运行）

  19. Partial Diff （对比代码差异）

  20. Project Manager （管理不同项目/代码库）

  21. Zhihu On VSCode （字面意思，摸鱼用）

2. React 开发插件

  1. ES7+ React/Redux/React-Native snippets （React 快捷代码生成）

VSCode 设置

  • 设置多行 Tabs

设置中搜索Wrap Tabs，并打勾

《Angular 开发入门与实战》

书籍

兰泽君 著作

读书笔记

前言

Angular是一种流行的前端框架，由Google维护，专为开发动态单页应用（SPA）而设计。它鼓励使用TypeScript进行开发，这是JavaScript的一个超集，添加了静态类型等特性。

第一部分：Angular基础

  • TypeScript基础：介绍TypeScript的基本语法，以及如何在Angular项目中使用它。
  • 组件和模块：解释Angular应用是如何通过组件来构建用户界面的，每个组件都有自己的逻辑和模板。模块则用来组织这些组件，以及提供服务。
  • 模板和数据绑定：介绍如何使用Angular模板语法来显示数据和响应用户事件，以及单向和双向数据绑定的概念。
  • 服务和依赖注入：讨论服务的概念，这是一种用于封装业务逻辑的方法，以及Angular如何使用依赖注入（DI）模式来提供这些服务。

第二部分：进阶实战

  • 路由和导航：深入探讨Angular路由器的工作原理，如何定义路由规则，以及如何进行导航。
  • 表单处理：详细说明如何使用Angular表单模块来创建和验证用户输入表单。
  • RxJS和异步编程：介绍如何使用RxJS库在Angular中处理异步操作，包括Observable和操作符的概念。
  • 状态管理：探讨在Angular应用中管理状态的策略，可能包括使用NgRx或其他状态管理库。

第三部分：项目实战

  • 构建实际项目：通过构建一个实际的Angular应用来综合运用前面学到的知识，可能是一个电商平台、博客系统或任务管理器。
  • 性能优化：介绍如何分析和提升Angular应用的性能。
  • 部署和维护：讨论将Angular应用部署到生产环境的最佳实践，以及如何维护和更新现有应用。

结语

《Angular 开发入门与实战》是一本面向希望深入了解Angular框架的前端开发人员的实用指南。通过阅读这本书，开发者不仅能掌握Angular的基础知识，还能学会如何在实际项目中应用这些知识来构建复杂的应用程序。

这份读书笔记旨在概述书中可能包含的主要内容和概念，真正的学习和理解还需深入阅读原书并实践其中的示例和技巧。

请我喝杯咖啡吧~

支付宝
微信