微信小程序 基础 - 17 （vant组件库的使用）

安装vant组件库

步骤一 通过 npm 安装

        进入项目根目录， 执行以下命令，初始化npm， 安装vant：

cd xxxx   #进入文件夹目录
cloudnpm init    # 一路回车  初始化npm  将会生成package.json
npm i @vant/weapp -S --production    # 安装vant

步骤二 修改 app.json

        将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

步骤三 修改 project.config.json

        手动在 xzyycloud项目的根目录project.config.json 内修改如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

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

步骤四 构建 npm 包

        点击小程序开发工具菜单栏中：工具 -- 构建npm, 将下载的vant打包构建到miniprogram目录下， 构建成功后, 将会在miniprogram目录下出现miniprogram_npm目录。里面存储着打包好的vant源代码。

步骤五 使用组件库

1. 在页面中, 引入需要使用的vant组件.(官方文档中有引入的代码).

2. 在wxml中直接使用即可.