不容错过,mpvue,美团点评开源的基于 Vue 微信小程序前端框架

mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心, 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。

实践案例

美团旗下小程序:美团汽车票 和 美团充电,此外,正有一大批小程序正在接入中。

快速开始

我们精心准备了一个简单的 五分钟上手教程 方便你快速体验到 mpvue 带来的开发乐趣。

名称由来

mp:mini program 的缩写

mpvue:Vue.js in mini program

主要特性

使用mpvue开发小程序,你将在小程序技术体系的基础上获取到这样一些能力:

彻底的组件化开发能力:提高代码

完整的 Vue.js 开发体验

方便的 数据管理方案:方便构建复杂应用

快捷的webpack 构建机制:自定义构建策略、开发阶段 hotReload

支持使用 npm 外部依赖

使用 Vue.js命令行工具 vue-cli 快速初始化项目

H5 代码转换编译成小程序目标代码的能力

其它特性正在等着你去探索。

H5 和小程序如何复用代码

示例

初始化一个 mpvue 项目

现代前端开发框架和环境都是需要 Node.js 的,如果没有的话,请先下载 nodejs 并安装。

然后打开命令行工具:

# 1. 先检查下 Node.js 是否安装成功

$ node -v

v8.9.0

$ npm -v

5.6.0

# 2. 由于众所周知的原因,可以考虑切换源为 taobao 源

$ npm set registry https://registry.npm.taobao.org/

# 3. 全局安装 vue-cli

# 一般是要 sudo 权限的

$ npm install --global vue-cli

# 4. 创建一个基于 mpvue-quickstart 模板的新项目

# 新手一路回车选择默认就可以了

$ vue init mpvue/mpvue-quickstart my-project

# 5. 安装依赖,走你

$ cd my-project

$ npm install

$ npm run dev

随着运行成功的回显之后,可以看到本地多了个 dist目录,这个目录里就是生成的小程序相关代码。

2. 搭建小程序的开发环境

小程序自己有一个专门的微信开发者工具,最新版本下载地址。

这一步比较简单,按照提示一步步安装好就行,然后用微信扫描二维码登陆。 至此小程序的开发环境差不多完成。

3. 调试开发 mpvue

选择 小程序项目并依次填好需要的信息:

【【前端学习交流裙三.三.零.三.三.六.二.八.九.进裙邀请码(编号):寂静 。裙内不定时分享干货,包括2018最新的企业案例学习资料和零基础入门教程,欢迎自学的小白和大神】

项目目录:就是前文提到的那个 dist 目录。

AppID:没有的话可以点选体验“小程序”,只影响是否可以真机调试。

项目名称。

如图:

点击“确定”按钮后会跳到正式的开发页面,点击“编辑器”按钮,关闭自带的小程序编辑器。然后如图:

此时,整个 mpvue 项目已经跑起来了。

用自己趁手的编辑器(或者IDE)打开 my-project中的 src目录下的代码试试,如视频示例:

在左侧为已经上线的 H5 页面,右侧为同代码的小程序页面,其中只需要更改小部分平台差异代码和更新下 webpack 的建构配置就可以直接运行。

当然从产品的层面,我们不建议这么做,各个端有自己的差异性,我们期望的只是开发和调试体验一致。

配套设施

mpvue作为小程序版本的 Vue.js,在框架 SDK 之外,完整的技术体系还包括如下设施。

mpvue-loader 提供 webpack 版本的加载器

mpvue-webpack-target webpack 构建目标

px2rpx-loader 样式转化插件

mpvue-quickstart mpvue-quickstart

mpvue-simple 辅助 mpvue 快速开发 Page / Component 级小程序页面的工具

其它

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180309A1J18V00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券