安装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
源代码。
步骤五 使用组件库
-
在页面中, 引入需要使用的
vant
组件.(官方文档中有引入的代码). -
在
wxml
中直接使用即可.