mpvue 开发框架介绍和最佳实践 ���Vue.js������� 美团酒旅 - 终端研发组 - 基础服务平台 动态化技术⽅方向，⼩小程序应⽤用、RN 应⽤用 努⼒力力于⼩小程序⼯工程化开发、业务级应⽤用 ������美团点评 ⽬目录 CONTENTS mpvue 介绍 使⽤用⽅方式 设计思路路 实践 & 展望 1 mpvue 介绍 作为⼩小程序应⽤用开发框架，mpvue 作为⼩小程序应⽤用开发框架，mpvue 具有什什么特点？为开发者 带来了了是什什么？当前社区的反馈如何？ mpvue 是什什么 使⽤用 Vue.js 开发⼩小程序的前端框架 Vue.js 代码 ⼩小程序代码 ⼯工程化体系集成 cli 命令⾏行行⼯工具 编译构建集成 ⽣生态扩展能⼒力力 npm 管理理⽀支持 Vue 组件机制 开发规范扩展 Vue 编码规范 Vue 语法⽀支持 Vue 引擎驱动 mpvue 的能⼒力力 DCLOUD uni-app ⽅方案 2 mpvue 使⽤用⽅方式 mpvue 框架针对的使⽤用场景如何，在各种复杂的 场景下应该如何使⽤用，典型的使⽤用流程是怎样的？ 使⽤用 mpvue 之前 了了解⼩小程序能⼒力力 & 边界 了了解 Vue.js 特性 了了解前端构建 mpvue 做什什么 & 不不做什什么 设计⼀一种编码⽅方式 确定⼀一套语法集合 内置编译构建⼯工具 推荐示例例项⽬目模板

前终端统⼀一⽅方案 Hippy-Vue 设计和实现 腾讯 / QQ 浏览器器 SuperTeam / xqkuang 背景介绍 Web 开发效率⾼高 ⽀支持多平台 可动态发布 体验差 能⼒力力弱 Native 开发效率低 ⽆无法跨平台 发布复杂 体验好 能⼒力力强 传统移动端开发模式，⽆无法满⾜足业务精细化运营需求，急需寻找⼀一种⾼高性能、跨平台、动态发布的开发解决⽅方案。 可动态发布 能⼒力力强 体验好 Hippy 简介 腾讯 Hippy 动态运营解决⽅方案由 Hippy SDK 与 Hippy 管理理平台 组成： • Hippy SDK 是⼀一套多端统⼀一的开发框架，它能通过 JavaScript ⾼高效率地开发出：跨平台（安卓/iOS/ Web）、⾼高性能的原⽣生应⽤用，尤其适合需要快速迭代⼜又追求⾼高性能的产品。 • Hippy 管理理平台 涵盖编译、 Library 前端主导 ⽀支持最流⾏行行的框架 向阳⽽而⽣生 代码即将对外开源 （ 发布平台） User Code JavaScript Hippy 底层三⼤大特性 ⾼高性能可复⽤用滚动列列表 动画和⼿手势实现 X5 内核团队提供⽀支持 项⽬目架构 Hippy SDK 采⽤用三层设计，其中： • JavaScript 层：提供业务代码运⾏行行时的前端上下⽂文环境；

API 全局 API Treeshaking 内联模板 Attribute key attribute 按键修饰符 在 prop 的默认函数中访问 this 渲染函数 API Slot 统一 过渡的 class 名更改 v-model v-if 与 v-for 的优先级对比 v-bind 合并行为 贡献文档 Vue 文档编写指南 文档风格指南 翻译 - 4 - 本文档使用 计算属性和侦听器 Class 与 Style 绑定 条件渲染 列表渲染 事件处理 表单输入绑定 组件基础 基础 - 6 - 本文档使用 书栈网 · BookStack.CN 构建 Vue.js 在设计上是可以逐步采纳的。这意味着它可以根据需求以多种方式集成到一个项目中。 将 Vue.js 添加到项目中有三种主要方式。 1. 在页面上以 CDN package 的形式导入。 2. 使用 npm CN 构建 提示 已经了解 Vue 2，只想了解 Vue 3 的新功能可以参阅迁移指南! Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的 是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第 三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库 (opens new window)

的分享。 关于我们： 关于我们： IMWebConf 是由腾讯IMWeb团队发起的专注于Web前端领域的非营利性开发者大会。 IMWeb团队专注前端领域多年，曾负责腾讯最核心的基础海量业务QQ统一登录、QQ注册、QQ群等，目前主要聚焦 腾讯在线教育战略产品腾讯课堂及企鹅辅导的研发， 并精心打造前端工程师Next学位，开启在线教育变革之路。 我们的工程师们也多次在Qcon、Velocity 们有着丰富的前端经验，也热衷于技术的开源与 分享。每年，我们都会举办自己的前端大会 ——IMWebConf。 会议日程 会议日程 大会流程： 大会流程： Node.js会场 会场 框架性能会场 框架性能会场 综合会场 综合会场 会议嘉宾 会议嘉宾 姓名 姓名 个人介绍 个人介绍 主题 主题 主题介绍 主题介绍 Philippe Le Hégaret Philippe Le 心内容，覆盖最新技术栈， 大局观和最佳实践 姜天意 姜天意，昵称99，阿里巴巴零售通事业部前端 技术专家 Web安全风险与Node 框架安全方案介绍 深入浅出的介绍的常见的安 全问题，一些不常见的安全 问题，以及对应的防范方 法。开发一个Node框架，需 要考虑哪些安全方面的问 题？相信你会得到一些答 案。 张小春 小春现任摩拜科技前端负责人，之前滴滴公共 前端团队负责人，再之前的最近的经历主要在

Ant Design Vue 对比测评，哪个更好？》 Vue 3 发布后，各家第三方库开始陆续重构并支持 Vue 3 ，国内两大知名框架 Element Plus 和 Ant esign Vue 也相续发布新版支持 Vue 3。到底应该怎么选择呢？本文从多个纬度对两个框架进行对比 测评。 原文链接：Element Plus 和 Ant Design Vue 对比测评，哪个更好？ Element Plus Plus 发布正式版后，下载量飙升，当然这也依托于 Element UI 的占有率和好口碑。有关 El ment Plus 的入门教程可看这篇：《Element Plus for Vue 3 入门教程》 框架版本对 Vue 的支持 ● Element UI 支持 Vue 2 ● Element Plus 支持 Vue 3 ● Ant Design Vue 1.x 支持 Vue 2 ● Ant Design 浏览器兼容性 Element Plus 和 Ant Design Vue 3 都已不在支持 IE 了，并不是他们自己放弃了 IE 而是 Vue 3 本 已经放弃了 IE。如果想在低版本浏览器上正常使用这两个框架，可使用 Babel、ESBuild 或其他转换 原文链接：Element Plus 和 Ant Design Vue 对比测评，哪个更好？ 具，并引入相应的 polyfill。 Element

2000年年后 markup language+ programming language • 2009年年 “HTML5” 声明式优势 • 可视化的“可逆性” • 声明式与可再绑定性 • 听说近年年某框架把html和css塞回JS了了？ 可重复绑定性 • recycle-list item item item item item item item item item item

Evolution “Just a view layer library” “Just a view layer library” The Progressive Framework 渐进式框架 今天 Today 53,986 GitHub Stars Top 10 All-Time 每月 55 万+ 次 NPM 下载 不包括中国镜像数据 Chrome 开发者插件 17.4 万周活跃用户

com/vueComponent/ant-design-vue 现状 52个组件 单测覆盖率86% Star 3000+ 特⾊色 受控/⾮非受控组件 基于组件的国际化配置(36种语⾔言包) 共享Antd设计资源(Sketch、Axure等) ⼀一致的API 未来规划 提升单测覆盖率 TypeScript⽀支持 周边⽣生态建设 性能优化 总结 姿(zhi)势(shi)很重要 Q&A