# nfap9 的个人知识库

> 一个专注于前端技术的个人博客与知识库。
> 站点地址：https://nfap9.github.io

## 概览

- **文章总数**：15（博客 13 篇 + 笔记 2 条）
- **主要分类**：工程化、AI Coding、工具、Vue、JavaScript、网络
- **标签体系**：docker、docker-compose、容器化、部署、运维、工程化、claude-code、ai-coding、工具、ccswitch、国产模型、ui-guidelines、frontend、skill、设计规范、vue、typescript、element-plus、代码规范、设计系统、团队开发、mcp、agent、browser、cicd、git、commit、github-actions、源码、架构、vue3、虚拟DOM、diff、渲染器、Javascript、面试、问题汇总、响应式、原理、vue2、对比、算法、cors、跨域、同源策略、javascript、数据类型

## 最新内容

- [Docker 与 Docker Compose 实战指南](https://nfap9.github.io/blog/docker-compose-guide/) — 以 tenant-hub 项目为例，讲解 Docker 容器化与 Docker Compose 多容器编排的实际应用 (博客 · 工程化 · 2026-06-17)
- [Claude Code 实战笔记](https://nfap9.github.io/notes/claude-code-guide/) — Claude Code 接入国产模型、工程化配置与高效使用指南 (笔记 · 工程化 · 2026-06-17)
- [AI Coding：前端 UI 规范笔记](https://nfap9.github.io/blog/ai-coding-ui-guidelines/) — 前端在 AI Coding 中如何保证样式一致性——通过制定可被 AI 理解和遵循的 UI 规范体系，并将规范编码为 Skill 约束契约，让 Agent 写出的代码天然符合设计规范。 (博客 · AI Coding · 2026-06-16)
- [Vue 项目代码与 UI 规范：从团队约定到可落地实践](https://nfap9.github.io/blog/vue-project-code-guidelines/) — 总结一套面向 Vue + TypeScript + Element Plus 技术栈的项目级代码规范，覆盖组件架构、函数设计、TypeScript 约束、状态管理、API 请求层以及设计 Token 与布局模式，可直接作为团队开发约定与代码审查清单。 (博客 · 工程化 · 2026-06-16)
- [agent-browser Skill 速查](https://nfap9.github.io/notes/agent-browser-skill/) — 记录 agent-browser skill 的核心用法和常用命令 (笔记 · 工具 · 2025-05-19)
- [从手动到自动化：前端项目 Commit 规范与 CI/CD 发布实践](https://nfap9.github.io/blog/ci-cd-practice/) — 面向前端团队，从零搭建代码提交规范校验与自动化发布流水线，覆盖 Husky、Conventional Commits、语义化版本管理与 GitHub Actions 全链路 (博客 · 工程化 · 2025-03-28)
- [Vue 源码中的工程化设计：五个可复用的团队开发范式](https://nfap9.github.io/blog/vue-engineering-patterns/) — 从 Vue 源码中提炼五个可落地的工程化设计范式，覆盖架构分层、条件编译、测试策略、代码规范与发布自动化 (博客 · Vue · 2025-03-28)
- [Vue3 虚拟 DOM 与 Diff 算法](https://nfap9.github.io/blog/vue3-vdom-diff/) — 深入 Vue3 源码，解析虚拟 DOM 的实现机制与核心 Diff 算法的执行流程 (博客 · Vue · 2025-03-28)
- [生成器和可迭代对象](https://nfap9.github.io/blog/genetator-iterator/) — 学习js中的生成器和可迭代对象 (博客 · JavaScript · 2025-03-27)
- [关于vue的问题](https://nfap9.github.io/blog/vue-questions/) — Vue 常见问题汇总，包含基础与进阶知识点索引 (博客 · Vue · 2024-03-15)
- [vue响应式原理](https://nfap9.github.io/blog/vue-reactivity/) — 从零实现一个简易 Vue，深入理解 Vue 响应式系统的核心原理 (博客 · Vue · 2024-03-10)
- [vue3和vue2的区别](https://nfap9.github.io/blog/vue3-vs-vue2/) — 全面解析 Vue3 与 Vue2 的差异，包括响应式原理、Composition API、编译优化等 (博客 · Vue · 2024-03-05)
- [Vue2和Vue3中diff算法对比](https://nfap9.github.io/blog/vue-diff/) — 详细对比 Vue2 和 Vue3 的 diff 算法实现原理 (博客 · Vue · 2024-03-01)
- [跨域](https://nfap9.github.io/blog/cross_origin_guide/) — 深入理解浏览器的同源策略及多种跨域解决方案 (博客 · 网络 · 2024-01-20)
- [js中判断数据类型的方法](https://nfap9.github.io/blog/js-type-check/) — 介绍 JavaScript 中判断数据类型的多种方法，包括 typeof、constructor、instanceof、Object.prototype.toString 等 (博客 · JavaScript · 2024-01-15)

## 按分类索引

### 工程化

- [Docker 与 Docker Compose 实战指南](https://nfap9.github.io/blog/docker-compose-guide/) — 以 tenant-hub 项目为例，讲解 Docker 容器化与 Docker Compose 多容器编排的实际应用
- [Claude Code 实战笔记](https://nfap9.github.io/notes/claude-code-guide/) — Claude Code 接入国产模型、工程化配置与高效使用指南
- [Vue 项目代码与 UI 规范：从团队约定到可落地实践](https://nfap9.github.io/blog/vue-project-code-guidelines/) — 总结一套面向 Vue + TypeScript + Element Plus 技术栈的项目级代码规范，覆盖组件架构、函数设计、TypeScript 约束、状态管理、API 请求层以及设计 Token 与布局模式，可直接作为团队开发约定与代码审查清单。
- [从手动到自动化：前端项目 Commit 规范与 CI/CD 发布实践](https://nfap9.github.io/blog/ci-cd-practice/) — 面向前端团队，从零搭建代码提交规范校验与自动化发布流水线，覆盖 Husky、Conventional Commits、语义化版本管理与 GitHub Actions 全链路

### AI Coding

- [AI Coding：前端 UI 规范笔记](https://nfap9.github.io/blog/ai-coding-ui-guidelines/) — 前端在 AI Coding 中如何保证样式一致性——通过制定可被 AI 理解和遵循的 UI 规范体系，并将规范编码为 Skill 约束契约，让 Agent 写出的代码天然符合设计规范。

### 工具

- [agent-browser Skill 速查](https://nfap9.github.io/notes/agent-browser-skill/) — 记录 agent-browser skill 的核心用法和常用命令

### Vue

- [Vue 源码中的工程化设计：五个可复用的团队开发范式](https://nfap9.github.io/blog/vue-engineering-patterns/) — 从 Vue 源码中提炼五个可落地的工程化设计范式，覆盖架构分层、条件编译、测试策略、代码规范与发布自动化
- [Vue3 虚拟 DOM 与 Diff 算法](https://nfap9.github.io/blog/vue3-vdom-diff/) — 深入 Vue3 源码，解析虚拟 DOM 的实现机制与核心 Diff 算法的执行流程
- [关于vue的问题](https://nfap9.github.io/blog/vue-questions/) — Vue 常见问题汇总，包含基础与进阶知识点索引
- [vue响应式原理](https://nfap9.github.io/blog/vue-reactivity/) — 从零实现一个简易 Vue，深入理解 Vue 响应式系统的核心原理
- [vue3和vue2的区别](https://nfap9.github.io/blog/vue3-vs-vue2/) — 全面解析 Vue3 与 Vue2 的差异，包括响应式原理、Composition API、编译优化等
- [Vue2和Vue3中diff算法对比](https://nfap9.github.io/blog/vue-diff/) — 详细对比 Vue2 和 Vue3 的 diff 算法实现原理

### JavaScript

- [生成器和可迭代对象](https://nfap9.github.io/blog/genetator-iterator/) — 学习js中的生成器和可迭代对象
- [js中判断数据类型的方法](https://nfap9.github.io/blog/js-type-check/) — 介绍 JavaScript 中判断数据类型的多种方法，包括 typeof、constructor、instanceof、Object.prototype.toString 等

### 网络

- [跨域](https://nfap9.github.io/blog/cross_origin_guide/) — 深入理解浏览器的同源策略及多种跨域解决方案

## 按标签索引

- **docker**：Docker 与 Docker Compose 实战指南
- **docker-compose**：Docker 与 Docker Compose 实战指南
- **容器化**：Docker 与 Docker Compose 实战指南
- **部署**：Docker 与 Docker Compose 实战指南
- **运维**：Docker 与 Docker Compose 实战指南
- **工程化**：Docker 与 Docker Compose 实战指南、从手动到自动化：前端项目 Commit 规范与 CI/CD 发布实践、Vue 源码中的工程化设计：五个可复用的团队开发范式
- **claude-code**：Claude Code 实战笔记
- **ai-coding**：Claude Code 实战笔记、AI Coding：前端 UI 规范笔记、Vue 项目代码与 UI 规范：从团队约定到可落地实践
- **工具**：Claude Code 实战笔记
- **ccswitch**：Claude Code 实战笔记
- **国产模型**：Claude Code 实战笔记
- **ui-guidelines**：AI Coding：前端 UI 规范笔记
- **frontend**：AI Coding：前端 UI 规范笔记
- **skill**：AI Coding：前端 UI 规范笔记、agent-browser Skill 速查
- **设计规范**：AI Coding：前端 UI 规范笔记
- **vue**：Vue 项目代码与 UI 规范：从团队约定到可落地实践、Vue 源码中的工程化设计：五个可复用的团队开发范式、关于vue的问题、vue响应式原理、vue3和vue2的区别、Vue2和Vue3中diff算法对比
- **typescript**：Vue 项目代码与 UI 规范：从团队约定到可落地实践
- **element-plus**：Vue 项目代码与 UI 规范：从团队约定到可落地实践
- **代码规范**：Vue 项目代码与 UI 规范：从团队约定到可落地实践
- **设计系统**：Vue 项目代码与 UI 规范：从团队约定到可落地实践
- **团队开发**：Vue 项目代码与 UI 规范：从团队约定到可落地实践、Vue 源码中的工程化设计：五个可复用的团队开发范式
- **mcp**：agent-browser Skill 速查
- **agent**：agent-browser Skill 速查
- **browser**：agent-browser Skill 速查
- **cicd**：从手动到自动化：前端项目 Commit 规范与 CI/CD 发布实践
- **git**：从手动到自动化：前端项目 Commit 规范与 CI/CD 发布实践
- **commit**：从手动到自动化：前端项目 Commit 规范与 CI/CD 发布实践
- **github-actions**：从手动到自动化：前端项目 Commit 规范与 CI/CD 发布实践
- **源码**：Vue 源码中的工程化设计：五个可复用的团队开发范式、Vue3 虚拟 DOM 与 Diff 算法、vue响应式原理
- **架构**：Vue 源码中的工程化设计：五个可复用的团队开发范式
- **vue3**：Vue3 虚拟 DOM 与 Diff 算法、vue3和vue2的区别
- **虚拟DOM**：Vue3 虚拟 DOM 与 Diff 算法、Vue2和Vue3中diff算法对比
- **diff**：Vue3 虚拟 DOM 与 Diff 算法、Vue2和Vue3中diff算法对比
- **渲染器**：Vue3 虚拟 DOM 与 Diff 算法
- **Javascript**：生成器和可迭代对象
- **面试**：关于vue的问题
- **问题汇总**：关于vue的问题
- **响应式**：vue响应式原理
- **原理**：vue响应式原理
- **vue2**：vue3和vue2的区别
- **对比**：vue3和vue2的区别
- **算法**：Vue2和Vue3中diff算法对比
- **cors**：跨域
- **跨域**：跨域
- **同源策略**：跨域
- **javascript**：js中判断数据类型的方法
- **数据类型**：js中判断数据类型的方法

## Agent 使用指引

如需基于全文内容进行深度分析或问答，请访问 https://nfap9.github.io/llms-full.txt 获取所有文章和笔记的完整 Markdown 内容。