# vant-template

**Repository Path**: hahalele/vant-template

## Basic Information

- **Project Name**: vant-template
- **Description**: 微信小程序集成vant
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-22
- **Last Updated**: 2025-10-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### vant开发微信小程序
1. 新建项目普通模板
2. 初始化 npm init
3. 添加vant 
npm i @vant/weapp -S --production
4. 工具-构建npm
5. 将 app.json 中的 "style": "v2" 去
6. typescript 支持
npm i -D miniprogram-api-typings
7. 在 tsconfig.json 中增加如下配置，以防止 tsc 编译报错
请将path/to/node_modules/@vant/weapp修改为项目的 node_modules 中 @vant/weapp 所在的目录。
```
{
  ...
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "types": ["miniprogram-api-typings"],
    "paths": {
      "@vant/weapp/*": ["path/to/node_modules/@vant/weapp/dist/*"]
    },
    "lib": ["ES6"]
  }
}

```

8.引入组件
```
// app.json
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}
```

9.使用

引入组件后，可以在 wxml 中直接使用组件
```
<van-button type="primary">按钮</van-button>
```