# code-notes-kb

**Repository Path**: template-warehouse/code-notes-kb

## Basic Information

- **Project Name**: code-notes-kb
- **Description**: 个人全栈技术知识库：系统化笔记 + 面试题卡，覆盖主流前后端与工程化技术栈。包含 JavaScript/Vue/React/Flutter/Python/Java/TypeScript 等 35+ 技术栈模块，以精美题卡形式呈现核心知识点，适合面试复习与日常学习。
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-08-28
- **Last Updated**: 2026-09-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Code Notes KB — 全栈技术知识库

![License](https://img.shields.io/badge/license-MIT-blue.svg)
![Cards](https://img.shields.io/badge/cards-3285-green.svg)
![Modules](https://img.shields.io/badge/modules-35-purple.svg)
![Node](https://img.shields.io/badge/node-%3E%3D16-brightgreen.svg)

> 系统化的前端与计算机基础知识体系，35 个技术栈，3285 张面试题卡，覆盖面试高频与实战技能

---

##  项目特色

- **全栈覆盖** — 35 个主流技术栈，从前端到后端、从工程化到运维，一站式学习
- **题卡形式** — 每张卡片聚焦一个核心知识点，快速复习、高效记忆
- **统一规范** — 四色主题、难度标签、中英文双语，视觉与内容双重标准化
- **实战导向** — 代码示例 + 核心要点，拒绝空洞理论，直击面试考点
- **开源免费** — MIT 协议，持续更新，欢迎贡献

---

##  知识库概览

| 分类 | 知识库 | 状态 |
|------|--------|------|
| 语言基础 | JavaScript、TypeScript、Es6-Es12、Java、Python | ✅ |
| 框架 | Vue2、Vue3、React、Flutter、Uniapp、Spring Boot、NestJS | ✅ |
| 工程化 | Webpack、Vite、Rollup、esbuild、SWC、Turbopack、Babel、Gulp、PostCSS | ✅ |
| 基础 | HTML_CSS、计算机网络、算法与数据结构、设计模式 | ✅ |
| 工具 | Git、Docker、Linux、Nginx、Redis、Mysql、Nodejs、WebGL、Electron | ✅ |
| 前沿 | Agent | ✅ |

---

##  各模块题卡统计

| 技术栈 | 题卡数 | 技术栈 | 题卡数 | 技术栈 | 题卡数 |
|--------|--------|--------|--------|--------|--------|
| 🐦 Flutter | 241 | 💚 Vue3 | 150 | ⚛️ React | 158 |
| 🐍 Python | 132 | ☕ Java | 123 |  JavaScript | 130 |
|  Webpack | 120 | 🧮 算法与数据结构 | 131 |  计算机网络 | 114 |
|  Nodejs | 108 |  Spring Boot | 116 | 🏗️ HTML_CSS | 90 |
|  Linux | 90 | 🔵 NestJS | 90 | 📱 Uniapp | 90 |
| 💚 Vue2 | 90 | 🎨 设计模式 | 100 | 🟢 Gulp | 96 |
| ⚡ Vite | 96 |  Rollup | 78 | 🟡 Babel | 72 |
| 🐳 Docker | 72 | 🆕 Es6-Es12 | 72 | 🔀 Git | 72 |
| 🐬 Mysql | 72 | 🔴 Redis | 72 |  Agent | 60 |
|  Electron | 60 | 🎮 WebGL | 60 | 🔷 TypeScript | 61 |
| 🟢 Nginx | 66 | 🎨 PostCSS | 66 |  SWC | 66 |
|  Turbopack | 66 |  esbuild | 66 | 📊 **总计** | **3285** |

> 📊 共 **35** 个技术栈，**3285** 张面试题卡

---

## 🗺️ 推荐学习路线

### 前端入门

```
HTML_CSS → JavaScript → Es6-Es12 → Vue2/Vue3 或 React → Webpack/Vite
```

| 阶段 | 技术栈 | 说明 |
|------|--------|------|
| 基础 | HTML_CSS、JavaScript | 网页结构与脚本语言 |
| 进阶 | Es6-Es12、TypeScript | 现代语法与类型系统 |
| 框架 | Vue2/Vue3 或 React | 选择一条路线深入 |
| 工程化 | Webpack、Vite | 构建工具与开发体验 |

### 后端入门

```
Java 或 Python → Spring Boot 或 NestJS → Mysql → Redis → Linux
```

| 阶段 | 技术栈 | 说明 |
|------|--------|------|
| 语言 | Java 或 Python | 选择一门主力语言 |
| 框架 | Spring Boot 或 NestJS | 企业级后端框架 |
| 数据库 | Mysql、Redis | 关系型 + 缓存 |
| 部署 | Linux、Docker、Nginx | 服务器与容器化 |

### 全栈进阶

```
Nodejs → Docker → 计算机网络 → 算法与数据结构 → 设计模式
```

| 阶段 | 技术栈 | 说明 |
|------|--------|------|
| 服务端 | Nodejs | 用 JS 写后端 |
| 运维 | Docker、Linux | 容器化与系统管理 |
| 内功 | 计算机网络、算法、设计模式 | 面试必考，决定上限 |

---

##  目录结构

```
code-notes-kb/
├── [知识模块]/               # 各知识模块（如 Flutter、Vue3、计算机网络 等）
│   ├── 00-html/              # HTML 题卡统一存放
│   │   ├── index.html        # 模块索引页
│   │   └── [模块名].html     # 各模块题卡
│   ├── 01-[子模块]/           # 子模块目录
│   │   └── images/            # 卡片截图（本地生成，不纳入版本控制）
│   ├── README.md              # 模块说明
│   └── index.html             # 知识库索引页
├── scripts/                   # 统一工具脚本
│   ├── screenshot-all.js      # 全库/单库截图
│   ├── generate-all.js        # 索引/水印/速查表生成
│   └── scan-all-issues.js     # 全库质量扫描
├── commitlint.config.cjs      # 提交信息规范
├── package.json
├── LICENSE                    # MIT 许可证
└── README.md
```

---

##  环境要求

| 依赖 | 版本要求 | 说明 |
|------|----------|------|
| Node.js | >= 16.0 | 运行脚本环境 |
| yarn | >= 1.22 | 包管理器 |
| Edge / Chrome | 最新版 | 截图依赖（puppeteer-core） |

---

##  快速开始

### 查看题卡

1. 克隆仓库：`git clone https://gitee.com/template-warehouse/code-notes-kb.git`
2. 进入对应知识模块目录
3. 打开 `00-html/index.html` 查看题卡索引
4. 点击模块卡片进入详细题卡页面

### 本地生成卡片截图

本项目为开源项目，**不提交卡片截图**（体积过大）。克隆后需本地生成：

```bash
# 1. 安装依赖
yarn install

# 2. 全库截图（生成所有知识库的卡片图片）
node scripts/screenshot-all.js
# 或双击运行：
scripts/shot-all.bat

# 3. 单库截图（例如只截 Java）
node scripts/screenshot-all.js Java
# 或：
scripts/shot.bat Java

# 4. 重新生成索引/水印/速查表
node scripts/generate-all.js --all
# 或：
scripts/gen-index.bat

# 5. 全库质量扫描（检测废话模板词/注水短卡）
node scripts/scan-all-issues.js
# 或：
scripts/scan.bat
```

**截图规格**：视口 480×800、deviceScaleFactor 2（成品 896px 宽）、卡片 448px 居中、深色主题 #0a0a1a。

**依赖**：puppeteer-core + 本地 Edge 浏览器（`C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe`）。

---

##  题卡设计规范

| 项目 | 规范 |
|------|------|
| 宽度 | 540px（统一规格） |
| 配色 | card-blue / card-cyan / card-purple / card-orange 四种主题色循环 |
| 结构 | 题号 + 难度标签 + 中英文问题 + 参考答案 + 分节要点 + 代码示例 + 页脚 |
| 水印 | 作者：Forever 丿顾北-Byte |
| 难度标签 | 基础（绿色）\| 高频（黄色）\| 必考（红色）\| 进阶（蓝色） |

---

##  提交规范

本项目使用 [Conventional Commits](https://www.conventionalcommits.org/zh-hans/v1.0.0/) 规范，通过 Husky + commitlint 自动校验：

```
<type>(<scope>): <subject>

示例：
feat(flutter): 新增状态管理模块
fix(network): 修复 HTTP 缓存题卡代码错误
docs(readme): 更新快速开始说明
```

---

##  如何贡献

1. Fork 本仓库
2. 创建特性分支（`git checkout -b feature/your-feature`）
3. 提交更改（`git commit -m 'feat: add your feature'`）
4. 推送到分支（`git push origin feature/your-feature`）
5. 提交 Pull Request

> 新增题卡请遵循现有模块分类和题卡设计规范，确保内容质量与格式统一。

---

## ❓ 常见问题

**Q: 为什么仓库里没有图片？**
A: 卡片截图体积过大，已加入 `.gitignore`。克隆后运行 `yarn install` + `node scripts/screenshot-all.js` 即可本地生成。

**Q: 截图脚本报错怎么办？**
A: 确保已安装 Node.js >= 16 和 Edge/Chrome 浏览器。截图依赖 puppeteer-core，会自动调用本地浏览器。

**Q: 题卡内容有误如何反馈？**
A: 欢迎提交 [Issue](https://gitee.com/template-warehouse/code-notes-kb/issues/new) 或直接提交 Pull Request。

**Q: 如何新增一个技术栈的题卡？**
A: 在根目录下创建对应模块文件夹，按 `00-html/` 目录结构存放 HTML 题卡，参考现有模块格式即可。

---

##  参考资源

本知识库内容参考以下经典资料：

| 资源 | 说明 |
|------|------|
| 《JavaScript 权威指南》第 7 版 | JavaScript 核心知识体系 |
| 《Vue.js 设计与实现》 | Vue3 响应式原理与架构 |
| 《React 官方文档》 | React 组件与 Hooks |
| 《Flutter 官方文档》 | 跨平台 UI 框架 |
| 《Spring Boot 实战》 | Java 企业级开发 |
| 《算法导论》 | 数据结构与算法基础 |
| 《设计模式：可复用面向对象软件的基础》 | 23 种经典设计模式 |
| 《计算机网络：自顶向下方法》 | 网络协议与原理 |

---

##  更新日志

| 日期 | 内容 |
|------|------|
| 2026-08-28 | 新增 JavaScript 权威指南补录（4 轮），总计 3285 张题卡 |
| 2026-08-28 | README 全面升级：新增学习路线、FAQ、贡献指南等 |
| 持续更新 | 各模块题卡持续补充中... |

---

##  许可证

本项目采用 MIT 许可证，详见 [LICENSE](LICENSE) 文件。

---

## 👨‍ 作者

**Forever 丿顾北-Byte**

- Gitee: [template-warehouse](https://gitee.com/template-warehouse)

---

**Code Notes KB** · 系统化学习 · 实战导向 · 持续更新