README.md 4.66 KB

Raw Blame History Permalink



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）


下载地址: https://zealuser.com/downloads/


方案 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 官方示例
NutUI 组件示例
Vue 3 官方文档
TailwindCSS 文档


🔄 文档更新

记录文档更新时间，方便追踪：


Taro 版本: 4.1.11

NutUI 版本: 4.3.14

最后更新: 2026-02-10