小程序使用vant--基础

小程序使用vant–基础

1.安装

首先创建好小程序项目后，使用npm初始化创建package.json文件，然后使用npm等安装vant

初始化：npm init -y

npm 安装：npm i @vant/weapp -S --production

2.小程序工具的设置

在本地设置中勾选使用npm

在工具上选择构建npm，待构建完成

3.使用

首先这些都是一些组件，要使用先要引入他们，为了方便，可以直接在app.json全局引入。如button组件

app.json

“usingComponents”: {

“van-button”: “@vant/weapp/button/index”

}

index.html

默认按钮

主要按钮

效果：

4.提示

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

如有冲突或不对的地方，欢迎指正！！！