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 也会

 

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

 

加油呀少年


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM