nuxt页面跳转_Nuxt.js开启SSR渲染

第一节：nuxt.js相关概述

nuxt.js简单的说是Vue.js的通用框架，最常用的就是用来作SSR(服务器端渲染).Vue.js是开发SPA(单页应用)的,Nuxt.js这个框架，用Vue开发多页应用，并在服务端完成渲染，可以直接用命令把我们制作的vue项目生成为静态html。

1.那服务器端渲染到底有什么好处呢？

主要的原因时SPA(单页应用)不利于搜索引擎的SEO操作，Nuxt.js适合作新闻、博客、电影、咨询这样的需要搜索引擎提供流量的项目。如果你要作移动端的项目，就没必要使用这个框架了。

2.什么是SSR？

SSR，即服务器渲染，就是在服务器端将对Vue页面进行渲染生成html文件，将html页面传递给浏览器。

SSR两个优点：

(1)SEO 不同于SPA的HTML只有一个无实际内容的HTML和一个app.js，SSR生成的HTML是有内容的，这让搜索引擎能够索引到页面内容。

(2)更快内容到达时间 传统的SPA应用是将bundle.js从服务器获取，然后在客户端解析并挂载到dom。而SSR直接将HTML字符串传递给浏览器。大大加快了首屏加载时间。

Nuxt.js的官方网站是这样介绍的：

Nuxt.js 是一个基于 Vue.js 的通用应用框架。 通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。

Nuxt.js是特点(优点)：

基于 Vue.js

自动代码分层

服务端渲染

强大的路由功能，支持异步数据

静态文件服务

ES6/ES7 语法支持

打包和压缩 JS 和 CSS

HTML头部标签管理

本地开发支持热加载

集成ESLint

支持各种样式预处理器： SASS、LESS、 Stylus等等

第二节：Nuxt环境搭建

1.nuxt.js安装

在使用npm前你需要安装Node到系统中。

(1)用npm来安装vue-cli这个框架。

npm install vue-cli -g

安装完成后可以使用vue -V 来测试是否安装成功。(注意：这里要使用大写的V，小写无效)。

(2)使用vue安装 nuxt

安装好vue-cli后，就可以使用init命令来初始化Nuxt.js项目。

vue init nuxt/starter

这时候他会在github上下载模版，然后会询问你项目的名称叫什么，作者什么的，这些完全可以根据自己的爱好填写。

(3)使用npm install安装依