它是业界最受欢迎的小程序开发解决方案，由Vue作者在微博大力推广，并获得超过9000颗星的热烈好评。

文章最后有一个彩蛋

01

专为小程序设计的框架

微信小程序自上线以来，热度居高不下，各大公司也开始专门开发小程序。然而小程序的wxml和wxss的定制化、自定义语法让以三大框架为主的前端行业头疼不已，因为需要专门为小程序开发一套代码来维护，也增加了学习成本。

支持语法的wepy虽然领先，但是它只是借用了Vue的代码开发风格，我们也需要学习wepy的语法。直到它的问世，前端小伙伴们才能彻底解放出来。

它是什么？

2018年3月，美团点评团队发布了小程序开发框架： ，这是现在业界最流行的Vue小程序开发解决方案。下面是官方的介绍。

它是一个使用 Vue.js 开发小程序的前端框架，该框架基于 Vue.js 核心，并修改了 Vue.js 的实现，使其可以运行在小程序环境中，为小程序开发引入了一套完整的 Vue.js 开发经验。

以上介绍对于前端朋友来说是一个很大的福利，不仅解决了小程序开发规范对组件与模块化、自动构建与集成、代码复用、开发效率等更复杂的开发方式的限制，还让开发者可以使用熟悉的 Vue.js 来开发微信小程序，减少了学习新语法的成本。

而且在网络上收获了9000颗星好评，还被作者在微博大力推广，说不定以后会成为标配呢。

提供原生小程序、wepy三个开发框架的横向对比，大家可以自行对比↓

图：框架使用特点对比

02

让你亲身体验力量

最好的学习方式就是开始学习。让我们建立一个演示项目并尝试一下。

安装环境

需要执行 npm vue-cli -g 安装vue-cli和小程序的开发者工具

执行vue init/--demo一路回车，会得到一个项目脚手架

进入-demo目录，执行npm &&npm run dev启动项目，然后打开微信开发者工具，打开-demo目录，进入。首先看src目录，这个目录就是源码目录结构。

基本看不出来这是一个小程序项目，我们打开///.vue

='-扭曲'>

Vuex：{{ }}

@=''>+

@=''>-

href='///main'='home'>转到主页

当然，这只是一个很简单的 demo，但其中还涉及到了很多能力，包括渲染列表、事件绑定、计算属性、生命周期等等。我们可以感受到项目的强大，完全使用语法进行开发。这是系列教程的第一篇，后面我们会介绍更复杂的开发方式。

如果想要快速学习，可以订阅我的最新教程《全网第一课：小程序全栈开发》，该课程已第一时间在慕课网上线，是业界首个全栈课程。

课程结合腾讯云提供的全套小程序后端解决方案，从小程序基础学习+vue+Koa2到使用vue语法全栈开发一个小程序，以及完整的上线流程，让学员能够直接开发一个完整的小程序并上线，形成完整的知识体系。