uni-app—vscode—微信小程序使用vant(图文)

1、创建文件夹

src下创建wxcomponents文件夹
wxcomponents文件夹下再创建vant文件夹
uni-app—vscode—微信小程序使用vant(图文)_第1张图片

2、下载

在https://github.com/youzan/vant-weapp下载最新zip
下载完成后解压,将解压后的文件中的dist文件夹放入刚刚创建好的vant文件夹下
uni-app—vscode—微信小程序使用vant(图文)_第2张图片

3、在App.vue中引入样式

uni-app—vscode—微信小程序使用vant(图文)_第3张图片

@import "/wxcomponents/vant/dist/common/index.wxss"

4、在pages.json文件中引入组件

uni-app—vscode—微信小程序使用vant(图文)_第4张图片

"usingComponents": {
  "van-button": "/wxcomponents/vant/dist/button/index"
}

如图我在index也就是首页引入了button组件

5、重新运行

npm run dev:mp-weixin

如果不重新运行,使用vant组件会报错
在这里插入图片描述

6、使用

我在第四步的首页(index)页面引入button组件
因此我在该页面使用button组件

<van-button type="warning">警告按钮</van-button>

uni-app—vscode—微信小程序使用vant(图文)_第5张图片

你可能感兴趣的:(uni-app,小程序使用vant)