Nuxt.js

最新推荐文章于 2024-06-17 15:52:23 发布

SYK---Programm

最新推荐文章于 2024-06-17 15:52:23 发布

阅读量732

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_62860882/article/details/131140303

版权

Vue-cli的问题

SEO 搜索引擎

多页面

title,描述，关键词

网站内容是怎么来的。(SPA是通过js获取数据，但是在获取数据之前页面已经被渲染出来了)

在页面渲染之前就要将数据拿到。

两种方式：预渲染，服务端渲染。

预渲染

页面渲染之前，将内容放在页面。

在这里插入图片描述

使用插件 prerender-spa-plugin

然后在vue.config.js中配置。

修改title描述关键词：vue-meta-info

然后引入插件，进行使用。

到页面组件中配置。

在生产的环境下还是看不到，在打包的时候就可以看到。多页面可以。

可以解决

打包多页面
可以解决每个页面单独生成title描述关键词
接口数据是在html生成之前就放在页面上的，爬虫可以抓取到内容。

存在的问题

预渲染无法实现动态路由。
如果title描述关键词来自于接口的数据，配置到meta-info也是不行的。

适合：

某几个页面需要SEO

如果整个网站都需要SEO，就需要SSR.

Nuxt服务端渲染

在这里插入图片描述

node.js作为中间层的必要性。

(82条消息) node 中间层_神也佑我YK的博客-CSDN博客

适合：

一个项目所有页面都要做seo。

项目解决seo的方案选择

1.前后端不分离.

不存在接口请求数据，压力在后端。如果后端的服务器不好，就会非常慢。
安全。不会暴露接口

2.前后端分离的.

2.1 SPA单页面应用(没有seo)

压力客户端

2.2 预渲染

一个项目不是所有页面都是做seo的。

问题：在html页面加载之前，数据过来渲染后，才有dom结构，也有可能存在页面空白的情况。

2.3 服务端渲染

起了两个服务。一个是后端语言的服务，一个是node.js的服务。

Nuxt安装和目录结构

安装过程中的选项

在这里插入图片描述

目录结构

pages：存放页面类似于cli里面的views文件夹。

components: components配置组件的。

static: 存放静态资源

store: vuex状态树

nuxt.config.js: 配置文件

自动寻找pages/index.vue

隐藏文件.nuxt里面有相应的路由信息。

Nuxt生命周期

分类：

服务端生命周期

服务端和客户端共有生命周期

客户端生命周期

服务端生命周期

NuxtServerInit(store,context)

参数一：vuex上下文

参数二：nuxt上下文

应用场景：判断用户登录

在这里插入图片描述

服务端跟页面没有关系。不管进入到哪个页面都会进入服务端的生命周期。服务端的生命周期运行完了才会运行其他的。

为什么是写在Vuex中呢？

nuxtServerInit 是一个 Nuxt.js 提供的 action 方法，用于初始化应用的状态。和其他的 actions 类似，这个方法也必须定义在 Vuex store 中。

在 Nuxt.js 中，为了方便用户使用 Vuex 管理应用程序的状态，提供了一种约定俗成的目录结构：将 Vuex 相关的代码都放在 store/ 目录中。在 store/ 目录中，每个文件对应一个 Vuex 模块，它可以包含 state、mutations、actions 和 getters 等等。因此，如果您需要使用 nuxtServerInit，那么就需要在 Vuex 的某个模块中定义该方法。

具体来说，您可以在 store/index.js 文件中定义 nuxtServerInit 方法，或者在任何一个 Vuex 模块中定义该方法，例如：

javascript
// store/index.js

export const actions = {
  async nuxtServerInit({ commit }, { app }) {
    // 这里可以进行一些初始化操作，例如获取数据、设置全局变量等等。
  }
}
javascript
// store/posts.js

export const actions = {
  async nuxtServerInit({ commit }, { app }) {
    // 这里可以进行一些初始化操作，例如获取博客文章列表、设置全局变量等等。
  }
}

无论您在哪个模块中定义 nuxtServerInit，只要您启用了 Nuxt.js 的 SSR 功能，在服务端渲染时都会自动执行该方法，并将上下文对象作为参数传递给该方法。通过在 nuxtServerInit 中进行初始化操作，您可以确保应用程序的状态在 SSR 和 CSR 模式下都能正确加载和渲染

middleware({store,route,redirect,params,query,req,res}){}
在这里插入图片描述

或者middleware(){}

应用：导航守卫

在这里插入图片描述

validate({params,query})

在这里插入图片描述

需要返回true，才能正常访问，否则就会返回404页面。

如果id="",判断路径是否正确，然后决定是否返回404页面。

asyncData({store,params})

pages中的页面来请求数据的。

fetch({app,store,params})
components组件来请求数据的。

服务端和客户端共有的生命周期

beforeCreate

created

反正没有dom。

客户端生命周期

和vue中的一模一样。

Nuxt路由(自动生成)

在pages里面写vue文件，会自动生成路由。

和vue路由有很多相似点和区别。

路由跳转 <nuxt-link to=""></nuxt-link>

js跳转：this.$router.push

传参：query:{a:1}

改造成二级路由。

根目录.vue文件和文件夹一样的名称。

_id文件夹命名就是动态路由。

Nuxt引入路由没有懒加载，但不需要，因为他是服务端返回的。

将vue中的router转移到nuxt中

下载@nuxt.js/router

完成后，在nuxt.config.js的modules模块进行配置。

把Vue中的router文件放入nuxt项目跟目录。

文件名改为router.js

修改router.js的内容 — 看这个插件的官网。

Nuxt的导航守卫

如果用的是router.js，导航守卫跟vue中的是一样的。
首先，在nuxtjs中router的用法.
在这里插入图片描述

router.js用法

全局共享

在这里插入图片描述

路由（局部）独享

beforeEach服务端和客户端的生命周期。

在这使用localStorage没用，在服务端没有localStore。
在这里插入图片描述

nuxt.js用法

中间件middleWare(生命周期) 全局局部

插件 plugins

middleWare全局用法

nuxt.config.js

在这里插入图片描述

middleware/auth.js
在这里插入图片描述

middleware局部用法

在这里插入图片描述

middleWare(){
	
}

直接写逻辑也可以。

plugins全局用法

nuxt.config.js

在这里插入图片描述

plugins/router.js
在这里插入图片描述

在这里插入图片描述

解决服务端拿不到localStorage和cookie

cookie-universal-nuxt做持久化存储，防止刷新就失效了。

放到cookies里面。

nuxt.config.js进行配置

modules:[
	'cookie-universal-nuxt'
]

正常使用

小案例

在这里插入图片描述

nuxt中的配置

head

全局配置

在这里插入图片描述

seo，如果页面没有配置head，就会走到这个全局的head。关键字！

单独配置

在这里插入图片描述

一般来说，网页图标和编码放在全局就ok了。

nuxt-child

动态改变title的值
在这里插入图片描述

练习

在这里插入图片描述

css配置

reset.css了解一下。

在这里插入图片描述

引入全局的css

默认情况下：

nuxt认为页面之间是独立的，组件之间是可以共享样式的。

但一般建议写法都是写scoped，这样都是独立的。

要使用scss，就需要去安装对应的插件

npm i sass sass-loader

然后某个页面或者组件就可以使用scss

plugins

放入全局的js文件。

在这里插入图片描述

类似于main.js

element-uijs文件在plugin，css文件在css
执行时机：

在 Nuxt.js 中，插件 (plugin) 会在应用初始化之前执行。具体来说，在服务端渲染 (SSR) 模式下，插件会在服务器启动时执行；在客户端渲染 (CSR) 模式下，插件会在客户端应用挂载之前执行。

一个插件在整个应用中只会执行一次，不管是在服务端还是客户端。这也就意味着，如果你在多个页面中引入了同一个插件，它也只会被执行一次。

modules和前后端数据交互

扩展功能

安装axios

npm i @nuxtjs/axios -S

然后在nuxt.config.js进行配置。

使用：

$axios

和vue一样安装axios

npm i aixos

使用

import axios from 'axios'

何时请求数据

页面级请求。

asyncData生命周期

pages目录中的页面组件才可以用

在components组件不可以使用。

在asyncData中是获取不到this的。

在这里插入图片描述

在asyncData中，是没有this的，将获取的值通过return进行返回，然后会自动和Data中的数据进行合并。

在这里插入图片描述

fetch生命周期进行接口的请求。

fetch中是有this的，asyncData中没有this

一般用于组件中的请求。页面中使用会有问题。

在这里插入图片描述

配置代理

解决跨域问题

npm i @nuxtjs/proxy -S
在modules里面配置，然后在modules里面进行配置。

在这里插入图片描述

Demo 登录&获取个人信息

在这里插入图片描述

nuxt配置之loading

在这里插入图片描述

关闭默认的loading。

在这里插入图片描述

自定义加载组件(查看api)

在这里插入图片描述

nuxt状态树

按照nuxt.js标准来写。

在这里插入图片描述

这里，关于Nuxt.js的基础知识已经说完了，Nuxt.js的主要作用是进行服务端渲染，便于SSR，如果想要更加深入的，可以自行去官网阅读相关文档。😀😀

SYK---Programm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Nuxt.js

无论您在哪个模块中定义 nuxtServerInit，只要您启用了 Nuxt.js 的 SSR 功能，在服务端渲染时都会自动执行该方法，并将上下文对象作为参数传递给该方法。这里，关于Nuxt.js的基础知识已经说完了，Nuxt.js的主要作用是进行服务端渲染，便于SSR，如果想要更加深入的，可以自行去官网阅读相关文档。中，是没有this的，将获取的值通过return进行返回，然后会自动和Data中的数据进行合并。问题：在html页面加载之前，数据过来渲染后，才有dom结构，也有可能存在页面空白的情况。
复制链接

扫一扫