当前位置: 首页 > 文档资料 > Lavas 教程 >

简介

优质
小牛编辑
146浏览
2023-12-01

Lavas 是一套基于 Vue 的 PWA 解决方案,能够帮助开发者快速搭建 PWA 应用,解决接入 PWA 的各种问题,对提升用户体验,用户留存率等有明显提升,且开发者无须过多的关注 PWA 开发本身。

如果您对 PWA 的概念还不熟悉,可以参考 Lavas 官网中关于 PWA 的介绍。简而言之,PWA 的目标是让移动端的 H5 站点拥有可以媲美本地 APP 的体验,包括离线可访问,添加桌面图标以快速启动等等特性。加之移动站点无须频繁安装升级的优势,进而挑战现有 APP 的用户习惯,建立 WEB 新生态。

学习本教程前您应该掌握

  • HTML, CSS(less或stylus), JavaScript 等前端编程基础
  • ES6/7 部分常用语法,如 Promise, import/export 等
  • Vue, Vuex, Vue-router 等基本的开发知识 (教程API 文档编程风格指南)
  • Webpack, Node.js 等基本知识 (推荐

Lavas 后续的开发计划也已经将支持其他主流前端框架 (如 react) 纳入其中,如果您持续关注我们(Github),给我们多提意见甚至代码,我们将会非常感谢!

Lavas 能做什么

Lavas 解决方案能够帮助开发者完成:

  • 最基本的移动站点建设,包括 Vue, Vuex, Vue-router, webpack 等常用且成套的技术提供支持

  • 允许站点添加至手机桌面,再次打开时全屏运行,摆脱浏览器的固定显示框架(地址栏,菜单栏等)

  • 强化缓存,允许站点在弱网甚至离线的情况下继续显示内容

  • 支持消息推送,帮助站长主动推送用户感兴趣的信息,提升业务指标

  • 支持服务端渲染(SSR),对搜索引擎更加友好

  • 支持App Shell 模型,在正常情况下提升加载性能,在异常情况下优化错误显示。

总结起来,Lavas 除了能帮助开发者完成 Vue 能做的(搭建基本站点)之外,通过一些配置还能够快速赋予站点 PWA 的特性,且不需要开发者过多的关心 PWA 的详细开发技术和细节。

我们可以粗略的理解为: Lavas = Vue + PWA

最后更新:

类似资料

  • Lavas 是什么 Lavas 是一个基于 Vue 的 PWA (Progressive Web Apps) 完整解决方案。我们将 PWA 的工程实践总结成多种 Lavas 应用框架模板,帮助开发者轻松搭建 PWA 站点,且无需过多的关注 PWA 开发本身。 Lavas 做什么 简单来说,站点 PWA 化需要做什么,Lavas 就做什么。要更好的理解 Lavas ,我们需要从 PWA 是什么讲起。

  • Lavas 目前支持两种渲染模式,分别是服务端渲染 (SSR) 和 浏览器端渲染。 而浏览器端渲染时,整个项目构建完成后只有一个 HTML 入口 index.html,因此这时本质上等价于单页应用,即 SPA。 从小型站点的开发需求来说,SPA 和 SSR 已经能够覆盖绝大部分。让我们更进一步,考虑如下两种情况: 整个站点的一部分需要使用 SSR 模式渲染,另一部分使用 SPA 模式渲染。 整个站

  • 使用 lavas init 创建的模板项目中,在以下场景下都会以编程方式使用 Lavas: server.dev.js 开发环境下的 SPA/SSR 模式。 server.prod.js 生产环境下的 SSR 模式。 可见以编程方式使用 Lavas 的主要场景就是 SSR 模式,而在 SPA 模式下仅仅是供开发服务器使用。因此,如果开发者选择了 SSR 模式,阅读下面的内容将十分有帮助: 如何选择

  • warn lavas-core-vue@1.2.0 版本开始使用 workbox@3.x,模板部分和配置项发生了一定的变化。本篇文档将以最新版本进行描述,如果您还在使用 lavas-core-vue@1.1.x (即 workbox@2.x ),可以查看旧版文档 Service Worker 可以说是 PWA 中最能发挥开发者想象力和最复杂的部分。有关 Service Worker 本身的介绍可以

  • warn lavas-core-vue@1.2.0 版本开始使用 workbox@3.x,模板部分和配置项发生了一定的变化。本篇文档作为旧版文档的形式出现,仅为还在使用 lavas-core-vue@1.1.x (workbox@2.x) 的开发者过渡使用。部分链接可能失效,因为 workbox 也对官网进行了升级。workbox2 官网 Service Worker 可以说是 PWA 中最能发挥

  • lavas static 使用 Lavas 内置的静态服务器启动前端渲染的 Lavas 项目。 比较常规的用法是在前端渲染的项目进行构建后使用此命令进行启动。具体来说,如果开发者的项目使用的是前端渲染 (ssr: false),并且经过 lavas build 之后,在生成的 /dist 目录中,可以使用 lavas static 启动项目。在这种模式下,所有的代码均经过了 babel 转码和 w