首页 > 其他分享 >第四十篇 vue - 进阶主题 - 使用 Vue 的多种方式

第四十篇 vue - 进阶主题 - 使用 Vue 的多种方式

时间:2023-04-05 17:48:22浏览次数:42  
标签:Vue 进阶 渲染 HTML 应用 SSG 第四十 页面

使用 Vue 的多种方式

在 Web 的世界中从来就没有可以适配所有场景、解决所有问题的银弹。正因如此,Vue 被设计成一个灵活的、可以渐进式集成的框架。根据使用场景的不同需要,相应地有多种不同的方式来使用 Vue,以此在技术栈复杂度、开发体验和性能表现间取得最佳平衡

独立脚本

Vue 可以以一个单独 JS 文件的形式使用,无需构建步骤!如果你的后端框架已经渲染了大部分的 HTML,或者你的前端逻辑并不复杂,不需要构建步骤,这是最简单的使用 Vue 的方式。在这些场景中你可以将 Vue 看作一个更加声明式的 jQuery 替代品。

Vue 也提供了另一个更适用于此类无构建步骤场景的版本 petite-vue。它为渐进式增强已有的 HTML 作了特别的优化,功能更加精简,十分轻量

作为 Web Component 嵌入

你可以用 Vue 来构建标准的 Web Component,这些 Web Component 可以嵌入到任何 HTML 页面中,无论它们是如何被渲染的。这个方式让你能够在不需要顾虑最终使用场景的情况下使用 Vue:因为生成的 Web Component 可以嵌入到旧应用、静态 HTML,甚至用其他框架构建的应用中

单页面应用 (SPA)

一些应用在前端需要具有丰富的交互性、较深的会话和复杂的状态逻辑。构建这类应用的最佳方法是使用这样一种架构:Vue 不仅控制整个页面,还负责处理抓取新数据,并在无需重新加载的前提下处理页面切换。这种类型的应用通常称为单页应用 (Single-Page application,缩写为 SPA)。

Vue 提供了核心功能库和全面的工具链支持,为现代 SPA 提供了极佳的开发体验,覆盖以下方面:

客户端路由
极其快速的构建工具
IDE 支持
浏览器开发工具
TypeScript 支持
测试工具
SPA 一般要求后端提供 API 数据接口,但你也可以将 Vue 和如 Inertia.js 之类的解决方案搭配使用,在保留侧重服务端的开发模型的同时获得 SPA 的益处。

全栈 / SSR

纯客户端的 SPA 在首屏加载和 SEO 方面有显著的问题,因为浏览器会收到一个巨大的 HTML 空页面,只有等到 JavaScript 加载完毕才会渲染出内容。

Vue 提供了一系列 API,支持将一个 Vue 应用在服务端渲染成 HTML 字符串。这能让服务器直接返回渲染好的 HTML,让用户在 JavaScript 下载完毕前就看到页面内容。Vue 之后会在客户端对应用进行“激活 (hydrate)”使其重获可交互性。这被称为服务端渲染 (SSR),它能够极大地改善应用在 Web 核心指标上的性能表现,如最大内容绘制 (LCP)。

Vue 生态中有一些针对此类场景的、基于 Vue 的上层框架,比如 NuxtJS,能让你用 Vue 和 JavaScript 开发一个全栈应用

JAMStack / SSG

如果所需的数据是静态的,那么服务端渲染可以提前完成。这意味着我们可以将整个应用预渲染为 HTML,并将其作为静态文件部署。这增强了站点的性能表现,也使部署变得更容易,因为我们无需根据请求动态地渲染页面。Vue 仍可通过激活在客户端提供交互。这一技术通常被称为静态站点生成 (SSG),也被称为 JAMStack。

SSG 有两种风格:单页和多页。这两种风格都能将站点预渲染为静态 HTML,区别在于:

单页 SSG 在初始页面加载后将其“激活”为 SPA。这需要更多的前期 JS 加载和激活成本,但后续的导航将更快,因为它只需要部分地更新页面内容,而无需重新加载整个页面。

多页 SSG 每次导航都会加载一个新页面。好处是它可以仅需最少的 JS——或者如果页面无需交互则根本不需要 JS!一些多页面 SSG 框架,如 Astro 也支持“部分激活”——它允许你通过 Vue 组件在静态 HTML 中创建交互式的“孤岛”。

单页 SSG 更适合于重交互、深会话的场景,或需要在导航之间持久化元素或状态。否则,多页 SSG 将是更好的选择。

Vue 团队也维护了一个名为 VitePress 的静态站点生成器,你正在阅读的文档就是基于它构建的!VitePress 支持两种形式的 SSG。另外,NuxtJS 也支持 SSG。你甚至可以在同一个 Nuxt 应用中通过不同的路由提供 SSR 和 SSG

Web 之外...

尽管 Vue 主要是为构建 Web 应用而设计的,但它绝不仅仅局限于浏览器。你还可以:

  1、配合 Electron 或 Tauri 构建桌面应用
  
  2、配合 Ionic Vue 构建移动端应用
  
  3、使用 Quasar 用同一套代码同时开发桌面端和移动端应用
  
  4、使用 Vue 的自定义渲染 API 来构建不同目标的渲染器,比如 WebGL 甚至是终端命令行!

标签:Vue,进阶,渲染,HTML,应用,SSG,第四十,页面
From: https://www.cnblogs.com/caix-1987/p/17289977.html

相关文章

  • 第四十一篇 vue - 进阶主题 - 组合式 API 常见问答
    什么是组合式API?组合式API(CompositionAPI)是一系列API的集合,使我们可以使用函数而不是声明选项的方式书写Vue组件。它是一个概括性的术语,涵盖了以下方面的API1、响应式API例如ref()和reactive(),使我们可以直接创建响应式状态、计算属性和侦听器。2、生命......
  • 第四十二篇 vue - 进阶主题 - 深入响应式系统
    响应式系统Vue最标志性的功能就是其低侵入性的响应式系统。组件状态都是由响应式的JavaScript对象组成的。当更改它们时,视图会随即自动更新。这让状态管理更加简单直观,但理解它是如何工作的也是很重要的,这可以帮助我们避免一些常见的陷阱。在本节中,我们将深入研究Vue响应性......
  • 第四十四篇 vue - 进阶主题 - 渲染函数 & JSX
    渲染函数&JSX在绝大多数情况下,Vue推荐使用模板语法来创建应用。然而在某些使用场景下,我们真的需要用到JavaScript完全的编程能力。这时渲染函数就派上用场了基本用法1、创建VnodesVue提供了一个h()函数用于创建vnodesimport{h}from'vue'constvnode=h(......
  • 第四十三篇 vue - 进阶主题 - 渲染机制
    渲染机制Vue是如何将一份模板转换为真实的DOM节点的,又是如何高效地更新这些节点的呢?我们接下来就将尝试通过深入研究Vue的内部渲染机制来解释这些问题虚拟DOM你可能已经听说过“虚拟DOM”的概念了,Vue的渲染系统正是基于这个概念构建的虚拟DOM(VirtualDOM,简称VDOM......
  • 第四十六篇 vue - 进阶主题 - 动画技巧
    动画技巧Vue提供了<Transition>和<TransitionGroup>组件来处理元素进入、离开和列表顺序变化的过渡效果。但除此之外,还有许多其他制作网页动画的方式在Vue应用中也适用。这里我们会探讨一些额外的技巧基于CSSclass的动画对于那些不是正在进入或离开DOM的元素,我们可......
  • 第四十五篇 vue - 进阶主题 - Vue 与 Web Components
    Vue与WebComponentsWebComponents是一组web原生API的统称,允许开发者创建可复用的自定义元素(customelements)Vue和WebComponents是互补的技术。Vue为使用和创建自定义元素提供了出色的支持。无论你是将自定义元素集成到现有的Vue应用中,还是使用Vue来构建和......
  • 第四十七篇 vue - vue2 和 vue3 的对比
    vue2和vue3不同点汇总1、生命周期2、多根节点3、CompositionApi4、异步组件5、响应式原理6、Teleport7、虚拟Dom8、事件缓存9、Diff算法优化10、打包优化11、TypeScript支持生命周期1、Vue3生命周期整体上变化不大,Vue3在大部分生命周期钩子名称......
  • 基于SpringBoot+Vue+ElementUI的在线考试系统(可做毕设)
    项目简介青云是一套麻雀虽小但五脏俱全的在线考试系统。采用了目前主流的技术栈SpringBoot+Vue+ElementUI,并进行了前后端分离。对于事务和锁都有应用,非常适合学习练手。项目演示项目演示地址:http://xuezhabiji.com:5000账号:admin密码:admin代码获取:github:https://github.com......
  • vue项目启动时 `webpack-dev-server –inline –progress –config build/webpack.dev
    vue项目在npmrundev时报错[email protected]:webpack-dev-server--inline--progress--configbuild/webpack.dev.conf.js解决这类问题主要分两种情况这个项目已经构建好的项目,你只是从git、snv或者其他地方引入,别人能运行你不能运行这是一个新构建的vue项目第一......
  • 从一个电影网站项目学习[前台显示端]—Vue.js
    本篇文章通过一个完整的电影介绍和电影资源发布网站的项目,过一遍Vue.js。通过前面章节的介绍http://www.shanhubei.com/tag/vue或在本平台下的相关文章了解一下。(ps本人是通过工具编辑器编写,同步在多个平台上)项目源码:github:https://github.com/shanhubei/vue_movie_example......