小程序 | Vue小程序开发框架：MPvue与UniApp深度解析

目录

一、MPvue框架解析

核心特性

适用场景

二、uni-app框架解析

核心特性

适用场景

三、框架对比与选择建议

---

在Vue小程序开发领域，mpvue和uni-app是两款备受瞩目的框架。本文将详细介绍这两款框架的核心特性、适用场景及优缺点，帮助开发者根据项目需求做出更合适的选择。

一、MPvue框架解析

核心特性

在开发小程序时，使用mpvue是一个不错的选择，因为它基于Vue.js，使得开发者可以利用Vue的生态和语法。

mpvue是美团点评推出的开源项目，专为微信小程序开发设计。它通过修改Vue.js的runtime和compiler实现，使其能够运行在小程序环境中，从而为小程序开发引入了整套Vue.js开发体验。其主要特性包括：

• 组件化开发能力：提高代码复用性，便于维护。
• 完整的Vue.js开发体验：支持Vue的指令、生命周期等，降低学习成本。
• Vuex数据管理方案：方便构建复杂应用，管理应用状态。
• 快捷的webpack构建机制：支持自定义构建策略和开发阶段的hotReload，提升开发效率。
• npm外部依赖支持：方便引入第三方库，扩展应用功能。

适用场景

mpvue适合专注于微信小程序开发，且希望深度集成Vue.js的开发者。然而，需要注意的是，mpvue仅支持微信小程序，且不再更新，社区活跃度不高。

代码示例

下面将通过一个简单的示例来展示如何使用mpvue来搭建一个小程序。

步骤 1: 环境准备

首先，确保你的开发环境已经安装了Node.js和npm。然后，你需要全局安装mpvue。

npm install -g mpvue

步骤 2: 创建项目

使用mpvue命令行工具创建一个新项目。

mpvue init my-project

这里my-project是你项目的名称，你可以根据需要更改它。

步骤 3: 进入项目目录

cd my-project

步骤 4: 安装依赖

​​​​​​​npm install

步骤 5: 编写代码

在src目录下，你会找到几个文件，如App.vue和main.js。你可以开始编写你的小程序代码了。

示例：修改App.vue

<template>
  <div class="container">
    <p>{{ message }}</p>
    <button @click="updateMessage">点击我</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, mpvue!'
    }
  },
  methods: {
    updateMessage() {
      this.message = '消息已更新';
    }
  }
}
</script>

<style>
.container {
  text-align: center;
  margin-top: 100px;
}
</style>

步骤 6: 编译并预览小程序

在开发过程中，你可以使用以下命令来编译并预览小程序：

npm run dev

这将在浏览器中打开一个窗口，显示你的小程序。对于微信小程序，你可以使用微信开发者工具来预览和调试：

1. 在微信开发者工具中新建项目。
2. 选择你的项目目录。
3. 选择小程序的项目类型为"mpvue"。
4. 点击确定，开发者工具将自动编译并预览你的小程序。

步骤 7: 构建生产版本的小程序代码包

当你准备发布你的小程序时，可以使用以下命令来构建生产版本：

npm run build

这将在项目的dist目录下生成生产环境的小程序代码包。然后你可以使用微信开发者工具上传代码包到微信小程序平台进行审核和发布。

注意事项：

• 确保你的微信小程序开发者账号已经注册并设置好。
• 在微信开发者工具中上传代码前，确保已经将项目的appid设置正确。你可以在项目的package.json中找到这个配置项。
• 在开发过程中，如果遇到任何问题，可以查看mpvue的官方文档获取帮助。

通过上述步骤，你应该能够成功使用mpvue搭建并运行一个基本的小程序了。随着开发的深入，你可以根据需要添加更多的功能和页面。

二、uni-app框架解析

核心特性

uni-app是DCloud推出的Vue.js跨端框架，支持同时编译到多个平台，包括微信小程序、支付宝小程序、H5、iOS、Android等。其主要特性包括：

• 多端支持能力：一套代码，多端运行，降低开发成本。
• 兼容Vue生态：易于上手，支持Vue的语法和组件，方便开发者快速迁移。
• 丰富的插件和组件：大幅提高开发效率，满足各种业务需求。
• 完善的文档和社区支持：国内开发者友好，遇到问题能够快速找到解决方案。

代码示例

以下是一个简单的uni-app页面示例，展示了其基本的页面结构和语法：

<template>
  <view>
    <button size="mini" @click="handleClick">按钮</button>
  </view>
</template>

<script>
export default {
  methods: {
    handleClick() {
      uni.showToast({
        title: '按钮被点击',
        icon: 'none'
      });
    }
  }
};
</script>

<style>
/* 页面样式 */
</style>

代码解释：

• <template>部分定义了页面的结构，使用了类似Vue的单文件组件规范。
• <script>部分定义了页面的逻辑，包括一个点击事件处理函数handleClick。
• <style>部分用于定义页面的样式。
• 在handleClick函数中，使用了uni-app提供的uni.showToast方法来显示一个提示框。

---

番外：如何创建一个uni-app项目

在创建uniapp项目时，你可以选择多种方式。uniapp 是一个使用 Vue.js 开发所有前端应用的框架，它允许你编写一次代码，然后发布到iOS、Android、以及各种小程序、Web等多个平台。这里我将介绍两种常见的方式来创建uniapp项目：使用HBuilderX和命令行。

方法1：使用HBuilderX

HBuilderX是一个全功能的开发工具，支持uniapp的开发，并提供了图形界面的操作，非常适合初学者使用。

1. 下载并安装HBuilderX‌

• 访问HBuilderX官网下载并安装HBuilderX。

2‌. 创建uniapp项目‌

• 打开HBuilderX，点击左上角的"文件" -> "新建" -> "项目"。
• 在弹出的"新建项目"窗口中，选择"uni-app"模板，然后点击"确定"。
• 输入你的项目名称，选择项目的保存位置，然后点击"创建"。

3. 运行项目‌

• 在项目列表中找到你的uniapp项目，右键点击选择"运行到浏览器"或者"运行到手机"。

方法2：使用命令行

如果你更喜欢使用命令行或者需要在没有图形界面的服务器上开发，可以使用命令行工具Vue CLI‌的@vue-cli插件来创建uniapp项目。首先需要全局安装@vue/cli和@dcloudio/uni-preset-vue

在创建uni-app项目之前，请确保你已经安装了Node.js环境，因为uni-app是基于Vue.js开发的，并且使用了一些Node.js的包管理工具如npm或yarn。

1.‌ 安装Node.js‌

• 确保你的计算机上安装了Node.js。你可以从Node.js官网下载并安装。

你可以通过在终端运行 node -v 来检查 Node.js 是否已安装以及其版本。

2.‌ 安装Vue CLI‌

• 打开命令行工具（如cmd、Terminal），运行以下命令来全局安装Vue CLI：

npm install -g @vue/cli

‌3. 创建uni-app项目‌

使用Vue CLI创建一个新的Vue项目，并添加uniapp插件uni-preset-vue：

vue create -p dcloudio/uni-preset-vue#XXX my-project

其中 XXX 是你想要使用的 uni-app 的版本号（例如 latest）。如果你不确定版本号，可以使用 latest，也可以省略。省略后，命令会使用默认的预设模板（通常是基于 Vue 2 的稳定版）‌。my-project 是你的项目名称，你可以根据需要更改它。

• 在提示中选择"Manually select features"并确保选择了"Babel", "Router", 和 "Vuex"。然后继续。
• 选择"In dedicated config files"配置方式。
• 选择一个预置的配置（例如"Babel", "Router", "Vuex"），或者自定义配置。
• 最后，确认是否保存此配置作为一个命名预设。

---

番外：关于vue create -p dcloudio/uni-preset-vue#XXX my-project

在使用 vue create -p dcloudio/uni-preset-vue#XXX my-project 命令时，‌**#XXX 是否可以省略，取决于你使用的 Vue CLI 版本和项目需求**‌。

根据权威公开资料（尤其是 DCloud 官方最新文档）：

• ‌**对于 Vue CLI 创建方式（即使用 vue create -p 命令）**‌：

  • ‌**#XXX 可以省略**‌。省略后，命令会使用默认的预设模板（通常是基于 Vue 2 的稳定版）‌10。
  • 例如：vue create -p dcloudio/uni-preset-vue my-project 是合法且常用的命令 ‌13。

• ‌但若需指定特定版本或框架（如 Vue 3 + Vite、TypeScript 等） ‌，则‌**必须包含 #XXX**‌，例如：

  • #vite：创建 Vue 3 + Vite 项目 ‌1011
  • #vite-ts：创建 Vue 3 + Vite + TypeScript 项目 ‌25
  • #alpha：使用 Alpha 版本（对应 HBuilderX Alpha 版）‌1011

⚠️ 注意：DCloud 官方已逐步推荐使用 npx degit 方式创建新项目，尤其适用于 Vue 3/Vite 模板 ‌10。而 vue create -p 属于较旧的 Vue CLI 方式，官方文档中已较少强调其默认行为。

总结

• ‌**可以省略 #XXX**‌，省略后使用默认模板（通常为 Vue 2）。
• ‌不建议省略 ‌，如果你需要现代特性（如 Vue 3、TypeScript、Vite），应明确指定如 #vite-ts。

如需最新模板，推荐直接使用官方推荐方式：

npx degit dcloudio/uni-preset-vue#vite-ts my-project

---

‌4. 添加uniapp插件‌

• 进入项目目录：

cd my-uniapp-project

• 添加uniapp插件：

vue add uni-preset-vue

• 根据提示选择是否使用DCloud的云服务等功能。

---

番外：@vue/cli-plugin-uni跟uni-preset-vue的区别

@vue/cli-plugin-uni 和 uni-preset-vue 都是用于在 Vue.js 项目中快速开始使用 uni-app 框架的插件或预设，但它们服务于不同的场景和目的。

1. @vue/cli-plugin-uni

@vue/cli-plugin-uni 是 Vue CLI 官方插件，用于在 Vue CLI 环境中集成 uni-app。通过这个插件，你可以使用 Vue CLI 的脚手架功能来创建一个基于 uni-app 的项目。这个插件使得开发者可以享受到 Vue CLI 提供的强大项目创建、依赖管理、插件系统等功能，同时又能开发跨平台应用（支持 Web、App、小程序等）。

‌**特点：**‌

• 完全利用 Vue CLI 的生态系统。
• 提供标准的 Vue CLI 项目结构。
• 通过 Vue CLI 插件系统扩展和定制项目。
• 适合希望在 Vue CLI 环境下使用 uni-app 的开发者。

2. uni-preset-vue

uni-preset-vue 是 DCloud（uni-app 的开发者）提供的一个预设配置，用于快速开始 uni-app 项目。这个预设是基于 Vue CLI 的，但它更多地是一个配置集合，而不是一个插件。使用 uni-preset-vue 可以让你快速启动一个配置好的 uni-app 项目，而不需要从头开始配置 webpack 或其他构建工具的配置。

‌**特点：**‌

• 提供预配置的、适合 uni-app 开发的 Vue CLI 项目结构。
• 简化项目初始化过程，减少配置时间。
• 适用于希望快速开始 uni-app 开发且偏好使用 Vue CLI 的开发者。

使用场景选择

• ‌**如果你更喜欢使用 Vue CLI 的完整功能和生态系统，并且想要在同一个项目中同时使用 Vue.js 和 uni-app 的能力，那么选择 @vue/cli-plugin-uni 是合适的。**‌

• ‌**如果你追求快速开始一个 uni-app 项目，且不介意使用 DCloud 提供的预设配置而非完全自定义的 Vue CLI 配置，那么 uni-preset-vue 会是一个好的选择。**‌

结论

选择哪一个主要取决于你的个人偏好、项目需求以及你对工具的熟悉程度。两者都能有效地帮助你开始使用 uni-app 进行跨平台应用开发，但提供了不同的集成方式和便利性。

5. 运行项目

**在项目目录中，使用以下命令来启动你的应用：**‌

• 在项目目录下，使用以下命令来启动你的应用：

npm run serve

• 打开浏览器访问http://localhost:8080/来查看你的应用。

以上两种方法都可以成功创建并运行一个基本的uniapp项目。选择适合你习惯和需求的方法开始你的uniapp开发之旅吧！如果你刚开始学习uniapp，推荐使用HBuilderX，因为它提供了更直观的界面和丰富的功能支持。如果你更喜欢命令行操作或者需要在服务器上开发，那么使用Vue CLI和uniapp插件是一个不错的选择。

---

番外：如何使用命令行启动一个uniapp项目

要使用命令行启动一个uniapp项目，你需要遵循以下步骤。这些步骤假定你已经安装了Node.js环境，并且你的uniapp项目已经通过HBuilderX或其他IDE创建并且配置好。

1. 安装依赖

首先，确保你的uniapp项目目录中有package.json文件，并且你已经安装了所有必要的依赖。在命令行中，切换到你的项目目录下，运行以下命令来安装依赖：

npm install

2. 启动项目

uniapp项目通常可以通过HBuilderX内置的服务器来运行和调试，但你也可以使用命令行工具来启动。uniapp项目通常使用HBuilderX的cli工具或者vue-cli来启动。

① 使用HBuilderX的CLI

如果你的项目中包含了HBuilderX的CLI工具（通常是@dcloudio/uni-app-cli），你可以使用以下命令来启动项目：

npm run dev:mp-weixin  # 微信小程序
npm run dev:mp-alipay  # 支付宝小程序
npm run dev:h5         # H5
npm run dev:app-plus   # 5+ App

这些命令会根据你选择的目标平台启动相应的开发服务器。

② 使用Vue CLI插件

如果你使用的是Vue CLI插件（例如@vue/cli-plugin-uni），你可以使用以下命令来启动H5版本的uniapp项目：

npm run serve

这将启动一个本地开发服务器，默认情况下，访问 http://localhost:8080 即可查看你的项目。

---

番外：@vue/cli-plugin-uni和@vue-cli的区别

@vue/cli-plugin-uni 和 @vue-cli 是与 Vue.js 开发中使用的工具和插件相关的不同概念，它们服务于不同的目的和场景。

1. @vue/cli

@vue/cli 是 Vue.js 的官方脚手架工具，用于快速搭建新的 Vue.js 项目。它提供了一系列的功能，如项目模板选择、依赖管理、配置管理等，帮助开发者快速启动项目。

主要功能：

• ‌项目创建‌：通过命令行工具快速生成新的 Vue.js 项目结构。
• ‌插件系统‌：支持通过插件扩展功能，如添加路由、Vuex、ESLint等。
• ‌项目配置‌：允许开发者自定义项目的webpack配置等。

2. @vue/cli-plugin-uni

@vue/cli-plugin-uni 是 @vue/cli 的一个插件，专为使用 DCloud 的 uni-app 框架开发的跨平台应用（如微信小程序、支付宝小程序、H5、App等）提供支持。uni-app 是一个使用 Vue.js 开发所有前端应用的框架，它允许开发者编写一次代码，可发布到多个平台。

主要功能：

• ‌uni-app 支持 ‌：为使用 @vue/cli 创建的 Vue.js 项目添加对 uni-app 的支持。
• ‌平台适配‌：帮助开发者在开发时自动处理不同平台的兼容性问题。
• ‌构建配置‌：提供针对 uni-app 项目的特定构建配置，如多端打包等。

区别总结

• ‌用途 ‌：@vue/cli 是 Vue.js 的官方脚手架工具，用于创建和管理 Vue.js 项目。而 @vue/cli-plugin-uni 是 @vue/cli 的一个插件，专门用于支持 uni-app 框架的项目开发。
• ‌功能范围 ‌：@vue/cli 提供的是通用的 Vue.js 项目开发功能，而 @vue/cli-plugin-uni 专注于增强对 uni-app 框架的支持。
• ‌安装和使用 ‌：你可以在使用 @vue/cli 创建项目后，通过添加 @vue/cli-plugin-uni 插件来为项目添加对 uni-app 的支持。例如，通过运行 vue add @vue/cli-plugin-uni 来安装并配置该插件。

---

3. 构建和发布

完成开发后，你可能需要构建和发布你的应用。这可以通过以下命令完成：

npm run build:mp-weixin  # 构建微信小程序
npm run build:mp-alipay  # 构建支付宝小程序
npm run build:h5         # 构建H5应用
npm run build:app-plus   # 构建5+ App

这些命令会生成可用于发布的代码，你可以将它们上传到对应的小程序平台或Web服务器上。

4. 调试和问题解决

如果遇到问题，检查以下几点：

• 确保所有依赖都已正确安装。
• 查看命令行输出的错误信息，了解可能的错误原因。
• 确保你的开发环境（如Node.js版本）符合项目的需求。
• 如果使用Vue CLI，确保你安装了@vue/cli-plugin-uni插件。
• 对于特定的小程序平台（如微信小程序），确保你有正确的API调用权限和配置。

通过以上步骤，你应该能够使用命令行成功启动和构建你的uniapp项目。

---

适用场景

uni-app适合需要跨多个平台（小程序、移动端、H5等）部署的业务应用。其多端支持能力和丰富的插件生态，使得开发者能够快速构建出功能完善、性能优良的应用。

三、框架对比与选择建议

特性/框架	mpvue	uni-app
支持平台	仅微信小程序	微信小程序、支付宝小程序、H5、iOS、Android等
组件化开发	支持	支持
Vue生态兼容	支持	支持
社区活跃度	较低	较高
适用场景	微信小程序开发	跨多端部署的业务应用

根据项目需求选择合适的框架，可以显著提高开发效率和代码复用性。如果项目仅需开发微信小程序，且希望深度集成Vue.js，mpvue是一个不错的选择。然而，如果项目需要跨多个平台部署，且希望获得更好的社区支持和更丰富的插件生态，uni-app则是更合适的选择。

---

参考资料

Vue.js开发微信小程序：开源框架mpvue | 详解基于Vue的开发框架------mpvue

快速上手小程序的mpvue框架 | mpvue小程序开发入门之生命周期详解

基于mpvue框架的小程序项目搭建入门教程 | 使用mpvue开发小程序教程

uniapp和mpvue区别有哪些 | mpvue微信小程序的项目搭建