mpvue是业内最火的小程序开发方案，Vue作者微博力推， GitHub上9000星好评如潮。 文末有彩蛋 微信自推出小程序以来，热度一直居高不下，各大公司开始专门开发小程序，但是小程序自定义的wxml和wxss和自己定义的语法，让被三大框架统治的前端江湖头疼不易，因为需要专门为小程序开发一套代码来维护，也徒增了学习成本。 虽然中间有支持vuejs语法的wepy独领风骚，但只是在代码开发风格上借鉴了Vue，也是需要我们学习wepy的语法。直到mpvue横空出世，让前端的小伙伴们可以彻底解放出来。
mpvue是什么？
2018年3月，美团点评团队出品的小程序开发框架：mpvue，是现在业内最火的vue开发小程序解决方案。这里引用一下官方对mpvue的介绍。
mpvue是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验
以上介绍，完全是对前端的朋友们的一个大福利。既解决了小程序开发规范对较高复杂的开发方式的限制，如如组件和模块化、自动构建和集成、代码复用和开发效率等，还让开发者通过使用熟悉的 Vue.js 来开发微信小程序，降低学习新语法的成本。
而且mpvue在GitHub上获得9000星好评如潮，也得到了vuejs作者的微博力推，搞不好以后会变为vuejs的标准。
提供一份对原生小程序、mpvue、wepy 这三个开发框架的的横向比较，大家可自行对比下↓
图： 框架使用特点对比
学习最好的方式就动手，我们就徒手撸一个demo项目出来跑一跑
安装环境
需要大家执行 npm install vue-cli -g安装vue-cli和小程序的开发者工具
执行 vue init mpvue/mpvue-quickstart mpvue-demo 然后一路回车下去，你就得到了一个mpvue项目脚手架
进入mpvue-demo目录，执行 npm install && npm run dev启动项目 然后打开微信开发者工具，打开mpvue-demo目录，就进入了mpvue的世界 先看下mpvue的src目录，也就是源码目录结构
基本看不出这是一个小程序项目，我们打开 /pages/counter/index.vue
<> class='counter-warp'>
Vuex counter：{{ count }}
<> @click='increment'>+
<> @click='decrement'>-
<> href='/pages/index/main' class='home'>去往首页
当然，这只是一个非常简单的demo，但是也涉及到很多的能力，包括渲染列表，事件绑定，计算属性，生命周期等等，我们可以感受到mpvue的强大之处，完全使用vuejs的语法开发项目，这是mpvue系列文章教学的第一篇，后面我们介绍更复杂的mpvue如何开发。
想要快速学习，可以订阅我最新教程《全网首发mpvue课程小程序全栈开发》，已在慕课网第一时间推出，是业内第一门mpvue全栈课程。
课程是结合腾讯云提供的小程序全套后端解决方案，从小程序+vue+Koa2的基础学习，到使用vue语法全栈开发一个小程序，完整的上线流程，使学生能直接上手开发一个完整的小程序并且上线，形成一个完整的知识体系。
联系客服
