在微信小程序中使用Vant组件库

Vant组件库

安装Vant组件库的必要步骤:

1.下载Vant。

2.通过小程序开发工具构建npm,将下载好的Vant源码编译到小程序项目中，否则是不会带着Vant一起打包编译的。

初始化配置vant的详细步骤：

1.通过npm安装

#进入小程序项目根目录下  使用cmd执行以下的命令
npm init #一路回车即可生成package.json文件 对项目进行初始化
npm i @vant/weapp -S --production

2.修改app.json

将app.json中的"style":"v2"去除。

3.修改project.config.json:

{
    ...
    "setting":{
        ...
        "packNpmManually":true,
        "packNpmRelationList":[
            {
                "packageJsonPath":"./package.json",
                "miniprogramNpmDisDir":"./miniprogram"
            }
        ]
    }
}

4.使用组件

在json中引入组件：（在app.json或者index.json）全局使用或者局部使用

"usingComponents":{
    "van-button":"@vant/weapp/button/index"
}

在wxml页面中使用组件

<van-button type = "primary">文本</van-button>

基于 Vant组件库搭建 /me的 页面结构

1. 封面、头像、昵称。

2. cell 。