详解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 EasyUI API 中文文档 - ValidateBox验证框
Oct 06 Javascript
JavaScript分秒倒计时器实现方法
Feb 02 Javascript
javascript事件处理模型实例说明
May 31 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
May 31 Javascript
JS正则表达式验证密码格式的集中情况总结
Feb 23 Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 Javascript
View.post() 不靠谱的地方你知道多少
Aug 29 Javascript
vue 文件目录结构详解
Nov 24 Javascript
VueJs使用Amaze ui调整列表和内容页面
Nov 30 Javascript
webpack打包node.js后端项目的方法
Mar 10 Javascript
深入理解react 组件类型及使用场景
Mar 07 Javascript
Vue请求java服务端并返回数据代码实例
Nov 28 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
Email+URL的判断和自动转换函数
2006/10/09 PHP
约瑟夫环问题的PHP实现 使用PHP数组内部指针操作函数
2010/10/12 PHP
php时区转换转换函数
2014/01/07 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(六)
2014/06/23 PHP
跨浏览器的设置innerHTML方法
2006/09/18 Javascript
jQuery 事件的命名空间简单了解
2013/11/22 Javascript
JS实现根据出生年月计算年龄
2014/01/10 Javascript
jQuery获取选中内容及设置元素属性的方法
2014/07/09 Javascript
jQuery中:animated选择器用法实例
2014/12/29 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
2015/11/03 Javascript
Javascript闭包实例详解
2015/11/29 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
2016/10/30 Javascript
bootstrap下拉菜单使用方法解析
2017/01/13 Javascript
js实现多行文本框统计剩余字数功能
2017/03/28 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
AngularJS日期格式化常见操作实例分析
2018/05/17 Javascript
原生JS实现图片懒加载之页面性能优化
2019/04/26 Javascript
nodejs实现日志读取、日志查找及日志刷新的方法分析
2019/05/20 NodeJs
Layer+Echarts构建弹出层折线图的方法
2019/09/25 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
JavaScript实现五子棋小游戏
2020/10/26 Javascript
js实现验证码干扰(静态)
2021/02/22 Javascript
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
python实现从ftp服务器下载文件的方法
2015/04/30 Python
Python实现word2Vec model过程解析
2019/12/16 Python
3种python调用其他脚本的方法
2020/01/06 Python
Pycharm修改python路径过程图解
2020/05/22 Python
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
eBay荷兰购物网站:eBay.nl
2020/06/26 全球购物
函授本科自我鉴定
2013/11/03 职场文书
银行工作检查书范文
2014/01/31 职场文书
设计专业自荐信
2014/06/19 职场文书
综治维稳工作承诺书
2014/08/30 职场文书
2014年药店店长工作总结
2014/11/17 职场文书
小学生成绩单评语
2014/12/31 职场文书