前言

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

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

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

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

好处

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

这是流程:

Nuxt 服务端渲染

 

 

创建

 npm creat-nuxt-app <项目名>

运行: npm run dev

有张图来说明

目录:

Nuxt 服务端渲染

 

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

Nuxt 服务端渲染

 

 然后就可以看到

Nuxt 服务端渲染

 

 这样就创建了一个NUXT项目

 

路由

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

动态路由

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

pages/

    -- | users/

    ------ |_id.vue

 

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

 

还有就是路由守卫

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

就像这样

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

Nuxt 服务端渲染

 

 

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

 Nuxt 服务端渲染

 

 

 然后要从新刷新

 

 

二级 参数 多个参数传参 

//uers/:id/:name?

Nuxt 服务端渲染

 

 

视图

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

Nuxt 服务端渲染

 

 

 

自定义布局:

创建layouts/users.vue

如图:

Nuxt 服务端渲染

 

 

 Nuxt 服务端渲染

 

 

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

 

页面

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

Nuxt 服务端渲染

 

 

 

异步数据获取

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

(beforeCreact 生命周期之前,服务端和客户端都会执行,执行非常靠前)

代码:

Nuxt 服务端渲染

 

 

 Nuxt 服务端渲染

 

 

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

 

Nuxt 服务端渲染

 

 

 

整合 axios

Nuxt 服务端渲染

 

 

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

Nuxt 服务端渲染

 

 

 nodemon  .\api.js  运行

 

拦截器的应用

Nuxt 服务端渲染

 

 

 Vuex 

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

 

fetch的使用

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

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

Nuxt 服务端渲染

Nuxt 服务端渲染

 

 

 Nuxt 服务端渲染

 

 

 

 

 

下面就是实战了

Nuxt 服务端渲染

 

 

 

Nuxt 服务端渲染

 

 

 

构建思路

Nuxt 服务端渲染

 

 

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

 

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

 

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

 

加油呀少年

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-05-25
  • 2020-01-02
  • 2021-07-12
猜你喜欢
  • 2022-12-23
  • 2021-08-19
  • 2021-12-15
  • 2021-07-18
  • 2021-09-03
  • 2021-11-08
  • 2021-12-07
相关资源
相似解决方案