nuxt 简单介绍

￡神魔★判官ぃ 2022-03-07 08:40 442阅读 0赞

# 背景 #

由于面试总被问到关于ssr的问题，于是自己想搞一套服务端渲染。后来发现直接手动配置会有很多坑，与前端的朋友交流，给我推荐了nuxt，下面将研究的初步了解记录下来。

# 简介 #

Nuxt是基于Vue的一个应用框架，采用服务端渲染，使你的SPA应用(Vue)也可以拥有SEO。

# 实践 #

**1. 创建项目**

$ npm install -g vue-cli
    
    $ vue init nuxt/starter <project-name>
    $ cd <project-name>
    $ npm install
    
    $ npm run dev

# 原理 #

Nuxt.js 通过一系列构建于 Vue.js 之上的方法进行服务端渲染，具体流程如下:

调用 nuxtServerInit 方法

当请求打入时，最先调用的即是 nuxtServerInit 方法，可以通过这个方法预先将服务器的数据保存，如已登录的用户信息等。另外，这个方法中也可以执行异步操作，并等待数据解析后返回。

Middleware 层

经过第一步后，请求会进入 Middleware 层，在该层中有三步操作：

读取 nuxt.config.js 中全局 middleware 字段的配置，并调用相应的中间件方法 匹配并加载与请求相对应的 layout 调用 layout 和 page 的中间件方法

调用 validate 方法

在这一步可以对请求参数进行校验，或是对第一步中服务器下发的数据进行校验，如果校验失败，将抛出 404 页面。

调用 fetch 及 asyncData 方法

这两个方法都会在组件加载之前被调用，它们的职责各有不同， asyncData 用来异步的进行组件数据的初始化工作，而 fetch 方法偏重于异步获取数据后修改 Vuex 中的状态。

还没有评论，来说两句吧...