Nuxt.js零基础探索（一）

扯蛋蛋
636 阅读6分钟

前言

大家好我是你们的扯蛋蛋，本期文章我将给大家带来的是Nuxt.js，我最近也在学习nuxt.js,也写一篇文章来总结一下 2016 年 10 月 25 日，zeit.co 背后的团队对外发布了 Next.js ，一个 React 的服务端渲染应用框架。几小时后，与 Next.js 异曲同工，一个基于 Vue.js 的服务端渲染应用框架应运而生，我们称之为：Nuxt.js。 Nuxt.js 是一个基于 Vue.js 的服务器端渲染（SSR）应用框架。它使得 Vue.js 开发人员能够更容易地构建通用应用程序，即这些应用程序可以同时在服务器和客户端上运行。Nuxt.js 为 Vue.js 提供了高级别的配置，让开发者能够专注于编写应用程序的代码，而不是配置。

SSR 和 SPA

首先我们来说一说服务端渲染（SSR） 和 客户端渲染（SCR） 的区别吧

服务端渲染（SSR）

服务器端渲染（SSR）是一种页面处理技术，它指的是在服务器端完成页面的HTML结构拼接，然后将完整的HTML页面发送到客户端浏览器，最终由浏览器展示给用户。以下是关于服务器端渲染（SSR）的清晰介绍：

定义与原理

  • 定义：服务器端渲染（Server-Side Rendering，简称SSR）是由服务器端完成页面的HTML结构拼接，并将渲染好的HTML页面发送到客户端浏览器，供用户浏览的技术。

  • 原理：

    1. 浏览器发送请求给服务器，请求访问某个URL。
    2. 服务器接收请求，并获取页面所需的数据。
    3. 服务器使用模板引擎（如EJS、Nunjucks等）结合获取到的数据，渲染出完整的HTML页面。
    4. 服务器将渲染好的HTML页面作为响应返回给浏览器。
    5. 浏览器直接展示服务器返回的HTML页面给用户。

优点

  1. 快速的首屏加载：用户无需等待JavaScript加载和执行，可以直接看到由服务器渲染好的页面内容，提高了用户体验。
  2. 有利于SEO：搜索引擎爬虫可以直接抓取到由服务器渲染好的HTML页面内容，有利于提升网站的搜索引擎排名。
  3. 更好的性能：由于页面内容在服务器端已经渲染完成，因此可以减轻客户端浏览器的渲染负担，提高页面性能。

缺点

  1. 服务器负载：由于需要在服务器端进行页面渲染，因此会增加服务器的负载。
  2. 开发复杂度：在服务器端渲染页面可能需要处理更多的逻辑和数据，增加了开发的复杂度。

实现方式

服务器端渲染的实现方式有多种，例如使用Node.js结合Express框架和模板引擎来实现。在Vue.js和React等前端框架中，也有对应的服务器端渲染解决方案，如Nuxt.js和Next.js等。

应用场景

服务器端渲染适用于需要快速首屏加载、SEO优化、以及支持低性能设备或老旧浏览器的场景。同时，在复杂的Web应用中，使用服务器端渲染也可以帮助实现更好的性能和用户体验。 cs

客户端渲染（CSR）

客户端渲染是一种在客户端（即用户的浏览器）进行页面渲染的技术。以下是对客户端渲染（CSR）的清晰介绍，包括其定义、原理、优点、缺点以及应用场景。

定义与原理

  • 定义：客户端渲染（Client-Side Rendering，简称CSR）是指在用户的浏览器端，通过JavaScript动态地生成和更新HTML页面的技术。

  • 原理：

    1. 浏览器发送请求到服务器，请求HTML、CSS和JavaScript等资源。
    2. 服务器响应请求，返回初始的HTML框架（可能包含静态内容和用于异步数据请求的脚本）。
    3. 浏览器加载HTML、CSS和JavaScript资源，并执行JavaScript代码。
    4. JavaScript代码通过API请求从服务器获取数据。
    5. JavaScript在客户端（浏览器）根据获取的数据动态生成或更新HTML页面内容。

优点

  1. 高度的交互性：由于页面渲染和更新都在客户端进行，因此可以实现丰富的用户交互和实时更新。
  2. 减轻服务器压力：由于大部分渲染工作都在客户端完成，因此服务器只需提供数据和API接口，从而降低了服务器的负载。
  3. 支持前后端分离：前端负责渲染和交互，后端提供数据和API，实现了真正的前后端分离，有助于开发和维护的分工协作。

缺点

  1. 首屏加载速度较慢：用户需要等待JavaScript加载和执行完成才能看到页面内容，可能导致首屏加载速度较慢。
  2. SEO问题：由于搜索引擎爬虫可能无法直接执行JavaScript来渲染页面内容，因此可能导致搜索引擎无法抓取和索引页面内容，影响SEO效果。
  3. 客户端计算负担较重：由于页面渲染和更新都在客户端进行，因此可能增加客户端的计算负担，尤其是在低性能设备上。

应用场景

  1. 高交互性的应用：如单页应用（SPA）、复杂的数据可视化等，需要丰富的用户交互和实时更新。
  2. 前后端分离的项目：前端负责渲染和交互，后端提供数据和API，适合大型项目和团队协作。
  3. 对SEO要求不高的应用：如后台管理系统、个人博客等，对搜索引擎排名要求不高，可以优先考虑用户体验和交互性。

创建一个nuxt项目

我们可以 NUXT.js的官方网站 里面有详细的步骤，我也来给大家写一下吧

 npx create-nuxt-app <项目名>

然后接下来就会有一些选择配置，这个是我选择的，大家可以自主选择

image.png

然后就按图片上的步骤去做吧

image.png

我们的项目创建成功了，可以开启下一个路程了

da8077fa35534ccd9b835f47881f64f4~tplv-k3u1fbpfcp-zoom-in-crop-mark_1512_0_0_0.webp

如觉得本文对你有帮助的话，欢迎点赞❤❤❤，写作不易，持续输出的背后是无数个日夜的积累，您的点赞是持续写作的动力，感谢支持！接下来我会开始写一期关于nuxt的文章，喜欢的可以点个关注呗

avatar
文章
阅读
粉丝