详解如何搭建mpvue框架搭配vant组件库的小程序项目

下面是详解如何搭建mpvue框架搭配vant组件库的小程序项目的完整攻略。

步骤1：准备工作

在开始搭建之前，我们需要准备以下工具和环境：

1. Node.js LTS版本
2. mpvue-cli脚手架工具
3. Vant Weapp组件库

如果你已经安装好了Node.js和mpvue-cli，可以直接通过以下命令安装Vant Weapp：

npm i vant-weapp -S --production

步骤2：创建项目

接下来，我们可以通过mpvue-cli创建我们的小程序项目。在安装mpvue-cli之后，执行以下命令：

mpvue init my-project

这里我以“my-project”为例，你可以使用自己的项目名称。在创建过程中，选择“使用vant”模板，具体操作如下：

1. 选择自己的项目名称
2. 选择小程序模板
3. 选择“使用vant”模板
4. 安装项目依赖

cd my-project
npm run dev

在执行以上命令后，你将会看到mpvue-cli已经创建了一个基于vant的小程序模板，并启动了项目。此时我们可以在微信开发者工具中打开项目并预览。

步骤3：引入Vant Weapp

在上一步中，我们已经将vant组件库集成到了项目模板中，因此我们可以直接在页面中使用Vant Weapp组件。例如，在/pages/index.vue文件中：

<template>
  <view class="container">
    <van-button type="primary" @click="clickHandler">Button</van-button>
  </view>
</template>

<script>
export default {
  methods: {
    clickHandler() {
      wx.navigateTo({
        url: '/pages/logs/main'
      })
    }
  }
}
</script>

<style>
@import "~vant-weapp/dist/style/index.wxss";
.container {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
}
</style>

在上面的代码中，我们引入了<van-button>组件，并在点击按钮时跳转到了/pages/logs/main页面。

步骤4：构建和发布小程序

在完成上述过程后，我们需要对项目进行构建并发布到小程序平台。执行以下命令：

npm run build

执行完毕后，我们可以在dist目录下找到构建好的小程序代码。我们需要将该文件上传到小程序平台，具体操作可以参考微信小程序官方文档。

至此，完整攻略结束。

示例1：

在/pages/index.vue中添加一个<van-field>组件，实现一个简单的登录页面。

<template>
  <view class="container">
    <van-field label="用户名" v-model="username" placeholder="请输入用户名" />

    <van-field type="password" label="密码" v-model="password" placeholder="请输入密码" />

    <van-button type="primary" @click="loginHandler">登录</van-button>
  </view>
</template>

<script>
export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    loginHandler () {
      // ... 登录逻辑 ...
      wx.showToast({ title: '登录成功' })
    }
  }
}
</script>

示例2：

在/pages/logs/main.vue中添加一个<van-popup>组件和一个<van-calendar>组件，实现一个日历选择器。

<template>
  <view>
    <van-popup v-model="showCalendar" position="bottom" :style="{ height: '400px' }">
      <van-calendar v-model="selectedDate" @confirm="calendarConfirmHandler" />
    </van-popup>

    <van-field title="选择日期" readonly @click="showCalendar = true" :value="selectedDate" />
  </view>
</template>

<script>
export default {
  data () {
    return {
      showCalendar: false,
      selectedDate: ''
    }
  },
  methods: {
    calendarConfirmHandler ({ detail }) {
      this.showCalendar = false
      this.selectedDate = detail
    }
  }
}
</script>