详解Nuxt.js Vue服务端渲染摸索


Posted in Javascript onFebruary 08, 2018

本文采用nuxt进行服务端渲染https://zh.nuxtjs.org/

Nuxt.js 十分简单易用。一个简单的项目只需将 nuxt 添加为依赖组件即可。

Vue因其简单易懂的API、高效的数据绑定和灵活的组件系统,受到很多前端开发人员的青睐。国内很多公司都在使用vue进行项目开发,我们正在使用的简书,便是基于Vue来构建的。

我们知道,SPA前端渲染存在两大痛点:(1)SEO。搜索引擎爬虫难以抓取客户端渲染的页面meta信息和其他SEO相关信息,使网站无法在搜索引擎中被用户搜索到。(2)用户体验。大型webApp打包之后的js会很庞大,于是就有了按模块加载,像require.js一样,异步请求。webpack盛行,就变成了代码分割。即便如此,受制于用户设备,页面初次渲染还是有可能很慢,白屏等待时间太长,对日益挑剔的用户群体来说,无法接受。

因此,对于那些展示宣传型页面,如官网,必须进行服务端渲染(SSR)。安装 nuxt.js

$ vue init nuxt-community/starter-template <你项目的名字>
// 后面 安装依赖你懂的
// 安装koa版本
$ vue init nuxt/koa <你的项目名字>

运行

npm run dev

应用现在运行在 http://localhost:3000

注意:Nuxt.js 会监听 pages 目录中的文件变更并自动重启, 当添加新页面时没有必要手工重启应用。

路由

nuxt 是根据pages 目录结构生成路由配置

异步数据asyncData

注意必须要页面组件才能调用asyncData(就是components下是不能调用,必须路由的页面才行)

异步数据beforeCreate,created

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

使用插件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布 局方便的实现页面的多个布局之间方便的切换。本项目中实现了三种常用的布局,即:1)两栏布局,左栏固定,右栏动态宽度;2、错误页提示,页面中间一个提示框的布局方案;3、纯白页面布局。

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery循环滚动图片代码
Dec 08 Javascript
地址栏传递中文参数乱码在js里用escape转码
Aug 28 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
Nov 19 Javascript
JavaScript中的toLocaleDateString()方法使用简介
Jun 12 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
Aug 24 Javascript
JS从一组数据中找到指定的单条数据的方法
Jun 02 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
Jan 13 Javascript
JavaScript中创建对象的7种模式详解
Feb 21 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
Mar 09 Javascript
深入理解ES6学习笔记之块级作用域绑定
Aug 19 Javascript
Vue 重置组件到初始状态的方法示例
Oct 10 Javascript
Vue入门之数量加减运算操作示例
Dec 11 Javascript
VUE 使用中踩过的坑
Feb 08 #Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
Feb 08 #Javascript
在vue项目中使用element-ui的Upload上传组件的示例
Feb 08 #Javascript
vue中实现methods一个方法调用另外一个方法
Feb 08 #Javascript
使用vux实现上拉刷新功能遇到的坑
Feb 08 #Javascript
jQuery实现的简单图片轮播效果完整示例
Feb 08 #jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 #jQuery
You might like
Session服务器配置指南与使用经验的深入解析
2013/06/17 PHP
Yii中实现处理前后台登录的新方法
2015/12/28 PHP
PHP的自定义模板引擎
2017/03/24 PHP
html读出文本文件内容
2007/01/22 Javascript
javascript一些不错的函数脚本代码
2008/09/10 Javascript
Javascript 中介者模式实例
2009/12/16 Javascript
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
2013/04/28 Javascript
Javascript递归打印Document层次关系实例分析
2015/05/15 Javascript
js获取页面description的方法
2015/05/21 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
js父页面中使用子页面的方法
2016/01/09 Javascript
JS实现简单的二维矩阵乘积运算
2016/01/26 Javascript
基于jQuery插件实现点击小图显示大图效果
2016/05/11 Javascript
关于数据与后端进行交流匹配(点亮星星)
2016/08/03 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
2017/03/09 Javascript
JS实现图片点击后出现模态框效果
2017/05/03 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
nuxt中使用路由守卫的方法步骤
2019/01/27 Javascript
微信小程序结合Storage实现搜索历史效果
2019/05/18 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
JS获取当前时间戳方法解析
2020/08/29 Javascript
Python实现简单文本字符串处理的方法
2018/01/22 Python
python之DataFrame实现excel合并单元格
2021/02/22 Python
python多线程调用exit无法退出的解决方法
2019/02/18 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
html5写一个BUI折叠菜单插件的实现方法
2019/09/11 HTML / CSS
日本PLST在线商店:日本时尚杂志刊载的人气服装
2016/12/10 全球购物
Spartoo葡萄牙鞋类网站:线上销售鞋履与时尚配饰
2017/01/11 全球购物
2014年乡镇人大工作总结
2014/11/25 职场文书
活动费用申请报告
2015/05/15 职场文书
政审证明材料
2015/06/19 职场文书
一条慢SQL语句引发的改造之路
2022/03/16 MySQL