安装步骤:
步骤一: 通过npm安装指定版本vant
1、在项目空白处右键,有个在外部终端窗口打开,点击
出现以下窗口
2、在安装包的时候,需要保证项目里面有package.json文件。所以需要初始化一个包管理文件。
npm init -y
3、安装指定版本vant
> npm i @vant/weapp@1.3.3 -S --production
步骤二: 构建npm包
1、打开微信开发者工具,点击工具>>构建npm,构建完成后,即可引入组件
2、点击上图的确定之后,还需要点击右上角的详情,选择本地设置,勾选 使用npm模块
我的是新版本 没有这一项 就不需要手动勾选了。
步骤三:修改app.json
《注意》去除该文件中的 style:'v2',小程序的新版基础组件强行加上了许多样式,难以去除,不关闭的话将造成部分组件样式混乱。
此时就安装vant成功了~
步骤四:如何使用
安装完vant组件库之后,可以在app.json的usingComponents节点中引入需要的组件,即可在wxml中直接使用组件。
(1)按需引入:
在对应的page页面的 .json文件中的usingComponents属性中通过路径找到@vant引入你想使用的组件。我的vant是位于下面目录中。
引入:
(2)全局引入
在app.json文件中引入。缺点就是会给项目启动造成压力,最好还是按需引入。