mpvue 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
mpvue 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
mpvue 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
mpvue 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
mpvue 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !

软件简介

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

实践案例

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

名称由来

  • mp:mini program 的缩写

  • mpvue:Vue.js in mini program

主要特性

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

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

  • 完整的 Vue.js 开发体验

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

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

  • 支持使用 npm 外部依赖

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

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

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (4)

加载中
从wepy转过来了
2018/03/19 09:12
回复
举报
打分: 力荐
开发效率提升
2018/03/11 11:28
回复
举报
更多评论
发表于大前端专区
2018/12/07 07:43

mpvue 1.0.16 发布,基于 Vue.js 的小程序开发框架

mpvue 1.0.16 已发布,更新如下: fix #1240 修复 this.arr.push(1) this.arr.concat([1]) 不能触发更新的 bug #1165 在渲染时使用新的 diff 算法来减少 Vue 组件更新引起的 Page.setData 的实际更新量,达到提升页面性能的目的 mpvue 是美团点评开源的一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套...

3
24
发表于大前端专区
2018/03/24 07:43

mpvue 1.0.7 发布,基于 Vue.js 的小程序开发框架

mpvue 1.0.7 已发布,更新内容: 修复 vuex 全局 store 跨页面数据不同步,渲染异常 #62 修复 canvas 组件上部分事件不被响应 #142 修复 Promise 被覆盖后引发的 $nextTick 错误 #170 修复根组件没有 style 模块,不生成 page.wxss (mpvue-loader@1.0.9) #153 mpvue 是美团点评开源的一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中...

2
11
发表于大前端专区
2018/03/21 10:22

mpvue 1.0.6 发布,基于 Vue.js 的小程序开发框架

mpvue 1.0.6 已发布,更新内容: 修复 v-if 和 v-for 同时存在时索引报错 修复 app 上调用 onError 时报错 优化同一组件连续嵌套相同索引的 v-for 时编译提示 优化 mpvue onLoad onLaunch 添加回调 options 参数 mpvue 是美团点评开源的一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验...

4
12
发表于大前端专区
2018/03/19 14:06

mpvue 1.0.5 发布,基于 Vue.js 的小程序开发框架

mpvue 是美团点评开源的一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。使用 mpvue 开发小程序,你将在小程序技术体系的基础上获取到这样一些能力: 彻底的组件化开发能力:提高代码复用性 完整的 Vue.js 开发体验 方便的 Vuex 数据管理方案:方便构建复杂应用 快捷的 webpack 构建...

1
25
发表于大前端专区
2018/03/09 08:15

美团点评开源用 Vue.js 开发小程序的前端框架 mpvue

美团点评近日开源了 mpvue ,这是一个使用 Vue.js 开发小程序的前端框架。使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力。如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为 H5,mpvue 将是十分契合的一种解决方案。 mpvue 的核心目标是提高开发效率,增强开发体验。使用该框架,开发者只需初步了解小程序开发规范、熟悉 Vue.js 基本语法即可上手。框架提供了完整的 Vu...

12
69
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
2018/08/02 14:19

MpVue解析

前言 mpvue是一款使用Vue.js开发微信小程序的前端框架。使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为H5和小程序提供了代码复用的能力。如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为H5,mpvue将是十分契合的一种解决方案。 目前,mpvue已经在美团点评多个实际业务项目中得到了验证,因此我们决定将其开源,希望更多技术同行一起开发,应用到更广泛的场景里去。github项目地址请参见mpvue 。使用文档...

0
0
发表了博客
2018/07/09 09:42

mpvue 解析

前言 mpvue是一款使用Vue.js开发微信小程序的前端框架。 总结 生命周期的理解 文档 一次前后端实践 使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为H5和小程序提供了代码复用的能力。 如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为H5,mpvue将是十分契合的一种解决方案。 目前,mpvue已经在美团点评多个实际业务项目中得到了验证,因此我们决定将其开源,希望更多技术同行一起开发, 应用到更广泛的场景...

0
0
2018/09/19 15:23

【mpvue】三

使用了快1个月,陆续整理发现的坑 1、pageA-pageB-pageA-pageC 如果以这种顺序,大概理解成,列表进详情B, 返回列表进入详情C,那么进入详情C的时候,会因为缓存,先展现详情B的内容。解决方案查看了官方issue。如下: onLoad() { Object.assign(this.$data, this.$options.data()); }, 2、之前有说过,因为缓存的原因,所以mounted一次生命周期只会加载一次,所以再一些需要数据刷新的页面,推荐使用onShow()来做。...

0
1
2018/08/15 17:47

【mpvue】一

mpvue由美团开发的一款基于vue的小程序框架。 撸来看看 一、全局安装脚手架 npm install vue-cli -g 二、创建mpvue vue init mpvue/mpvue-quickstart firstapp 三、进入项目,安装依赖 cd firstapp npm install 四、开始 npm run dev 五、打开微信开发者工具 ,关闭编辑器 六、打开VS Code 发现代码已经被编译成了Vue文件 七、添加对less的支持 npm install less less-loader style-loader css-loader --save-dev webpack配置...

0
0
2018/08/28 11:40

【mpvue】二

关于项目中使用mpve发现的一些问题,踩坑吧,陆续会更新。 1、个人感觉很是很重要的一点。特别是在vue项目移植过来的mpvue项目, 组件不支持slot。 <component> <div v-for="(v,k)" :key="k"> 我里面不支持 </div> </component> 官方说的是不支持slot,但是实测里面,是组件内用了v-for,就渲染不出来。 2、关于生命周期的问题,按照vue的生命周期,一般加载会挂在mounted函数中。然而小程序中因为缓存的关系,...

0
0
发表于大前端专区
2020/04/18 17:56

mpvue中的坑

### 1、关于ui框架weapp的引入 - a、下载vant静态文件,再从app.json配置。 - b、 npm 下载 vant 模块,再从app.json配置。 ### 2、app.json 这相当于微信的配置文件,里面可设置增加页面,插件(例如weapp组件的引入),增加了页面后,每次都要npm run dev,不然不生效。 ### 3、mpvue,没有路由这个概念。 若要使用,请装mpvue-router-patch,这个插件。 router.push({ path: '/pages/news/list', reLaunch: true }),只能跳转7次...

0
0
发表了博客
2018/06/05 17:01

mpvue基本使用

## 什么是mpvue ## - 美团开发使用vue语法开发小程序的前端框架 - 适用于vue语法开发 - 会调用部分小程序API ## 创建mpvue项目 ## 1. 必须安装node.js 2. 安装vue脚手架npm install -g vue-cli 3. 创建项目,找到项目目录运行:vue init mpvue/mpvue-quickstart mympvue01 4. cd到项目目录安装依赖modules: cnpm i 5. 在项目下运行npm run dev就可以将项目转化为小程序项目,自动生成一个小程序目录格式的dist文件夹 ## 关联微信...

0
0
发表了博客
2018/08/19 12:51

小程序开发之mpVue

# my-project > A Mpvue project ## Build Setup ```bash # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report ``` #项目构建 http://mpvue.com/build/ #mpvue-docs 使用手册 http://mpvue.com/mpvue # Flyio Github: https://github.com/...

0
0
发表了博客
2018/09/04 23:34

mpvue 采坑

这是第一次用mpvue写项目啊,虽然项目难度不大,但是碰到的问题不小,而且项目还没上线,估计到时候还会碰到问题,所以这篇应该还会更新。 小程序,跟浏览器的环境是有挺多差异的,比如没有window对象,页面也不是在body元素里,而是page元素里,div变成了view,而图片的引入,小程序是没有img标签的,mpvue会自动把img转成小程序的image,有一点比较坑的就是小程序的这个标签的宽高会有预设 width: 320px; height: 240px; 所以...

0
1
发表了博客
2019/02/28 16:01

初识mpvue

听说mpvue可以实现H5和小程序的同时开发 对使用过vue的选手几乎是0难度 忍不住搓搓小手手 看了文 唔~ 似乎不是很难的样子 然后实际上手操作了一下 老规矩:新建项目 npm install --global vue-cli (# 全局安装 vue-cli) vue init mpvue/mpvue-quickstart XXXX (创建一个基于 mpvue-quickstart 模板的新项目) cd XXX(找到 新建的项目XXX) npm install (安装依赖) npm run dev (启动构建) 这个时候,你会发现,新建项目下...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
4 评论
238 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部