mpvue 开发框架介绍和最佳实践 ���Vue.js������� 美团酒旅 - 终端研发组 - 基础服务平台 动态化技术⽅方向，⼩小程序应⽤用、RN 应⽤用 努⼒力力于⼩小程序⼯工程化开发、业务级应⽤用 ������美团点评 ⽬目录 CONTENTS mpvue 介绍 使⽤用⽅方式 设计思路路 实践 & 展望 1 mpvue 介绍 作为⼩小程序应⽤用开发框架，mpvue ⼩小程序代码 ⼯工程化体系集成 cli 命令⾏行行⼯工具 编译构建集成 ⽣生态扩展能⼒力力 npm 管理理⽀支持 Vue 组件机制 开发规范扩展 Vue 编码规范 Vue 语法⽀支持 Vue 引擎驱动 mpvue 的能⼒力力 好扩展 前端赋能 易易学习 超低上⼿手 成本 多端复⽤用 技术沉淀收益规 模化 提⾼高开发效率 减少重复劳动 ⾃自动化构建 组件化开发 特性 了了解前端构建 mpvue 做什什么 & 不不做什什么 设计⼀一种编码⽅方式 确定⼀一套语法集合 内置编译构建⼯工具 推荐示例例项⽬目模板 UI 组件库 常⽤用⼯工具库 第三⽅方平台⽀支持 H5 差异抹平和适配 mpvue only mpvue 为主 mpvue 做增量量开发 使⽤用场景 • 官⽅方标准使⽤用⽅方式 • 从零构建⼩小程序项⽬目 • quickstart

性能监控 - RPC 郭达峰 Strikingly／上线了 的联合创始人。于 2010 年 开发了三款 Facebook 平台的应用，获取了超 过 2 千万的用户。2012 年创立了市面上最简易 的建站平台 Strikingly，成为第一家进入 YC 孵 化器的华人团队。 Inside React Fiber 天猪 阿里游戏前端负责人，EggJS 核心开发者。 Egg & Node 谢梓洪，腾讯空间H5游戏前端工程师 空间H5开放平台与游 戏结合实践 通过与游戏结合实践，将空 间H5平台能力开放，解决H5 页面白屏时间过长、页面跳 转闪烁等问题；以新的H5接 入方式，解决开放与安全的 矛盾，既开放更多平台能 力，又能保证安全隔离与全 链路的监控；构建拥有优质 体验与提供安全的增强能力 的H5接入开放平台。 neilcui(崔进) 崔进，腾讯Web前端高级工程师，Node jackqqxu(徐杰) 徐杰，腾讯Web前端高级工程师，QQ空间个性 化商城主要开发者 2011年入职腾讯，期间负责flash游戏，支付官 网和内部运营系统等web系统开发，PHP爱好 者； 2014年进入空间，先后负责QQ空间触屏版部 分模块，QQ空间个性化商城系列开发。 RN在QQ空间IOS个 性化商城中的应用 本次演讲主要包括： （1）ReactNative在IOS系

API 介绍 Setup 生命周期钩子 提供/注入 模板引用 渲染机制和优化 Vue 2 中的更改检测警告 工具 单文件组件 测试 TypeScript 支持 Mobile 规模化 路由 状态管理 服务端渲染 无障碍 基础 语义学 标准 资源 从 Vue 2 迁移 介绍 v-for 中的 Ref 数组 异步组件 attribute 强制行为 自定义指令 webpack ， rollup 和 parcel 。 TODO：将 prod/dev 分支留给 process.env.NODE_ENV guards (需要更换构建工具) 不提供最小化版本 (捆绑后与其余代码一起完成) import 依赖 (例如： @vue/runtime-core ， @vue/runtime-compiler ) 导入的依赖项也是 esm bundler 或用于 Node.js 通过 require() 进行服务器端渲染。 如果你将应用程序与带有 target: 'node' 的 webpack 打包在一起，并正确地将 vue 外部化，则将加载此构建。 dev/prod 文件是预构建的，但是根据 process.env.NODE_env 会自动需要相应的文 件。 如果需要在客户端上编译模板 (即：将字符串传递给 template

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

Mock。 针对与Mock他大致就是用来模拟数据的，为什么会有它的出现呢？因为现在前后端开发基本是分离 ，但是数据结构一般都会先定好，在日常开发中，为了前端的进度不受到后端的影响，常用Mock来 虚拟数据来模拟后端发来的请求。 本文只是简单的介绍一下Mock的使用，如果要详细学习请自行百度 Mock基本格式 export default { 'GET /api/getValue': {

antdv 首先要搭 Vue 3 开发环境，然后再引入组件库，再按照文档的说明，根据自己的需求进行二次开发。使用 Elem nt 和 antdv 相对来说对前端技能要求较高。 卡拉云是新一代低代码开发平台，与 Element 和 antdv 相比，卡拉云的优势在于不用搭建 Vue 环境， 接注册即可开始使用。开发者完全不用处理任何前端问题，只需简单拖拽，即可快速生成所需组件， 一键接入包括 MySQL

⼈人们意识到视图应该被独⽴立抽象 • 80年年代 标记语⾔言⼤大热 最初更更与⽂文本相关 • 90年年代 可视化编辑器器出现 “独⽴立的UI代码⽂文件” • 2000年年后 markup language+ programming language • 2009年年 “HTML5” 声明式优势 • 可视化的“可逆性” • 声明式与可再绑定性 • 听说近年年某框架把html和css塞回JS了了？ 可重复绑定性

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

支持 SSR 性能进一步优化 通过编译时优化获得 2~8x 性能提升 SSR + webpack code split 完美支持 （不再局限于路由） vue-cli 3.0 ● 配置依赖化 + 可组合 ● PWA by default ● 一个模板，不同参数 (--ts, --ssr) ● 更好的测试方案 长期展望 ● 单文件组件 CSS 改进：>>> 和 ::slotted 选择器，