今天,我们来介绍一款由美团点评研发,使用 Vue.js 来开发微信小程序的前端框架 —— mpVue。使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力。如果想将 H5 项目改造为小 ...
在尤大微博铺垫着“将会引入一些关于 TypeScript 的改进”一周之后,代号为 Level E 的 Vue.js 2.5 带着日漫风来到了我们眼前。从 Release Notes 可以看到,Vue.js 2.5 有着更好的 TypeScript 集成,更好的错误处理,更好地支持单文件组件中的函数式组件以及与环境无关的服务端渲染。具体如下:
更好的 TypeScript 集成
得益于 TypeScript 团队的帮助,2.5 提供了大大改进的类型声明:
使用默认的 Vue API 时,对于 this 可以使用适当的类型推断。 它也可以在单文件组件中工作!
基于组件的 props 选项,对于 this 中的 props 输入推断。
最重要的是, 这些改进也使得纯 JavaScript 用户受益匪浅! 如果你使用 VSCode 与超级棒的的 Vetur 扩展,你将获得大大改进的自动完成建议,甚至在Vue组件中使用纯 JavaScript 时也能获得输入提示! 这是因为vue-language-server是负责分析 Vue 组件的内部包,可以利用 TypeScript 编译器来提取有关你的代码的更多信息。 此外,任何支持语言服务器协议的编辑器都可以利用 vue-language-server来提供类似的功能。
注意:TypeScript 用户还应将以下包更新为最新版本从而兼容类型声明:vue-router,vuex,vuex-router-sync 和 vue-class-component。
更好地错误处理
在 2.4 及更早版本中,我们通常使用全局 config.errorHandleroption 来处理应用程序中的意外错误。 我们还有 renderError 组件选项来处理渲染函数中的错误。 但是,我们缺少处理应用程序特定部分内的泛型错误的机制。
在2.5中,我们引入了新的 errorCaptured 钩子。 具有此钩子的组件捕获其子组件树(不包括其自身)中的所有错误(不包括在异步回调中调用的那些)。 如果你熟悉 React,这与 React 16 中引入的错误边界的概念相似。钩子接收与全局 errorHandler 相同的参数,你可以利用这个 钩子(https:// gist.github.com/yyx990803/ 9bdff05e5468a60ced06c29c39114c6b #error-handling-with-errorcaptured-hook)来优雅地处理和显示错误。
更好地支持 SFC 中的函数式组件
使用 vue-loader> = 13.3.0 和 Vue 2.5,在 * .vue 文件中定义为单个文件组件的函数式组件现在可以得到正确的模板编译,Scoped CSS和热重新加载支持。 这使得将叶子组件转换为函数式的更为容易,从而进行性能优化。
与环境无关的服务端渲染
vue-server-renderer 的默认构建假定一个 Node.js 环境,这使得它在有的 JavaScript 运行时(如 php-v8js 或Nashorn)中不可用。 在 2.5 中,我们已经发布了一个与环境无关的 vue-server-renderer 版本,可以在浏览器或纯 JavaScript 引擎中使用。 这可以打开有趣的策略,例如直接在 PHP 进程中使用 Vue 服务端渲染。
同样,建议你查看完整的发布说明从而了解其他 API 的改进,包括 v-on,v-model,scoped slot,provide/inject 等。
Vue 2.5.0 源码下载:https://codeload.github.com/vuejs/vue/zip/v2.5.0
Vue.js 这款渐进式的 JavaScript 框架自 2013 年发布至今,其简洁的语法设计、轻量快速的特点深受技术社区喜爱,在国内外都获得了非常广泛的应用及拓展,比如饿了么的开源组件库 Element UI 即是 Vue 开发,而阿里巴巴的 Weex 与 Vue 也多有合作。
今天,我们来介绍一款由美团点评研发,使用 Vue.js 来开发微信小程序的前端框架 —— mpVue。使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力。如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为 H5,mpVue将是十分契合的方案。
为了提高开发效率,增强开发体验,我们造了个用 Vue 开发小程序的轮子
小程序开发特点
微信小程序推荐简洁的开发方式,通过多页面聚合完成轻量的产品功能。小程序以离线包方式下载到本地,通过微信客户端载入和启动,开发规范简洁,技术封装彻底,自成开发体系,有 Native 和 H5 的影子,但又绝不雷同。