教程 on 特严赤傲

博客终于成形了

Fri, 23 Oct 2026 22:32:18 +0800

这个博客很早之前就建好了，最开始使用的是vuepress，后来改成了vitepress，选这两个程序是因为对vue比较熟，但是界面的样式真的一言难尽，难看到没眼看，但也无暇顾及太多，由于在其他博客平台开了账号，也就把它当作记录写代码中遇到的问题的平台。

vben admin pro 框架的 ApiComponent Api组件包装器select使用示例

Mon, 02 Feb 2026 22:27:31 +0800

最近开发的项目中，有一个功能是 form 表单里 select 组件下拉选项是通过接口返回的数据，我使用了ApiComponent 组件，实现这个功能有两种方法，第一种是通过 slots 插入组件的方式实现（参考：vben admin pro 框架的BasicTable之使用slots 插入组件），第二种就是下面这个。废话不说，直接上代码。

vben admin pro 框架的BasicTable之使用slots 插入组件

Mon, 02 Feb 2026 22:27:31 +0800

需求：在BasicTable 列表中，插入一行Switch组件改变状态的列 1，首先在主组件的 script 标签中引入 switch 组件

GitHub 操作命令完整指南

Sun, 17 Aug 2025 09:08:29 +0800

基础配置

用户配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


# 设置全局用户名
git config --global user.name "Your Name"

# 设置全局邮箱
git config --global user.email "your.email@example.com"

# 查看当前配置
git config --list

# 设置默认编辑器（如VSCode）
git config --global core.editor "code --wait"

仓库操作

初始化与克隆

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


# 初始化本地仓库
git init

# 克隆远程仓库
git clone https://github.com/username/repository.git

# 克隆指定分支
git clone -b branch-name https://github.com/username/repository.git

# 添加远程仓库
git remote add origin https://github.com/username/repository.git

# 查看远程仓库信息
git remote -v

提交更改

基础操作

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


# 查看当前状态
git status

# 添加文件到暂存区
git add filename.txt
git add . # 添加所有更改
git add *.js # 添加所有js文件

# 提交更改
git commit -m "描述信息"

# 修改上次提交
git commit --amend -m "新的提交信息"

查看提交历史

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


# 简洁查看提交历史
git log --oneline

# 图形化查看分支历史
git log --graph --oneline --all

# 查看指定文件的修改历史
git log -p filename

# 查看包含统计信息的提交历史
git log --stat

# 按作者查看提交
git log --author="username"

# 按时间范围查看
git log --since="2023-01-01" --until="2023-12-31"

# 查看某次提交的详情
git show commit-hash

分支管理

基础分支操作

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


# 查看分支
git branch # 本地分支
git branch -a # 所有分支(包括远程)
git branch -v # 查看分支最后提交

# 创建分支
git branch new-feature

# 切换分支
git checkout main
git checkout -b hotfix # 创建并切换分支

# 合并分支
git merge feature-branch

# 删除分支
git branch -d old-branch # 安全删除(已合并)
git branch -D old-branch # 强制删除(未合并)

远程分支操作

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


# 推送本地分支到远程
git push origin branch-name

# 跟踪远程分支
git checkout --track origin/branch-name

# 删除远程分支
git push origin --delete branch-name

# 获取远程分支列表
git ls-remote --heads origin

版本回滚与撤销

撤销工作区更改

1
2
3
4
5
6
7
8


# 撤销单个文件的修改
git checkout -- filename

# 撤销所有未暂存的修改
git checkout -- .

# 撤销所有修改(包括暂存的)
git reset --hard

回滚到特定版本

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


# 查看可回滚的提交历史(获取commit hash)
git log --oneline

# 软回滚(保留更改在工作区)
git reset --soft commit-hash

# 混合回滚(默认，保留更改在暂存区)
git reset commit-hash

# 硬回滚(彻底删除更改)
git reset --hard commit-hash

# 回滚到远程仓库状态
git reset --hard origin/main

# 回滚特定文件到某版本
git checkout commit-hash -- filename

# 创建回滚提交(适用于已推送的提交)
git revert commit-hash

恢复删除的分支

1
2
3
4
5


# 查找被删除分支的最后提交
git reflog

# 从reflog中恢复分支
git checkout -b recovered-branch commit-hash

远程同步

推送与拉取

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


# 推送本地分支到远程
git push origin branch-name

# 强制推送(谨慎使用)
git push -f origin branch-name

# 拉取远程更新
git pull origin branch-name

# 获取远程更新但不合并
git fetch origin

# 获取所有远程更新
git fetch --all

高级操作

储藏更改

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


# 储藏当前工作区
git stash

# 查看储藏列表
git stash list

# 恢复最近储藏
git stash pop

# 恢复指定储藏
git stash apply stash@{n}

# 删除储藏
git stash drop stash@{n}

标签管理

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


# 创建标签
git tag v1.0.0

# 创建带注释的标签
git tag -a v1.0.0 -m "Release version 1.0.0"

# 查看标签
git tag

# 推送标签到远程
git push origin v1.0.0
git push origin --tags # 推送所有标签

# 删除标签
git tag -d v1.0.0
git push origin --delete v1.0.0

子模块

1
2
3
4
5
6
7
8


# 添加子模块
git submodule add https://github.com/username/repo.git

# 克隆包含子模块的仓库
git clone --recurse-submodules https://github.com/username/repo.git

# 更新子模块
git submodule update --init --recursive

GitHub CLI (gh) 命令

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


# 登录GitHub账号
gh auth login

# 查看当前登录状态
gh auth status

# 创建PR
gh pr create

# 查看PR列表
gh pr list

# 合并PR
gh pr merge

# 克隆仓库
gh repo clone username/repository

# 创建新仓库
gh repo create

实用技巧

比较差异

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


# 比较工作区和暂存区
git diff

# 比较暂存区和最新提交
git diff --cached

# 比较两个分支
git diff branch1..branch2

# 比较特定文件在两个分支的差异
git diff branch1..branch2 -- filename

重写历史

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


# 交互式rebase(最近3次提交)
git rebase -i HEAD~3

# 修改提交作者信息
git commit --amend --reset-author

# 批量修改历史提交信息
git filter-branch -f --env-filter '
 OLD_EMAIL="old@email.com"
 NEW_NAME="New Name"
 NEW_EMAIL="new@email.com"
 if [ "$GIT_COMMITTER_EMAIL" = "$OLD_EMAIL" ]; then
 export GIT_COMMITTER_NAME="$NEW_NAME"
 export GIT_COMMITTER_EMAIL="$NEW_EMAIL"
 fi
 if [ "$GIT_AUTHOR_EMAIL" = "$OLD_EMAIL" ]; then
 export GIT_AUTHOR_NAME="$NEW_NAME"
 export GIT_AUTHOR_EMAIL="$NEW_EMAIL"
 fi
' --tag-name-filter cat -- --all

清理仓库

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


# 查看大文件
git rev-list --objects --all | grep "$(git verify-pack -v .git/objects/pack/*.idx | sort -k 3 -n | tail -5 | awk '{print$1}')"

# 清理历史大文件
git filter-branch --force --index-filter 'git rm --cached --ignore-unmatch path/to/large-file' --prune-empty --tag-name-filter cat -- --all

# 清理本地无效远程分支引用
git remote prune origin

# 垃圾回收
git gc --aggressive --prune=now

使用强制操作(如 --force push 或 --hard reset)时要格外小心，特别是在团队协作的项目中。

MacBook 终端命令大全

Sun, 17 Aug 2025 09:08:29 +0800

MacBook 的终端(Terminal)是一个强大的工具，可以直接与 macOS 的 Unix 底层交互。以下是一些常用和实用的终端命令分类整理：

鸿蒙开发app资源库

Sun, 03 Aug 2025 08:30:18 +0800

鸿蒙图标库

鸿蒙第三方插件库

鸿蒙图标库

uniappx开发app，获取验证码倒计时功能

Tue, 08 Jul 2025 22:07:07 +0800

使用uniappx+uts+firstui开发app，实现一个获取手机验证码功能，记录一下代码：

Flutter中使用adaptive_dialog的方法

Thu, 26 Jun 2025 22:02:15 +0800

adaptive_dialog是一个强大的Flutter插件，它能够根据运行平台(iOS或Android)自动适配对话框样式，提供一致的用户体验。本教程将详细介绍如何使用这个插件。

React 父子组件传值

Tue, 15 Apr 2025 16:41:16 +0800

在 React 中，父子组件传值方式：

1. 父组件向子组件传值（Props）

这是最基础的传值方式，通过 props 将数据从父组件传递给子组件。

微信小程序获取用户位置

Wed, 12 Mar 2025 20:57:54 +0800

在微信小程序中，从 2023 年 7 月开始，部分敏感接口（如 wx.getLocation）需要在 app.json 或 ext.json 中声明 requiredPrivateInfos 字段，否则调用时会失败并返回以下错误：

微信小程序云开发获取openid

Tue, 04 Mar 2025 21:57:45 +0800

在微信小程序云开发提供了便捷的数据库和云函数功能，可以轻松存储和获取用户信息。以下是代码示例：

MacBook终端使用vim命令

Fri, 28 Feb 2025 23:31:36 +0800

在 MacBook 终端中使用 vim 编辑器时，以下是一些常用命令和操作指南：

1. 基本操作

启动 vim

1

vim 文件名 # 打开或创建文件

退出 vim

保存并退出：
- 按 Esc，然后输入 :wq，按 Enter。
不保存退出：
- 按 Esc，然后输入 :q!，按 Enter。
仅保存不退出：
- 按 Esc，然后输入 :w，按 Enter。

2. 模式切换

命令模式（默认）：
- 按 Esc 进入命令模式，可以执行保存、退出等操作。
插入模式（编辑文本）：
- 按 i 进入插入模式（光标前插入）。
- 按 a 进入插入模式（光标后插入）。
- 按 o 在当前行下方插入新行并进入插入模式。
- 按 O 在当前行上方插入新行并进入插入模式。

3. 光标移动

基本移动：
- h：左移。
- j：下移。
- k：上移。
- l：右移。
快速移动：
- 0：移动到行首。
- $：移动到行尾。
- gg：移动到文件开头。
- G：移动到文件末尾。
- :行号：跳转到指定行（如 :10 跳转到第 10 行）。

4. 文本编辑

删除：
- x：删除光标处的字符。
- dd：删除当前行。
- dw：删除从光标到单词末尾。
复制与粘贴：
- yy：复制当前行。
- p：粘贴到光标后。
- P：粘贴到光标前。
撤销与重做：
- u：撤销上一次操作。
- Ctrl + r：重做撤销的操作。

5. 搜索与替换

搜索：
- /关键词：向下搜索（如 /hello）。
- ?关键词：向上搜索。
- 按 n 跳转到下一个匹配项，N 跳转到上一个匹配项。
替换：
- :%s/旧文本/新文本/g：全局替换（如 :%s/foo/bar/g）。
- :%s/旧文本/新文本/gc：全局替换并确认。

6. 多文件操作

打开多个文件：

1

vim 文件1 文件2 # 同时打开多个文件

切换文件：
- :n：切换到下一个文件。
- :N：切换到上一个文件。
- :ls：列出所有打开的文件。
- :b 编号：切换到指定编号的文件（如 :b 2）。

7. 分屏操作

水平分屏：
- :sp 文件名：水平分屏打开文件。
垂直分屏：
- :vsp 文件名：垂直分屏打开文件。
切换分屏：
- Ctrl + w + h/j/k/l：切换到左/下/上/右分屏。
- Ctrl + w + w：循环切换分屏。

8. 其他实用命令

显示行号：
- :set number：显示行号。
- :set nonumber：隐藏行号。
保存并退出所有文件：
- :xa：保存所有文件并退出。
重新加载文件：
- :e!：放弃更改并重新加载文件。

总结

操作	命令	说明
保存并退出	`:wq` 或 `ZZ`	保存更改并退出
强制退出（不保存）	`:q!`	放弃更改并退出
插入模式	`i` 或 `a`	进入插入模式
删除当前行	`dd`	删除当前行
复制当前行	`yy`	复制当前行
粘贴	`p` 或 `P`	粘贴到光标后或前
搜索	`/关键词`	向下搜索
全局替换	`:%s/旧/新/g`	替换所有匹配项
分屏	`:sp` 或 `:vsp`	水平或垂直分屏

掌握这些命令后，你就能高效使用 vim 编辑文件了！如果需要更深入学习，可以查看 vim 的内置教程：

react 封装一个类函数使用方法

Tue, 21 Jan 2025 14:25:11 +0800

1.编写ProductCount函数

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


class ProductCount {
 public static getProductCount(count: number): string {
 if (count < 10) {
 return `当前数量: 0${count}`;
 }
 return `当前数量: ${count}`;
 }
}

export default ProductCount;

2.在代码文件中导入 `ProductCount` 类。

1

import ProductCount from './ProductCount'; // 根据实际路径调整

3. 在 React 组件中使用**

在 React 项目中的组件中调用它并显示结果。

flutter- ListTile leading加载本地图标

Sun, 20 Oct 2024 11:42:58 +0800

1
2
3
4
5
6


ListTile(
 leading: Images.assets('images/1.png'),
 title: Text('jquery 根据分类id分割数组'),
 subtitle: Text(
 '写项目的时候遇到一个问题'),
 )

现在改成这样就可以了：

flutter父子传值StatefulWidget和StatelessWidget的区别

Sun, 20 Oct 2024 11:42:58 +0800

父组件：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


ElevatedButton(
 onPressed: () {
 Navigator.of(context).push(MaterialPageRoute(
 builder: (context) => FormPage(title: 'form page!')));
 },
 style: ButtonStyle(
 padding: MaterialStateProperty.all(
 const EdgeInsets.fromLTRB(20, 10, 20, 10))),
 child: const Text('传值按钮'),
 )

子组件的StatelessWidget模式：

Mac安装brew和yarn

Sun, 20 Oct 2024 11:42:58 +0800

1，通过镜像安装brew

1

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

按回车后，根据提示操作：输入镜像序号 –> 输入Y，回车等待brew安装完成即可；建议使用中科大的镜像。

miot-plugin-sdk 使用echart图表插件

Sun, 20 Oct 2024 11:42:58 +0800

1.安装 echart

1

npm install native-echarts --save

2.引用

1

import Echarts from 'native-echarts';

3.把option封装成函数

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


 echart(val,title){
 option = {
 tooltip: {
 formatter: '{a} <br/>{b} : {c}%'
 },
 series: [
 {
 name: 'Pressure',
 type: 'gauge',
 detail: {
 formatter: '{value}'
 },
 data: [
 {
 value: val,
 name: title
 }
 ]
 }
 ]
 };

 return option
 }
 

4.组件里调用

1

 <Echarts option={this.echart(this.start.title,this.state.val)} height={420} />

5.总结

在miot-plugin-sdk里面，如果不封装成函数，传不进去值，别的办法没去想，就这么用吧。组件里的高度和大小可以自己根据文档调试。

node 安装多版本

Sun, 20 Oct 2024 11:42:58 +0800

首先安装n模块

1

 sudo npm install -g n

1、列出所有node版本

1

n ls

2、查看远程所有node

1

 n ls-remote

3、查看当前node版本

1

node -v

4、安装指定node版本

1

sudo n 14.17.0

5、删除某个版本的node

1

sudo n rm 14.17.0

6、安装最新稳定版

1

sudo n stable

7、安装最新版本

1

sudo n lastest

8、切换node版本(输入命令后上下键盘选择确认)

1
2


$ n
//若无法正常切换，则可以试试： sudo n

vite配置

Sun, 20 Oct 2024 11:42:58 +0800

vite配置项，有些需要记录一下

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35


import { defineConfig, Terser } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
 base:'./', //打包公共路径
 plugins: [vue()],
 build:{
 //打包环境移除console.log，debugger
 minify:'terser',
 terserOptions:{
 compress:{
 drop_console:true,
 drop_debugger:true
 }
 },
 //打包文件按照类型分文件夹显示
 rollupOptions:{
 output:{
 chunkFileNames:'js/[name]-[hash].js',
 entryFileNames:'js/[name]-[hash].js',
 assetFileNames:'[ext]/[name]-[hash].[ext]'
 }
 }
 },
 server:{
 proxy:{
 'api':{
 target:'csdn.net',
 changeOrigin:true,
 rewrite:(path)=> path.replace('/^\/api/','')
 },
 }
 }
})

记录一下第一部分。

vue3+ts用ref获取元素节点里的值

Sun, 20 Oct 2024 11:42:58 +0800

在vue2中获取元素节点的值：

1
2


<div ref="myRef"></div>
this.$refs.myRef

在vue3+ts中获取元素节点的值

vue3兄弟之间传值之插件mitt

Sun, 20 Oct 2024 11:42:58 +0800

1.首先安装

1
2
3
4


//npm
npm install mitt -S
//yarn
yarn add mitt -S

2.src下新建一个目录plugin,其中新建Bus.ts

教程 on 特严赤傲

博客终于成形了

vben admin pro 框架的 ApiComponent Api组件包装器select使用示例

vben admin pro 框架的BasicTable之 使用slots 插入组件

GitHub 操作命令完整指南

基础配置

用户配置

仓库操作

初始化与克隆

提交更改

基础操作

查看提交历史

分支管理

基础分支操作

远程分支操作

版本回滚与撤销

撤销工作区更改

回滚到特定版本

恢复删除的分支

远程同步

推送与拉取

高级操作

储藏更改

标签管理

子模块

GitHub CLI (gh) 命令

实用技巧

比较差异

重写历史

清理仓库

MacBook 终端命令大全

鸿蒙开发app资源库

鸿蒙图标库

uniappx开发app，获取验证码倒计时功能

Flutter中使用adaptive_dialog的方法

React 父子组件传值

1. 父组件向子组件传值（Props）

微信小程序获取用户位置

微信小程序云开发获取openid

MacBook终端使用vim命令

1. 基本操作

启动 vim

退出 vim

2. 模式切换

3. 光标移动

4. 文本编辑

5. 搜索与替换

6. 多文件操作

7. 分屏操作

8. 其他实用命令

总结

react 封装一个类函数使用方法

1.编写ProductCount函数

2.在代码文件中导入 ProductCount 类。

3. 在 React 组件中使用**

flutter- ListTile leading加载本地图标

flutter父子传值StatefulWidget和StatelessWidget的区别

Mac安装brew和yarn

miot-plugin-sdk 使用echart图表插件

1.安装 echart

2.引用

3.把option封装成函数

4.组件里调用

5.总结

node 安装多版本

vite配置

vue3+ts用ref获取元素节点里的值

vue3兄弟之间传值之插件mitt

vben admin pro 框架的BasicTable之使用slots 插入组件

2.在代码文件中导入 `ProductCount` 类。