Nuxt.js Vue服务端渲染

❀介绍

Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。

❀特性

• 基于 Vue.js
• 自动代码分层
• 服务端渲染
• 强大的路由功能，支持异步数据
• 静态文件服务
• ES2015 + 语法支持
• 打包和压缩 JS 和 CSS
• HTML 头部标签管理
• 本地开发支持热加载
• 集成 ESLint
• 支持各种样式预处理器： SASS、LESS、 Stylus 等等
• 支持 HTTP/2 推送

❀nuxt和vue的区别

1. 路由
   nuxt按照 pages 文件夹的目录结构自动生成路由
   vue需在 src/router/index.js 手动配置路由

2. 入口页面
   nuxt页面入口为 layouts/default.vue
   vue页面入口为 src/App.vue

3. pack配置
   nuxt内置webpack，允许根据服务端需求，在 nuxt.config.js 中的build属性自定义构建webpack的配置，覆盖默认配置。
   vue关于webpack的配置存放在build文件夹下

❀原项目问题及优化点

1. 问题

1 - 1、原项目中的整体适配

首页的自适应适配修改改了好几次，在版本较低的浏览器中一些新增的属性不会实现，造成页面布局混乱；
在移动端打开，页面为固定一部分，不可移动；
在分辨率较小的屏幕上，部分模块超出页面显示，无法拖动；
不可以给固定的宽高，需要计算比例，来自适应

1 - 2、布局结构

页面布局需要分模块进行开发，大体的结构需要构建一个完美的模板来添置内容；
需要将项目的每一个spa进行整合归类，放进不同的文件夹；
要公共组件进行封装，公共样式进行整合

2. 优化点

2 - 1、优化SEO

搜索引擎爬虫只会爬去源码，不会执行脚本。使用MVVM框架之后，页面大多数DOM元素是客户端根据js动态生成的，可爬取分析的内容很少，而且搜索引擎爬虫不会等数据加载完之后再去抓取。

2 - 2、首屏渲染慢

由于是大型单页面应用，资源请求量大，造成首屏渲染加载缓慢

2 - 3、页面出现错误信息直接卡死

❀为什么使用Nuxt

1. Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用

1. 因为是服务端渲染，返回的是已经获取了异步数据并执行JavaScript脚本的最终HTML，爬虫就可以抓取完整的页面信息
2. 而且对于服务端渲染而言，首屏渲染是node发送过来的html字符串，不依赖于js文件，这样用户就能很快的看到页面内容，可以很大程度上解决页面白屏的等待问题
3. 在nuxt中，如果由于服务器或api错误导致无法渲染，就要做好容错机制，可以使用context.error方法

async asyncData(ctx){
  try {
    throw new Error()
  } catch {
    ctx.error( {statusCode: 500, message: '服务器开小差了~'} ) // 这里的statusCode参数必须是http状态码
  }
}

此时，错误页可以通过/layout/error.vue自定义

任何vue组件的生命周期内，只有beforeCreate和created这两个钩子会在浏览器端和服务端均被调用；其他的钩子都只会在浏览器端调用

2. Nuxt.js中的布局结构

1. nuxt.js实现了一个新的概念，layout布局，我们可以通过layout布局方便的实现页面的多个布局之间方便的切换。在项目中实现现了三种常用的布局，即：
   • 两栏布局，左栏固定，右栏动态宽度；
   • 错误页提示，页面中间一个提示框的布局方案；
   • 纯白页面布局
2. 具体开发的页面中，如果使用默认布局，则不需指定页面的布局，nuxt框架会自动对没有指定布局的页面和default布局进行关联。如果需要指定布局，则在layout字段中对布局进行指定
3. Nuxt.js中的默认布局在Layouts文件夹中，其他文件夹管理静态资源，组件，和页面，分工明确

❀客户端渲染 VS 服务端渲染

要想使用nuxt.js，首先弄清楚客户端渲染和服务端渲染这两个概念

客户端

简单理解就是，在服务端放一个html 页面，客户端发起请求时，服务端把页面（响应的是字符串）发送过去。客户端从上到下依次解析，如果发现ajax请求就再发送新请求，拿到ajax 响应结果以后渲染模板引擎。整个过程至少要发起两次请求。

但是，这种渲染方式存在的弊端也日益显露出来，比如首屏渲染慢，不利于seo等问题。想对应的，服务端渲染恰好弥补了这些不足。

服务端

在服务端渲染出完整的首屏dom结构，直接发送到浏览器；前端拿到的内容包括首屏及完整spa结构，应用激活后依然按照spa方式运行。整个过程只向服务端发起一次请求。

❀优点

一是更利于SEO。因为爬虫只会爬取源码，不会执行脚本。使用了MVVM框架之后，页面的大多数DOM元素是在客户端根据js动态生成的，可供爬虫抓取分析的内容很少。而且浏览器爬虫不会等数据加载完成之后再去抓取。服务端渲染返回的是已经获取了异步数据并执行JavaScript脚本的最终HTML，爬虫就可以抓取完整的页面信息。

二是更利于首屏渲染。对服务端渲染而言，首屏渲染是node发送过来的html字符串，不依赖于js文件，这样用户就能更快地看到页面内容。尤其是大型单页应用，资源请求量大，造成首屏渲染加载缓慢，使用服务端渲染就可以在很大程度上解决首页的白屏等待问题。

❀功能特性的延展及新增

对于展示宣传型页面，如官网，必须进行SSR。

运行

npm run dev

生命周期

Nuxt在vue的基础上对生命周期做了拓展

export defualt {
  middleware(){ }, // 服务端
  validate(){ },  // 服务端
  asyncData(){ },  // 服务端
  fetch(){ },  // store数据加载
  beforeCreate(){ },  // 服务端和客户端都会执行
  created(){ },  //  服务端和客户端都会执行
  beforeMount(){ }, // 
  mounted(){ } // 客户端
}

路由

nuxt根据pages目录结构生成路由配置，异步数据asyncData，必须要页面组件才能调用asyncData,asyncData传入context参数，可以获取一些信息

export default {
  asyncData(ctx){
    ctx.app   // 根实例
    ctx.route   // 路由实例
    ctx.params   // 路由参数
    ctx.query   // 路由问号后的参数
    ctx.error   // 错误处理方法
  }
}

使用这个方法时要注意，如果由于服务器或api错误导致无法渲染，就要做好容错机制，可以使用context.error方法

async asyncData(ctx){
  try {
    throw new Error()
  } catch {
    ctx.error( {statusCode: 500, message: '服务器开小差了~'} ) // 这里的statusCode参数必须是http状态码
  }
}

此时，错误页可以通过/layout/error.vue自定义

• 任何vue组件的生命周期内，只有beforeCreate和created这两个钩子会在浏览器端和服务端均被调用；其他的钩子都只会在浏览器端调用

middleware()

在特定页面实战中间件使用axios请求数据

1. nuxt默认安装axios，所以只要安装proxy即可

npm install @nuxtjs/proxy

2. 在nuxt.config.js中加上

export default {
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],
  proxy: {
    './api': {
      target: 'http://www.xxx.com',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    }
  }
}

3. 页面中使用

import axios from 'axios'
export default {
    data () {
        return {
          page: 0
        }
    },
    async asyncData () {
        let data = await axios.get('http://localhost:3000/api/admin/list')
        return {
          page: data.data.page
        }
  },
}

• 采用 import axios from 'axios' 方式引入axios时，接口参数前须加baseURL

使用插件mint-ui

在plugins文件夹中添加插件文件 mint-ui.js

import Vue from "vue";
import Mint from "mint-ui";

Vue.use(Mint);

在nuxt.config.js中配置plugins字段

/**
  * 配置第三方插件
  */
 plugins: [{ src: "~plugins/mint-ui", ssr: true }],

//同时nuxt还支持区分只在浏览器中运行和只在服务端运行的插件

//只在浏览器运行：配置nuxt.config.js中plugins字段，将引入的插件属性设置为ssr： false
//只在服务端运行：直接在webpack打包server.bundle.js文件中，将process.SERVER_BUILD设置为true即可

layout布局

1.nuxt.js实现了一个新的概念，layout布局，我们可以通过layout布 局方便的实现页面的多个布局之间方便的切换。在项目中实现现了三种常用的布局，即：

 两栏布局，左栏固定，右栏动态宽度；
 错误页提示，页面中间一个提示框的布局方案；
 纯白页面布局

2.具体开发的页面中，如果使用默认布局，则不需指定页面的布局，nuxt框架会自动对没有指定布局的页面和default布局进行关联。如果需要指定布局，则在layout字段中对布局进行指定

编译过程

（1）加载nuxt.config.js；

（2）初始化nuxt，builder，开始执行构建；

（3）准备模板使用的参数，然后根据模板生成真正的webpack编译的js；

（4）分别执行客户端编译和服务端编译，生成最终的js脚本；

（5）编译成功后，就需要启动服务，监听端口，这个是在npm run start中实现的。

静态化（预渲染）

支持 Vue.js 应用的静态化算是 Nuxt.js 的一个创新点，通过 nuxt generate 命令实现。
该命令依据应用的路由配置将每一个路由静态化成为对应的 HTML 文件。
例如：以下文件结构

-| pages/
----| about.vue
----| index.vue

静态化后变成：

-| dist/
----| about/
------| index.html
----| index.html

静态化可以让你在任何一个静态站点服务商托管你的Web应用，这个命令所提供的功能，是向开发集成各种微服务（microservices）的 Web 应用迈开的新一步。

总结

通过对客户端/服务端基础架构的抽象组织，Nuxt.js主要关注的是应用的UI渲染。它的出现为 Vue.js 开发者搭建服务端渲染项目提供了巨大的便利。
小小新人，多多支持 ：）~~