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.jsexport const actions = {async nuxtServerInit({ commit }, { app }) {// 这里可以进行一些初始化操作，例如获取数据、设置全局变量等等。}
}
javascript
// store/posts.jsexport 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，如果想要更加深入的，可以自行去官网阅读相关文档。😀😀
