Nuxt.js开启SSR渲染快速入门WFaceBoss

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是有内容的，这让搜索引擎能够索引到页面内容。

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

Nuxt.js是特点（优点）：

第二节：Nuxt环境搭建

1.nuxt.js安装

（1）用npm来安装vue-cli这个框架。

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

（2）使用vue安装nuxt

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

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

（3）使用npminstall安装依赖包

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

（4）使用npmrundev启动服务

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

第三节：Nuxt目录结构

第四节：Nuxt常用配置项

1.配置IP和端口

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

/package.json

"config":{"nuxt":{"host":"127.0.0.1","port":"1000"}},配置好后，我们在终端中输入npmrundev，然后你会看到服务地址改为了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'],设置好后，在终端输入npmrundev。然后你会发现字体已经变成了红色。

3.配置webpack的loader

build:{loaders:[{test:/\.(png|jpeg|gif|svg)$/,loader:"url-loader",query:{limit:10000,name:'img/[name].[hash].[ext]'}}],/***RunESLintonsave*/extend(config,{isDev,isClient}){if(isDev&&isClient){config.module.rules.push({enforce:'pre',test:/\.(js|vue)$/,loader:'eslint-loader',exclude:/(node_modules)/})}}}4.修改title

nuxt.config.js文件中,修改title为wfaceboss：

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

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

1.简单路由Demo

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

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

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

2.标签

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

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

3.params传递参数

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

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

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

注意：name其实指向的是路由（文件夹或文件名），而路由死活区分大小写的，所以to后面区分大小写！！！建议文件夹都写成小写的。

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

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

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

/pages/news/_id.vue

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

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

2.参数校验

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

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

exportdefault{validate({params}){//Mustbeanumberreturn/^\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:opacity2s;}.page-enter,.page-leave-active{opacity:0;}（2）文件配置

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

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

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