微信小程序之引入vant-weapp组件库步骤非常详细(云开发)

一、查看组件库样式:

vant-weapp组件库链接:https://youzan.github.io/vant-weapp/#/intro

二、初始化package.json文件、

微信小程序之引入vant-weapp组件库步骤非常详细(云开发)_第1张图片
微信小程序之引入vant-weapp组件库步骤非常详细(云开发)_第2张图片
微信小程序之引入vant-weapp组件库步骤非常详细(云开发)_第3张图片
微信小程序之引入vant-weapp组件库步骤非常详细(云开发)_第4张图片

三、安装对应的vant-weapp组件库包:

继续输入命令:npm i vant-weapp -S --production导入包
微信小程序之引入vant-weapp组件库步骤非常详细(云开发)_第5张图片
微信小程序之引入vant-weapp组件库步骤非常详细(云开发)_第6张图片
微信小程序之引入vant-weapp组件库步骤非常详细(云开发)_第7张图片
微信小程序之引入vant-weapp组件库步骤非常详细(云开发)_第8张图片

四、使用vant-weapp组件:

微信小程序之引入vant-weapp组件库步骤非常详细(云开发)_第9张图片
json代码演示:
“usingComponents”: {
“van-steps”: “path/to/vant-weapp/dist/steps/index”
}
在引入时要删掉path/to/与/dist

json:

{
  "usingComponents": {
    "van-steps": "vant-weapp/steps/index"
  }
}

wxml:


js:

Page({
  data: {
    active:0,
    steps: [
      {
        text: '已付款',
      },
      {
        text: '已发货',
      },
      {
        text: '完成交易',
      }
    ],
 }
})

五、效果:

在这里插入图片描述

你可能感兴趣的:(微信小程序)