Nuxt.js服务端渲染入门

做者：太皇太后@毛豆前端

随着Vue使用率的持续上长，愈来愈多的页面都应用了浏览器渲染的方式，极大提高了前端的开发的质量和效率，可是也带来了首屏渲染慢、SEO不友好及其余一些问题。 基于Vue的SSR构架Nuxt.js很好的解决了这个问题，页面直出，先后端同构，不只解决了首屏直出渲染、SEO等问题，在开发质量和效率也没有任何损失。

1、Nuxt.js简介

Nuxt.js是一个针对Vue的SSR框架，采用模块化的架构，简单易用，性能好。Nuxt.js的开发者积极活跃，版本迭代迅速，于2018年1月9日发布了v1.0.0正式版本。并且获得了Vue官网的大力推荐，接下来让咱们一块儿看看Nuxt.js的强大之处。

2、SSR模型创建

Nuxt.js 是一个基于vue.js的通用应用框架，其核心主要是经过vue-server-renderer模块来实现服务端渲染。 vue-server-renderer是Vue服务端Node.js渲染的一个模块，用来生成HTML内容。 使用步骤以下：

1. npm install vue vue-server-renderer --save-dev
2. 新建项目结构以下：

3. 在server.js文件中编写代码：

4. 在template.html编写html，注意 <!—vue-ssr-outlet—> 这个必须写，至关于占位，服务端渲染的页面内容填充到此。

5. 运行命令node server.js启动服务

6. 浏览器打开http://localhost:3100/,会看到data-server-rendered = “true”，表示是服务端渲染

那么有了上面的例子，咱们再看看如何使用Nuxt.js来实现服务端页面渲染。

3、建立一个Nuxt.js项目

1. 安装

确保安装了npx（npx在npm版本5.2.0默认安装了）

• npx create-nuxt-app <项目名>
• npm install # or yarn
• npm run dev

通过以上三个步骤，打开浏览器，访问localhost:3000，这跟建立一个Vue项目没太多不一样。项目目录结构以下:

对于nuxt.js官网也给出了一个完整的服务器请求到渲染的流程图

2. nuxt路由机制

pages目录中的任何Vue组件都会基于他们的文件名称和目录结构自动添加到vue-router中。Nuxt能够生成对应的路由配置，在.nuxt/rouer.js能够体现出来,如图：

嵌套路由：在pages下添加一个vue文件，同时添加一个与该文件同名的目录用来存放子视图组件

在父级vue文件内增长用于显示子视图内容

为适应不一样业务需求，还有动态路由，动态嵌套路由等功能 ，能够参照官网说明：zh.nuxtjs.org/guide/routi…

3. assets和static静态资源使用

assets包含未编译的资源，与webpack如何加载和处理文件有更多关系，与nuxt如何工做没有太多关系。

static包含一些映射到你的站点的根目录的静态文件。

好比：静态资源放在assets下: < img src="~/assets/timg.jpeg"/>，若是静态资源放在static下: < img src="timg.jpeg"/>

4. layouts使用

在layouts目录下建立一个新的布局，即.vue文件，代码以下

使用布局时，能够在pages文件下script里设置layout值为布局文件的名字

export default {

 layout: 'admin-layout'

}
复制代码

注意：若是你输入一个不正确的url，会显示一个错误页面。事实上，这个错误页面是另一种布局。nuxt有它本身的错误页面布局，可是若是你想要编辑它，只须要建立一个error.vue布局，而后nuxt就会使用这个布局代替默认的布局

5. middleware使用

中间件（middleware）是容许你定义一个自定义函数（提供了一个context参数，能够获取sever端和client端各类信息）运行在一个页面或布局以前。好比咱们在渲染页面以前判断权限的拦截，或者根据用户权限跳转到相应的路由等。 就本地开发环境时跳转到指定路由为例，可这么配置：

• 首先咱们须要在middleware文件夹中添加auth.js

• 在nuxt.config.js文件中配置

• 在浏览器打开localhost:3000/，此时会访问到localhost:3000/dev

6. plugins

能够配置须要在vue应用实例化以前须要运行的js插件，能够是你本身写的库或是第三方库。好比：对于axios这种ajax请求插件，element-ui第三方库等。就element-ui为例，能够这么配置：

• 首先咱们须要在plugins文件夹中添加插件文件element-ui.js

• 在nuxt.config.js中配置plugins字段，只在客户端运行时，可将引入的插件设置属性ssr: false

7. next.config.js文件配置

• head 通常用于配置默认的meta标签

• css 用于定义应用的全局样式文件，模块或第三方库

• dev 配置是开发仍是生产模式

• loading 个性化定制must.js使用的加载组建

• env 定义用于客户端和服务端的环境变量

……

更多可查看官网