van-cell-group 这个类组件 怎么安装

在 UniApp 中使用 `van-cell-group`（Vant Weapp 的单元格组组件）需要先安装 Vant Weapp 组件库。以下是完整的安装和使用步骤：

---

### **1. 安装 Vant Weapp**
#### 方式一：通过 npm 安装（推荐）
```bash
# 在项目根目录执行：
npm install @vant/weapp -S --production
```

#### 方式二：通过下载源码
从 [Vant Weapp GitHub](https://github.com/youzan/vant-weapp) 下载 `dist` 目录，复制到项目 `src/wxcomponents/vant` 下

---

### **2. 配置 UniApp**
#### 在 `pages.json` 中配置组件路径
```json
{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^van-(.*)": "@/wxcomponents/vant/$1/index"  // 如果使用 npm 安装
      // 或
      "^van-(.*)": "@/wxcomponents/vant-weapp/dist/$1/index"  // 如果手动下载
    }
  }
}
```

#### 配置微信小程序使用 npm
在微信开发者工具中：
1. 点击菜单栏 `工具` -> `构建 npm`
2. 勾选 `使用 npm 模块`

---

### **3. 使用 van-cell-group 组件**
#### 基本用法
```html
<template>
  <van-cell-group>
    <van-cell title="单元格标题" value="内容" />
    <van-cell title="单元格标题" value="内容" label="描述信息" />
  </van-cell-group>
</template>
```

#### 带边框的用法
```html
<van-cell-group border>
  <van-cell title="带边框的单元格" />
</van-cell-group>
```

---

### **4. 完整配置示例
#### `vue.config.js` 配置（可选）
```javascript
module.exports = {
  transpileDependencies: ['@vant/weapp']
}
```

#### `main.js` 引入样式（可选）
```javascript
import '@vant/weapp/dist/common/index.wxss'
```

---

### **5. 类型支持（TypeScript）**
在 `tsconfig.json` 中添加：
```json
{
  "compilerOptions": {
    "types": ["@vant/weapp/typings"]
  }
}
```

---

### **常见问题解决**
| 问题 | 解决方案 |
|------|----------|
| 组件未找到 | 检查 `easycom` 配置路径是否正确 |
| 样式不生效 | 确认已正确引入 Vant 样式文件 |
| npm 构建失败 | 删除 `miniprogram_npm` 后重新构建 |

---

### **组件属性说明**
| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| border | boolean | `true` | 是否显示外边框 |
| inset | boolean | `false` | 是否设置为圆角卡片风格 |

---

按照以上步骤操作后，`van-cell-group` 应该可以正常使用。如果仍有问题，可以检查微信开发者控制台是否有具体报错信息。