详解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 相关文章推荐
解决FireFox下[使用event很麻烦]的问题
Nov 26 Javascript
JavaScript通过字符串调用函数的实现方法
Mar 18 Javascript
JavaScript动态加载样式表的方法
Mar 21 Javascript
js获取滚动距离的方法
May 30 Javascript
Javascript基础知识盲点总结之函数
May 15 Javascript
微信小程序开发之toast提示插件使用示例
Jun 08 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
基于Vue框架vux组件库实现上拉刷新功能
Nov 28 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
May 09 Javascript
vue左右侧联动滚动的实现代码
Jun 06 Javascript
浅析JS中回调函数及用法
Jul 25 Javascript
微信小程序实现侧边分类栏
Oct 21 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
PHP在特殊字符前加斜杠的实现代码
2011/07/17 PHP
简单的PHP多图上传小程序代码
2011/07/17 PHP
ThinkPHP权限认证Auth实例详解
2014/07/22 PHP
浅析PHP文件下载原理
2014/12/25 PHP
php通过exif_read_data函数获取图片的exif信息
2015/05/21 PHP
thinkphp3.2点击刷新生成验证码
2016/02/16 PHP
深入理解PHP原理之执行周期分析
2016/06/01 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
从零开始学习jQuery (三) 管理jQuery包装集
2011/02/23 Javascript
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
jquery validate在ie8下的bug解决方法
2013/11/13 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
2013/11/14 Javascript
JSON格式的键盘编码对照表
2015/01/29 Javascript
jquery实现的点击翻书效果代码
2015/11/04 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
2016/05/24 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
2016/08/17 Javascript
flexslider.js实现移动端轮播
2017/02/05 Javascript
xmlplus组件设计系列之列表(4)
2017/04/26 Javascript
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
nuxt踩坑之Vuex状态树的模块方式使用详解
2019/09/06 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
2020/01/12 Javascript
python每次处理固定个数的字符的方法总结
2013/01/29 Python
python 字段拆分详解
2019/12/17 Python
pytorch中的卷积和池化计算方式详解
2020/01/03 Python
python 实现Flask中返回图片流给前端展示
2020/01/09 Python
Python 实现加密过的PDF文件转WORD格式
2020/02/04 Python
MATLAB数学建模之画图汇总
2020/07/16 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
CheapTickets泰国:廉价航班,查看促销价格并预订机票
2019/12/28 全球购物
介绍一下write命令
2012/09/24 面试题
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
2014年采购工作总结
2014/11/20 职场文书
确保工程质量承诺书
2015/04/29 职场文书
pytorch 使用半精度模型部署的操作
2021/05/24 Python
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA