Mpvue中使用Vant Weapp组件库的方法步骤

使用Vant Weapp组件库的方法步骤：

1. 安装Vant Weapp

在cmd中进入mpvue项目根目录，执行以下命令进行安装：

npm install vant-weapp -S --production

1. 在 App.vue 中引入 Vant Weapp

在 App.vue 的 script 标签中如下添加：

import Vant from 'vant-weapp'
import 'vant-weapp/dist/vant-css/index.css'

export default {
  components: {
    //...
  },
  // 引入 Vant Weapp
  Vant,
  // ...
}

1. 在编译配置文件中加入 Vant Weapp

在项目根目录中找到 build/webpack.base.conf.js 文件，加入如下内容：

global.process = { 
  env: { 
    NODE_ENV: '"production"' 
  } 
};

注意要放在文件的顶部。

1. 引入所需组件

根据需求引入需要的组件，例如：

<van-button type="primary" @click="submit">提交</van-button>
<van-dialog
  :show="showDialog"
  title="提示"
  message="确定提交吗？"
  :confirm-button-text='confirmButtonText'
  :cancel-button-text='cancelButtonText'
  @confirm="onConfirm"
  @cancel="onCancel"
/>

示例一：

在index.vue中引入vant-weapp中的toast组件

<template>
  <div>
    <van-button @click="showToast">点我有惊喜</van-button>
  </div>
</template>
<script>
  export default {
    methods:{
      showToast(){
        wx.showToast({
          title: '成功',
          icon: 'success',
          duration: 2000
        })
      }
    }
  }
</script>

示例二：

在index.vue中引入vant-weapp中的dialog组件

<template>
  <div>
    <van-button @click="showDialog">提交</van-button>
    <van-dialog
      :show="showDialog"
      title="提示"
      message="确定提交吗？"
      :confirm-button-text="'提交'"
      :cancel-button-text="'取消'"
      @confirm="onConfirm"
      @cancel="onCancel"
    />
  </div>
</template>
<script>
  export default {
    data() {
      return {
        confirmButtonText: '提交',
        cancelButtonText: '取消',
        showDialog: false
      }
    },
    methods: {
      showDialog() {
        this.showDialog = true;
      },
      onConfirm() {
        console.log('提交');
      },
      onCancel() {
        console.log('取消');
      }
    }
  }
</script>

以上是使用Vant Weapp组件库的详细步骤及两个示例。