mpvue将vue项目转换为小程序

将Vue项目转换为微信小程序有两种方式：

1. 使用mpvue框架

mpvue是一款基于Vue的小程序开发框架，它提供了一套完整的Vue.js语法支持，并扩展了微信小程序原生的API和组件。下面是使用mpvue将Vue项目转换为微信小程序的步骤：

（1）安装mpvue-cli工具

npm install –g mpvue-cli

（2）创建mpvue项目

mpvue init my-project

（3）进入项目根目录安装依赖

cd my-project
npm install

（4）开发和构建

在项目的src目录下编写Vue代码，然后使用以下命令进行构建：

npm run dev # 开发环境
npm run build # 生产环境

（5）预览和发布

使用微信开发者工具打开dist目录，即可进行预览和发布。需要注意的是，发布前需要进行微信小程序的注册和认证。

1. 使用WePY框架

WePY是一款类似于Vue的小程序开发框架，它提供了类Vue的语法和组件，同时也支持原生小程序的API。下面是使用WePY将Vue项目转换为微信小程序的步骤：

（1）安装WePY-cli工具

npm install wepy-cli –g

（2）创建WePY项目

wepy init std my-project

（3）进入项目根目录安装依赖

cd my-project
npm install

（4）开发和构建

在项目的src目录下编写WePY代码，然后使用以下命令进行构建：

npm run dev # 开发环境
npm run build # 生产环境

（5）预览和发布

使用微信开发者工具打开dist目录，即可进行预览和发布。需要注意的是，发布前需要进行微信小程序的注册和认证。

示例1：

我们使用mpvue框架来实现一个简单的小程序，实现表单验证。代码如下：

<template>
  <div>
    <input v-model="username" placeholder="请输入用户名">
    <input v-model="password" placeholder="请输入密码" type="password">
    <button @click="login">登录</button>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        username: '',
        password: ''
      }
    },
    methods: {
      login () {
        if (!this.username || !this.password) {
          wx.showToast({
            title: '用户名或密码不能为空',
            icon: 'none'
          })
        } else {
          // 提交数据
        }
      }
    }
  }
</script>

示例2：

我们使用WePY框架来实现一个简单的小程序，实现表单验证。代码如下：

<template>
  <div>
    <input v-model="username" placeholder="请输入用户名">
    <input v-model="password" placeholder="请输入密码" type="password">
    <button @click="login">登录</button>
  </div>
</template>

<script>
  import wepy from 'wepy'

  export default class Index extends wepy.page {
    data = {
      username: '',
      password: ''
    }

    methods = {
      login () {
        if (!this.username || !this.password) {
          wx.showToast({
            title: '用户名或密码不能为空',
            icon: 'none'
          })
        } else {
          // 提交数据
        }
      }
    }
  }
</script>