首先先说明下Vant Weapp是一种轻量、可靠的小程序UI组件库,使用网址为:https://youzan.github.io/vant-weapp
打开网址我们可以看到Vant Weapp的安装方式,接下来对Vant Weapp的配置详细介绍下
- 打开小程序项目,右键点击miniprogram----->在终端打开,这里也可以选在在外部终端打开,效果一样的
- 在打开的界面输入npm init
然后直接enter,默认配置,知道弹出yes,再次enter即可
这时候我们会发现miniprogram包下多了个package.json - 继续在终端中输入Vant Weapp网站上提供的安装方式,即在终端里输入
npm i @vant/weapp -S --production即可 - 然后我们需要构建npn
在项目界面顶部点击工具----->构建npm,这时候我们会发现在miniprogram包底下多了个miniprogram-npm包,说明构建成功 - 然后我们需要在项目界面右上角点击详情----->本地设置----->使用npm模块打勾
- 测试代码
随便选择Vant Weapp组件在项目界面中使用测试效果,但是需要注意的是,这里的组件应该要先引入才能够使用。这里我选择引入button
先将引入操作配置在我们的项目中,打开pages包下的,你需要引入组件的页面的json文件,将配置插入即可
然后再wxtm页面就可以使用组件代码了