详解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 相关文章推荐
让页面上两个div中的滚动条(滑块)同步运动示例
Aug 07 Javascript
node.js中的http.response.setHeader方法使用说明
Dec 14 Javascript
DOM基础教程之事件类型
Jan 20 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
Jan 19 Javascript
JAVA中截取字符串substring用法详解
Apr 14 Javascript
layui select动态添加option的实例
Mar 07 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
Dec 13 Javascript
微信 jssdk 签名错误invalid signature的解决方法
Jan 14 Javascript
微信小程序Page中data数据操作和函数调用方法
May 08 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
Aug 17 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 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
php获取当前网址url并替换参数或网址的方法
2010/06/06 PHP
php更新mysql后获取改变行数的方法
2014/12/25 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
PHP与Web页面的交互示例详解二
2020/08/04 PHP
javascript不同页面传值的改进版
2008/09/30 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
jQuery隔行变色与普通JS写法的对比
2013/04/21 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
2015/04/17 Javascript
jQuery满意度星级评价插件特效代码分享
2015/08/19 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
2017/09/04 Javascript
Angular 封装并发布组件的方法示例
2018/04/19 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
Node.js API详解之 dns模块用法实例分析
2020/05/15 Javascript
python web基础之加载静态文件实例
2018/03/20 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
Python中字符串List按照长度排序
2019/07/01 Python
Python matplotlib以日期为x轴作图代码实例
2019/11/22 Python
python模拟预测一下新型冠状病毒肺炎的数据
2020/02/01 Python
解决django FileFIELD的编码问题
2020/03/30 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
python 浮点数四舍五入需要注意的地方
2020/08/18 Python
Python容器类型公共方法总结
2020/08/19 Python
Fossil美国官网:化石手表、手袋、首饰及配饰
2019/02/17 全球购物
毕业生求职简历中的自我评价
2013/10/18 职场文书
优秀大学生的自我评价
2014/01/16 职场文书
工程负责人任命书
2014/06/06 职场文书
财务管理专业求职信
2014/06/11 职场文书
行政专员岗位职责说明书
2014/09/01 职场文书
2014年维稳工作总结
2014/11/18 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
博士导师推荐信
2015/03/25 职场文书
写给汽车4S店的创业计划书,拿来即用!
2019/08/09 职场文书
攻击最高的10只幽灵系神奇宝贝,坚盾剑怪排第一,第五最为可怕
2022/03/18 日漫
Go语言特点及基本数据类型使用详解
2022/03/21 Golang