Nuxt 服务端渲染

前言

Nuxt.js 是一个基于 Vue.js 的通用应用框架。

ssr 渲染服务端 可以看官方文档 https://zh.nuxtjs.org/guide/

nuxt 与平常 jsonp 不一样 ，jsonp点击跳转是跳转到新的页面

而 Nuxt 而是打开路由，在一个页面里 这就是 取了中间件

好处

1.不仅用于服务端渲染也可用于spa 应用开发
2.异步记载，中间件支持
3.nuxt可用网站静态化

这是流程：

创建

npm creat-nuxt-app <项目名>

运行： npm run dev

有张图来说明

目录：

创建项目的时候是这样的：

然后就可以看到

这样就创建了一个NUXT项目

路由

<nuxt-link to="/users"> 用户列表</nuxt-link>

动态路由

以下划线作为前缀的为vue文件或者目录成为动态路由

pages/

-- | users/

------ |_id.vue

id 是必选参数，如果user里面没有index.vue,那将视为可选参数

还有就是路由守卫

在plugins 文件夹目录下：创建 router.js 文件：

就像这样

然后就在可以在路由首位里做些事情

然后再nuxt.config.js 文件下导入

然后要从新刷新

二级 参数 多个参数传参

//uers/:id/:name?

视图

下图展示了如何为制定路由配置和视图

自定义布局：

创建layouts/users.vue

如图：

里面可以写 顶部菜单 这样就不用在路由里面写了

页面

页面组件实际上是vue 组件，只不过Nuxt为这些组件添加一些特殊配置项

异步数据获取

asyncData 可以让我们在设置组件的数据之前能异步获取处理数据

（beforeCreact 生命周期之前，服务端和客户端都会执行，执行非常靠前）

代码：

然后可根据 process.server. 来判断是在客户端还是服务端  true (服务端)

整合 axios

在server 文件目录下创建api.js

nodemon  .\api.js  运行

拦截器的应用

Vuex

如果跟目录下存在store 目录，则nuxt将启用 vuex

fetch的使用

如果页面组件设置了fetch方法，它会在组件每次加载前被调用 （在服务端或切换至目标路由之前，比ayncData还前），

此方法需要跟服务端的人员配合

下面就是实战了

构建思路

拦截器 ： 就是看参数是否正确，用户是否正确认证，从而做出正确的相应

生命周期  beforeCreate 和create 都会在 服务端和客户端 发生  fetch 也会

就自学了这么多，还要在多加学习

加油呀少年