mpvue将vue项目转换为小程序

mpvue是一个基于Vue.js进行开发的小程序框架，可以将已有的Vue.js项目快速转换为小程序项目。下面是mpvue将Vue.js项目转换为小程序的简要攻略：

1. 安装和初始化mpvue

在终端中执行以下命令安装mpvue：

npm install -g vue-cli
vue init mpvue/mpvue-quickstart my-project

其中，“my-project”为项目名称，可以根据需要修改。

2. 修改配置文件

进入刚才创建的项目文件夹，修改“project.config.json”文件，添加小程序AppID和项目名称。

3. 安装依赖

在终端中进入创建的项目文件夹，运行以下命令安装依赖：

npm install

4. 转换项目

在终端中运行以下命令，将Vue.js项目转换为小程序项目：

npm run dev

在浏览器中访问“http://localhost:8080”，就可以看到转换后的小程序项目了。

示例1：

以下是一个简单的Vue.js组件：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: 'Hello World!',
      count: 0
    }
  },
  methods: {
    increment () {
      this.count++
    }
  }
}
</script>

可以将这个组件按照mpvue的格式进行修改，然后进行转换，即可得到一个小程序组件：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
export default {
  mpType: 'component',
  data () {
    return {
      message: 'Hello World!',
      count: 0
    }
  },
  methods: {
    increment () {
      this.count++
    }
  }
}
</script>

示例2：

下面是一个简单的Vue.js页面：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increment">+1</button>
    <router-link to="/about">About</router-link>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: 'Hello World!',
      count: 0
    }
  },
  methods: {
    increment () {
      this.count++
    }
  }
}
</script>

同样也可以将这个页面按照mpvue的格式进行修改，然后进行转换，即可得到一个小程序页面：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increment">+1</button>
    <navigator url="/pages/about">About</navigator>
  </div>
</template>

<script>
export default {
  mpType: 'page',
  data () {
    return {
      message: 'Hello World!',
      count: 0
    }
  },
  methods: {
    increment () {
      this.count++
    }
  }
}
</script>

以上就是将Vue.js项目转换为小程序的简要攻略和两个示例说明。