mpvue+vant app搭建微信小程序的方法步骤

下面是“mpvue+vant app搭建微信小程序的方法步骤”的完整攻略：

一、mpvue和vant的安装

• 安装webpack: npm i webpack -g
• 使用webpack脚手架工具初始化mpvue项目：vue init mpvue/mpvue-quickstart my-project
• 安装vant: npm i vant -S

二、配置mpvue和vant

• 修改main.js文件，导入vant的样式和组件

  ```javascript
  import Vue from 'vue'
  import App from './App'
  import Vant from 'vant'
  import 'vant/lib/vant-css/index.css'

  Vue.use(Vant)
  Vue.config.productionTip = false

  App.mpType = 'app'

  const app = new Vue({
  ...App
  })
  app.$mount()
  ```

• 使用Vant的组件，比如Button和NavBar

  html
<template>
<div class="container">
<van-nav-bar title="首页" />
<van-button type="primary">主要按钮</van-button>
</div>
</template>

三、编译小程序

• 运行命令： npm run dev:mp-weixin，该命令可以在本地开启对应的开发环境服务器
• 生成dist目录： 该命令的输出目录为/dist/${target}，其中${target}为编译目标，执行命令后会在dist目录下生成对应平台的文件
• 使用微信web开发者工具打开dist目录，即可看到生成的小程序界面

示例一：使用Vant的Grid组件展示数据

<template>
  <van-grid>
    <van-grid-item v-for="(item, index) in list" :text="item.text" :icon="item.icon" :key="index" />
  </van-grid>
</template>

<script>
  export default {
    data() {
      return {
        list: [
          { text: 'Text 1', icon: 'https://img.yzcdn.cn/vant/icon.png' },
          { text: 'Text 2', icon: 'https://img.yzcdn.cn/vant/icon.png' },
          { text: 'Text 3', icon: 'https://img.yzcdn.cn/vant/icon.png' },
          { text: 'Text 4', icon: 'https://img.yzcdn.cn/vant/icon.png' },
          { text: 'Text 5', icon: 'https://img.yzcdn.cn/vant/icon.png' }
        ]
      }
    }
  }
</script>

示例二：使用Vant的Tab组件完成页面切换

<template>
  <div>
    <van-tabs v-model="active">
      <van-tab title="标签页1" name="1">
        <p>这是页面1</p>
      </van-tab>
      <van-tab title="标签页2" name="2">
        <p>这是页面2</p>
      </van-tab>
      <van-tab title="标签页3" name="3">
        <p>这是页面3</p>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        active: '1'
      }
    }
  }
</script>

以上就是使用mpvue和vant app搭建微信小程序的方法步骤的完整攻略，希望能够对你有所帮助。