API 文档缓存
本目录用于缓存 Taro 和 NutUI 的核心文档，方便离线查询。
📚 在线文档
Taro 官方文档
- Taro 官网: https://docs.taro.zone/
- Taro Vue 3: https://docs.taro.zone/docs/vue3
- Taro 组件: https://docs.taro.zone/docs/components
- Taro API: https://docs.taro.zone/docs/apis
- Taro 最佳实践: https://docs.taro.zone/docs/best-practices
NutUI 官方文档
- NutUI 官网: https://nutui.jd.com/h5/#/
- NutUI Taro 版本: https://nutui.jd.com/taro/
- NutUI 组件列表: https://nutui.jd.com/taro/component.html
🔧 本地缓存方案
方案 1: 使用文档工具（推荐）
DevDocs
# 安装 DevDocs（macOS）
brew install devdocs
# 启动服务
devdocs
# 在浏览器访问
open http://localhost:9292
Zeal（Windows/Linux）
方案 2: 离线文档网页
Taro PDF 文档
# 创建 docs/pdf 目录
mkdir -p pdf
# 下载 Taro Vue 3 PDF（如果官方提供）
# 从 https://docs.taro.zone/ 下载
使用 wget 镜像整个站点
# 镜像 Taro 文档（仅用于学习）
wget \
--recursive \
--no-clobber \
--page-requisites \
--html-extension \
--convert-links \
--restrict-file-names=windows \
--domains docs.taro.zone \
--no-parent \
docs.taro.zone/docs/vue3
# 镜像 NutUI 文档
wget \
--recursive \
--no-clobber \
--page-requisites \
--html-extension \
--convert-links \
--restrict-file-names=windows \
--domains nutui.jd.com \
--no-parent \
nutui.jd.com/taro/
方案 3: 创建常用组件速查表
在项目中维护常用的组件使用示例，例如：
nut-button 常用用法
<!-- 基础按钮 -->
<nut-button type="primary">主要按钮</nut-button>
<!-- 次要按钮（描边） -->
<nut-button plain type="primary">次要按钮</nut-button>
<!-- 独占一行 -->
<nut-button type="primary" block>独占一行</nut-button>
<!-- 自定义样式 -->
<nut-button
type="primary"
color="#2563EB"
class="!h-[88rpx] !rounded-[16rpx] !text-[30rpx]"
>
自定义样式
</nut-button>
### 方案 4: 使用 VSCode 插件
推荐安装以下插件：
1. **Taro Snippets**
- 提供 Taro 代码片段
- 自动补全组件和 API
2. **Vue 3 Snippets**
- Vue 3 代码片段
3. **Inline HTML**
- 直接在编辑器中预览 HTML/CSS
## 📝 常用属性速查
### nut-button 常用属性
| 属性 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| type | 类型 | `'default' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'danger' \| 'light'` | `'default'` |
| size | 大小 | `'large' \| 'normal' \| 'small' \| 'mini'` | `'normal'` |
| plain | 是否为描边按钮 | `boolean` | `false` |
| block | 是否为块级按钮（独占一行） | `boolean` | `false` |
| color | 自定义颜色 | `string` | - |
| disabled | 是否禁用 | `boolean` | `false` |
| loading | 是否加载中 | `boolean` | `false` |
### nut-popup 常用属性
| 属性 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| visible | 是否显示 | `boolean` | `false` |
| position | 弹出位置 | `'top' \| 'right' \| 'bottom' \| 'left' \| 'center'` | `'center'` |
| round | 是否圆角 | `boolean` | `false` |
| close-on-click-overlay | 点击遮罩是否关闭 | `boolean` | `true` |
| safe-area-inset-bottom | 是否适配底部安全区 | `boolean` | `false` |
## 🚀 快速查询
### grep 搜索现有用法
```bash
# 搜索 nut-button 的用法
grep -r "nut-button" src/ --include="*.vue" -A 3 -B 1
# 搜索 nut-popup 的用法
grep -r "nut-popup" src/ --include="*.vue" -A 5 -B 1
# 搜索 TailwindCSS 类名
grep -r "!h-\[88rpx\]" src/ --include="*.vue"
# 搜索特定的样式模式
grep -r "flex-1.*gap-3" src/ --include="*.vue"
提取组件使用示例
从现有代码中提取常用模式：
# 查找所有按钮样式
grep -r "nut-button" src/components/plan/ -A 10
# 查找所有弹窗配置
grep -r "PlanPopupNew" src/ -A 5 -B 5
💡 最佳实践
- 查文档优先：遇到不熟悉的组件，先查官方文档
- 搜索现有代码：项目中可能有类似的用法
- 记录常用模式：将常用代码片段保存到文档
- 使用类型提示：TypeScript 可以提示可用的属性
📚 推荐学习资源
🔄 文档更新
记录文档更新时间，方便追踪：
- Taro 版本: 4.1.11
- NutUI 版本: 4.3.14
- 最后更新: 2026-02-10