微信小程序引入vant

第一步新建小程序工程web

第二步初始化
cmd方式进入小程序目录 输入npm init 回车

第三步安装vant，按照官网说的 npm i @vant/weapp -S --production

第四步：设置工程


第五步：在工程中使用vant
在app.wxss中引入样式npm

@import 'miniprogram_npm/@vant/weapp/common/index.wxss';

page {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,
    Segoe UI, Arial, Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei',
    sans-serif;
}

在小程序页面index.json中使用组件json

"usingComponents": {
    "van-button": "@vant/weapp/button/index",
    "van-toast": "@vant/weapp/toast/index"
  }

index.wxml代码小程序

<van-button type="primary" class="my-button" bind:click="btn1Click">按钮</van-button>
<view class="van-multi-ellipsis--l2">
天太热多吃冰棒
</view>
<van-toast id="van-toast" />

index.wxss代码app

.van-button--primary {
  font-size: 36px!important;
  background-color: pink!important;
}
.my-button {
  --button-border-radius: 10px;
  --button-default-color: #f2f3f5;
}

index.js代码xss

import Toast from '@vant/weapp/toast';
Page({
....
btn1Click:function(){
    Toast('我是提示文案，建议不超过十五字~');
  },
....
})