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安装依赖包

npm install

这个过程是要等一会的，如果你这个过程安装失败，可以直接诶删除项目中的node_modules文件夹后，重新npm install进行安装。

（4）使用npm run dev 启动服务

（5）在浏览器输入 localhost:3000,可以看到结果。

第三节：Nuxt目录结构

Nuxt.js开启SSR渲染的教程详解

第四节：Nuxt常用配置项

1.配置IP和端口

开发中经常会遇到端口被占用或者指定IP的情况。我们需要在根目录下的package.json里对config项进行配置。比如现在我们想把IP配置成127.0.0.1，端口设置1000。

/package.json

"config":{
 "nuxt":{
  "host":"127.0.0.1",
  "port":"1000"
 }
 },

配置好后，我们在终端中输入npm run dev，然后你会看到服务地址改为了127.0.0.1:1000.

2.配置全局CSS

在开发多页项目时，都会定义一个全局的CSS来初始化我们的页面渲染，比如把padding和margin设置成0，网上也有非常出名的开源css文件normailze.css。要定义这些配置，需要在nuxt.config.js里进行操作。

比如现在我们要把页面字体设置为红色，就可以在assets/css/normailze.css文件，然后把字体设置为红色。

/assets/css/normailze.css

html{
 color:red;
}

/nuxt.config.js
 css:['~assets/css/normailze.css'],

设置好后，在终端输入npm run dev 。然后你会发现字体已经变成了红色。

3.配置webpack的loader

在nuxt.config.js里是可以对webpack的基本配置进行覆盖的，比如现在我们要配置一个url-loader来进行小图片的64位打包。就可以在nuxt.config.js的build选项里进行配置。

build: {
 loaders:[
  {
  test:/\.(png|jpe?g|gif|svg)$/,
  loader:"url-loader",
  query:{
   limit:10000,
   name:'img/[name].[hash].[ext]'
  }
  }
 ],
 /*
 ** Run ESLint on save
 */
 extend (config, { isDev, isClient }) {
  if (isDev && isClient) {
  config.module.rules.push({
   enforce: 'pre',
   test: /\.(js|vue)$/,
   loader: 'eslint-loader',
   exclude: /(node_modules)/
  })
  }
 }
 }

第五节：Nuxt的路由配置和参数传递

Nuxt.js的路由并不复杂，它给我们进行了封装，让我们节省了很多配置环节。

1.简单路由Demo

我们现在根目录的pages文件下新建两个文件夹，about和news（模仿关于我们和新闻的功能模块）。

（1）在about文件夹下新建index.vue文件，并写入下面的代码：

（2）在news文件夹下新建index.vue文件，并写入下面的代码：

（3）修改原来的pages文件夹下的index.vue，删除没用的代码，写入下面链接代码：

由于Nuxt.js都为我们作好了，不用写任何配置代码。所以我们可以在页面上实现相关跳转。

2.标签

虽然上面的例子跳转已经成功，但是Nuxt.js并不推荐这种标签的作法，它为我们准备了标签（vue中叫组件）。我们先把首页的标签替换成，改造如下：

我们再次预览页面，也是可以进行正常跳转的，在实际开发中尽量使用标签的方法跳转路由。

3.params传递参数

路由经常需要传递参数，我们可以简单的使用params来进行传递参数，我们现在向新闻页面（news）传递个参数，然后在新闻页面进行简单的接收。

（1）我们先修改pages下的Index.vue文件，给新闻的跳转加上params参数，传递3306。

（2）在news文件夹下的index.vue里用$route.params.newsId进行接收，代码如下。

成功实现参数的传递。

第六节：Nuxt的动态路由和参数校验

1.动态路由，其实动态路由就是带参数的路由。比如我们现在新闻模块下面有很多新闻详细页，这时候就需要动态路由的帮助了。

（1）新闻详细页面：我在news文件夹下面新建了_id.vue的文件，以下画线为前缀的Vue文件就是动态路由，然后在文件里边有 $route.params.id来接收参数。

/pages/news/_id.vue

（2）修改新闻首页路由

我们在/pages/news/index.vue进行修改，增加两个详细页的路由News-1和News-2。

代码写好后，打开npm run dev 进行查看，我们已经进入了新闻详细页，并在详细页中取得了传递过来的新闻id。

2.参数校验

进入一个页面，对参数传递的正确性校验是必须的，Nuxt.js也贴心的为我们准备了校验方法validate( )。

（1）在接受参数的页面添加

/pages/news/_id.vue

export default {
 validate ({ params }) {
 // Must be a number
 return /^\d+$/.test(params.id)
 }
}

使用了validate方法，并把params传递进去，然后用正则进行了校验，如果正则返回了true正常进入页面，如果返回false进入404页面。

第七节：Nuxt的路由动画效果

路由的动画效果，也叫作页面的更换效果。Nuxt.js提供两种方法为路由提供动画效果，一种是全局的，一种是针对单独页面制作。

1.全局路由动画

全局动画默认使用page来进行设置，例如现在我们为每个页面都设置一个进入和退出时的渐隐渐现的效果。我们可以先在根目录的assets/css下建立一个normailze.css文件。

（1）添加样式文件

/assets/css/normailze.css(没有请自行建立)

.page-enter-active, .page-leave-active {
 transition: opacity 2s;
}
.page-enter, .page-leave-active {
 opacity: 0;
}

（2）文件配置

然后在nuxt.config.js里加入一个全局的css文件就可以了。

css:['assets/css/main.css'],

这时候在页面切换的时候就会有2秒钟的动画切换效果了，但是你会发现一些页面是没有效果的，这是因为你没有是组件来制作跳转链接。你需要进行更改。

比如我们上节课作的动态路由新闻页，你就需要改成下面的链接。

News-1

改过之后你就会看到动画效果了。

2.单独设置页面动效

想给一个页面单独设置特殊的效果时，我们只要在css里改变默认的page，然后在页面组件的配置中加入transition字段即可。例如，我们想给about页面加入一个字体放大然后缩小的效果，其他页面没有这个效果。

（1）在全局样式assets/main.css 中添加以下内容

.test-enter-active, .test-leave-active {
 transition: all 2s;
 font-size:12px;
}
.test-enter, .test-leave-active {
 opacity: 0;
 font-size:40px;
}

（2）然后在about/index.vue组件中设置

export default {
 transition:'test'
}

这时候就有了页面的切换独特动效了。

总结：在需要使用的页面导入即可。

第八节：Nuxt的默认模版和默认布局

在开发应用时，经常会用到一些公用的元素，比如网页的标题是一样的，每个页面都是一模一样的标题。这时候我们有两种方法，第一种方法是作一个公用的组件出来，第二种方法是修改默认模版。这两种方法各有利弊，比如公用组件更加灵活，但是每次都需要自己手动引入；模版比较方便，但是只能每个页面都引入。

1.默认模板

Nuxt为我们提供了超简单的默认模版订制方法，只要在根目录下创建一个app.html就可以实现了。现在我们希望每个页面的最上边都加入“ 学习nuxt.js” 这几个字，我们就可以使用默认模版来完成。

app.html中：




 {{ HEAD }}


 学习nuxt.js
 {{ APP }}

这里的{{ HEAD }}读取的是nuxt.config.js里的信息，{{APP}} 就是我们写的pages文件夹下的主体页面了。需要注意的是HEAD和APP都需要大写，如果小写会报错的。

注意：如果你建立了默认模板后，记得要重启服务器，否则显示不会成功；但是默认布局是不用重启服务器的。

2.默认布局

默认模板类似的功能还有默认布局，但是从名字上你就可以看出来，默认布局主要针对于页面的统一布局使用。它在位置根目录下的layouts/default.vue。需要注意的是在默认布局里不要加入头部信息，只是关于

Nuxt.js开启SSR渲染的教程详解

About Index page

News Index page

News Index page

News-Content [{{$route.params.id}}]

News Index page

404页面不存在

500服务器错误

姓名：{{info.name}}

年龄：{{info.age}}

兴趣：{{info.interest}}

姓名：{{info.name}}

年龄：{{info.age}}

兴趣：{{info.interest}}

其他资讯