Nuxt.js服务端渲染入门
栏目: JavaScript · 发布时间: 5年前
内容简介:作者:太皇太后@毛豆前端随着Vue使用率的持续上长,越来越多的页面都应用了浏览器渲染的方式,极大提升了前端的开发的质量和效率,但是也带来了首屏渲染慢、SEO不友好及其他一些问题。 基于Vue的SSR构架Nuxt.js很好的解决了这个问题,页面直出,前后端同构,不仅解决了首屏直出渲染、SEO等问题,在开发质量和效率也没有任何损失。Nuxt.js是一个针对Vue的SSR框架,采用模块化的架构,简单易用,性能好。Nuxt.js的开发者积极活跃,版本迭代迅速,于2018年1月9日发布了v1.0.0正式版本。而且得到
作者:太皇太后@毛豆前端
随着Vue使用率的持续上长,越来越多的页面都应用了浏览器渲染的方式,极大提升了前端的开发的质量和效率,但是也带来了首屏渲染慢、SEO不友好及其他一些问题。 基于Vue的SSR构架Nuxt.js很好的解决了这个问题,页面直出,前后端同构,不仅解决了首屏直出渲染、SEO等问题,在开发质量和效率也没有任何损失。
一、Nuxt.js简介
Nuxt.js是一个针对Vue的SSR框架,采用模块化的架构,简单易用,性能好。Nuxt.js的开发者积极活跃,版本迭代迅速,于2018年1月9日发布了v1.0.0正式版本。而且得到了Vue官网的大力推荐,接下来让我们一起看看Nuxt.js的强大之处。
二、SSR模型建立
Nuxt.js 是一个基于vue.js的通用应用框架,其核心主要是通过vue-server-renderer模块来实现服务端渲染。 vue-server-renderer是Vue服务端Node.js渲染的一个模块,用来生成HTML内容。 使用步骤如下:
- npm install vue vue-server-renderer --save-dev
- 新建项目结构如下:
- 在server.js文件中编写代码:
- 在template.html编写html,注意 <!—vue-ssr-outlet—> 这个必须写,相当于占位,服务端渲染的页面内容填充到此。
-
运行命令node server.js启动服务
-
浏览器打开http://localhost:3100/,会看到data-server-rendered = “true”,表示是服务端渲染
那么有了上面的例子,我们再看看如何使用Nuxt.js来实现服务端页面渲染。
三、创建一个Nuxt.js项目
- 安装
确保安装了npx(npx在npm版本5.2.0默认安装了)
- npx create-nuxt-app <项目名>
- npm install # or yarn
- npm run dev
经过以上三个步骤,打开浏览器,访问localhost:3000,这跟创建一个Vue项目没太多不同。项目目录结构如下:
对于nuxt.js官网也给出了一个完整的服务器请求到渲染的流程图
- nuxt路由机制
pages目录中的任何Vue组件都会基于他们的文件名称和目录结构自动添加到vue-router中。Nuxt可以生成对应的路由配置,在.nuxt/rouer.js可以体现出来,如图:
嵌套路由:在pages下添加一个vue文件,同时添加一个与该文件同名的目录用来存放子视图组件
在父级vue文件内增加用于显示子视图内容
为适应不同业务需求,还有动态路由,动态嵌套路由等功能 ,可以参照官网说明: zh.nuxtjs.org/guide/routi…
- assets和static静态资源使用
assets包含未编译的资源,与webpack如何加载和处理文件有更多关系,与nuxt如何工作没有太多关系。
static包含一些映射到你的站点的根目录的静态文件。
比如:静态资源放在assets下: < img src="~/assets/timg.jpeg"/>,如果静态资源放在static下: < img src="timg.jpeg"/>
- layouts使用
在layouts目录下创建一个新的布局,即.vue文件,代码如下
使用布局时,可以在pages文件下script里设置layout值为布局文件的名字
export default { layout: 'admin-layout' } 复制代码
注意:如果你输入一个不正确的url,会显示一个错误页面。事实上,这个错误页面是另外一种布局。nuxt有它自己的错误页面布局,但是如果你想要编辑它,只需要创建一个error.vue布局,然后nuxt就会使用这个布局代替默认的布局
- 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 定义用于客户端和服务端的环境变量
……
更多可查看官网
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- Octane渲染入门-渲染设置图文版
- Vue 服务端渲染原理及入门
- OpenGL ES 入门之旅(15)--分屏滤镜渲染图片
- OpenGL/OpenGL ES入门: 使用OpenGL ES 渲染图片
- Vue 服务端渲染(SSR)、Nuxt.js - 从入门到实践
- OpenGL ES 入门之旅--OpenGL 下的坐标系和着色器渲染流程
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。