松鼠乐园 松鼠乐园
  • 注册
  • 登录
  • 首页
  • 快捷入口
    • Vue
    • Tensorflow
    • Springboot
    • 语言类
      • CSS
      • ES5
      • ES6
      • Go
      • Java
      • Javascript
    • 工具类
      • Git
      • 工具推荐
    • 服务器&运维
      • Centos
      • Docker
      • Linux
      • Mac
      • MySQL
      • Nginx
      • Redis
      • Windows
    • 资源类
      • 论文
      • 书籍推荐
      • 后端资源
      • 前端资源
      • html网页模板
      • 代码
    • 性能优化
    • 测试
  • 重大新闻
  • 人工智能
  • 开源项目
  • Vue2.0从零开始
  • 广场
首页 › Vue › Vapperjs – 一个基于 Vue 的 SSR 框架

Vapperjs – 一个基于 Vue 的 SSR 框架

迦娜王
3年前Vue
1,863 0 4
Vapperjs - 一个基于 Vue 的 SSR 框架

vapper

基于Vue的服务器端渲染框架

Vapper是基于Vue的服务器端render(SSR)框架,其核心目标是简单,灵活和功能强大。

主要特点

  • 简约至上

使用Vapper开发SSR应用程序的经验就像开发SPA应用程序一样。无需学习多余的概念。Vapper允许您以非常直观和一致的方式预取数据。

  • 灵活而强大

Vapper允许您有选择地启用SSR和对路由级别的控制。Vapper还允许您同时使用SSR,Fallback SAP,预渲染等。

  • 插件架构

Vapper的插件体系结构使其非常可扩展。如果您已经编写了Vue-cli3插件,您将熟悉Vapper的插件创作。Vapper通过插件支持cookie,预渲染,Apollo等。

必要的webpack配置

实际上,VueSSR 的原理非常简单,我们需要两种webpack配置:server config和用于client config在何处生成资源,用于生成发送到浏览器并生成资源。server configserver bundleclient configclientManifest

这些webpack配置与应用程序的webpack配置类似SPA,可以SSR稍作调整即可使用,因此,Vapper它不会单独管理所有webpack配置,而仅管理必要的webpack配置,因此Vapper可以与Vue-CLI和Poi。这样做的好处是Vue-CLI或Poi的功能间接成为的能力Vapper。

Vapper提供了两个用于集成Vue-CLI和Poi的软件包:

  • @ vapper / configer-vue-cli
  • @ vapper / configer-poi

如下图所示:

Vapperjs - 一个基于 Vue 的 SSR 框架

除了使用Vue-CLI或Poi作为webpack管理工具之外,您还可以使用自己的webpack配置。Vapper的Builder模块仅要求您公开getServerConfig和getClientConfig方法:

class MyOwnConfiger {
 getServerConfig () {
 return {...} // Return server configuration
 }
 getClientConfig () {
 return {...} // Return client configuration
 }
}

有关详细信息,请参阅:Write Configer

路由级别控制

Vapper考虑到以下情况,的另一个设计目标是尽可能地灵活:

Vapperjs - 一个基于 Vue 的 SSR 框架

我们的要求是,当用户访问时/home,我们想要执行服务器端渲染(SSR);当用户访问时/foo,我们希望将SPA页面发送给用户;当用户访问时/bar,我们希望将预渲染的内容发送给用户。您可能已经注意到,这要求我们具有路由级别的控制并Vapper具有此功能,如以下路由规则所示:

Vapperjs - 一个基于 Vue 的 SSR 框架

我们可以使用该@vapper/plugin-prerender插件来支持预渲染并指定需要预Vapper渲染的路由,然后html在构建时将这些路由渲染到文件中。当用户请求到达时,Vapper会将其html作为静态资源发送给用户。

错误处理

发生错误时,我们有两种选择:

Vapperjs - 一个基于 Vue 的 SSR 框架
  1. 向用户显示错误页面
  2. 退回到SPA模式,而不是显示错误页面

Vapper使您可以灵活控制错误的处理方式。发生错误时,可以向用户显示错误页面。您还可以退回到该SPA模式,以便在发生非致命错误时,用户仍然可以使用我们的应用。

您需要知道的一件事是:当Vapper项目中没有启用路由时SSR,它就是一个SPA应用程序。

数据预取

Vapper 提供了一种更直观,功能更强大的数据预取方法:

Vapperjs - 一个基于 Vue 的 SSR 框架

插件架构

的插件架构Vapper非常灵活。它借鉴了Vue-CLI的插件架构。您可以扩展CLI命令,添加服务器中间件,并使用挂钩函数来参与的整个生命周期Vapper。

事实上,很多的核心特征Vapper是在用自己的插件机制,如写Fallback SPA,micro-caching等等。此外,Vapper可逐步支持通过插件所需的功能,官方插件如下:

  • @vapper/plugin-fs-routes
  • @ vapper / plugin-cookie

您可以查看插件开发以了解如何编写插件。

开源地址:

https://github.com/vapperjs/vapper
Vapperjs vue
4
tengine和nginx哪个好
上一篇
KeyDB——据说是比Redis快5倍的中间件,为啥这么快?
下一篇
评论 (0)

请登录以参与评论。

现在登录
聚合文章
Servicios profesionales Organizaciones
1年前
在Gitee收获近 5k Star,更新后的Vue版RuoYi有哪些新变化?
1年前
vue3.x reactive、effect、computed、watch依赖关系及实现原理
1年前
Vue 3 新特性:在 Composition API 中使用 CSS Modules
1年前
标签
AI AI项目 css docker Drone Elaticsearch es5 es6 Geometry Go gru java Javascript jenkins lstm mysql mysql优化 mysql地理位置索引 mysql索引 mysql规范 mysql设计 mysql配置文件 mysql面试题 mysql高可用 nginx Redis redis性能 rnn SpringBoot Tensorflow tensorflow2.0 UI设计 vue vue3.0 vue原理 whistle ZooKeeper 开源项目 抓包工具 日志输出 机器学习 深度学习 神经网络 论文 面试题
4
相关文章
在Gitee收获近 5k Star,更新后的Vue版RuoYi有哪些新变化?
vue3.x reactive、effect、computed、watch依赖关系及实现原理
Vue 3 新特性:在 Composition API 中使用 CSS Modules
新手必看的前端项目去中心化和模块化思想
松鼠乐园

资源整合,创造价值

小伙伴
墨魇博客 无同创意
目录
重大新闻 Centos CSS Docker ES5 ES6 Go Java Javascript Linux Mac MySQL Nginx Redis Springboot Tensorflow Vue Vue2.x从零开始 Windows 书籍推荐 人工智能 前端资源 后端资源 壁纸 开源项目 测试 论文
Copyright © 2018-2022 松鼠乐园. Designed by nicetheme. 浙ICP备15039601号-4
  • 重大新闻
  • Centos
  • CSS
  • Docker
  • ES5
  • ES6
  • Go
  • Java
  • Javascript
  • Linux
  • Mac
  • MySQL
  • Nginx
  • Redis
  • Springboot
  • Tensorflow
  • Vue
  • Vue2.x从零开始
  • Windows
  • 书籍推荐
  • 人工智能
  • 前端资源
  • 后端资源
  • 壁纸
  • 开源项目
  • 测试
  • 论文
热门搜索
  • jetson nano
  • vue
  • java
  • mysql
  • 人工智能
  • 人脸识别
迦娜王
坚持才有希望
1224 文章
35 评论
242 喜欢
  • 4
  • 0
  • Top