Nuxt.js开放SSR渲染教程详解

时间：2021-08-28 来源：互联网编辑：宝哥软件园浏览：次

第一部分：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和一个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安装vue-cli -g

安装完成后，可以使用vue -V测试安装是否成功。(注：此处应使用大写V，小写无效)。

(2)用vue安装nuxt

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

vue init nuxt/starter

这个时候他会在github上下载模板，然后问你这个项目叫什么名字，作者是什么，可以根据自己的爱好填写。

(3)使用npm安装来安装依赖包

npm安装

这个过程需要等待一段时间。如果安装过程失败，可以直接，呃，删除项目中的node_modules文件夹，然后重新安装npm install。

(4)使用npm运行开发来启动服务

(5)在浏览器中输入localhost:3000，即可看到结果。

第3部分：Nuxt目录结构

第4部分：Nuxt常见配置项目

1.配置IP和端口

在开发中，经常会遇到端口被占用或者指定IP的情况。我们需要在根目录下的package.json中配置配置项。例如，现在我们希望将IP配置为127.0.0.1，并将端口设置为1000。

/package . JSON ' config ' : { ' nuxt ' : { ' host ' : ' 127 . 0 . 0 . 1 '，' port':'1000' }，

配置完成后，我们在终端中输入npm run dev，然后您会看到服务地址被更改为127.0.0.133601000。

2.配置全局CSS

在开发多页项目时，我们将定义一个全局css来初始化我们的页面呈现，例如将填充和边距设置为0。网上还有一个著名的开源CSS文件normailze.css。要定义这些配置，您需要在nuxt.config.js中操作

例如，如果我们现在想将页面字体设置为红色，我们可以在assets/CSS/normalize . CSS文件中将字体设置为红色。

/assets/CSS/normalize . CSS html { color : red；}/nuxt . config . js CSS :[' ~ assets/CSS/normalize . CSS ']，

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

3.配置webpack的加载程序

在nuxt.config.js里是可以对工具的基本配置进行覆盖的，比如现在我们要配置一个全球资源定位器(Uniform Resource Locator)加载程序来进行小图片的64位打包。就可以在nuxt.config.js的建设选项里进行配置。

构建： {加载程序： [{测试：/\ .(png|jpe？g|gif|svg)$/，loader:'url-loader '，query: { limit:10000，name:'img/[name].[哈希]。[ext]' }]，/* **在save */extend (config，{ isDev，isClient }){ if(isDev isClient){ config。模块。规则。push({ enforce : ' pre '，test: /\ .(js|vue)$/，loader : ' eslit-loader '，排除：/(node _ modules)/})} } }

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

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

1.简单路由演示

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

(1)在关于；在…各处；大约文件夹下新建index.vue文件，并写入下面的代码：

模板H2区关于索引页/H2 ul lia href='/' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' Home/a/Li/ul/div/模板(2)在新闻文件夹下新建index.vue文件，并写入下面的代码：

模板div h2News索引页/H2 ul lia href='/' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' Home/a/Li/ul/div/模板(3)修改原来的页文件夹下的index.vue，删除没用的代码，写入下面链接代码：

模板div ul lia href='/' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' HOME/a/Li lia href='/ABOUT ' rel=' external nofollow ' ABOUT/a/Li lia href='/NEWS ' rel=' external nofollow ' NEWS/a/Li/ul/div/template script导出默认{ components : } }/脚本样式/样式

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

2.nuxt-link标签

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

模板div ul linuxt-link : to=' { name : ' index ' } ' HOME/nuxt-link/Li linuxt-link : to=' { name : ' ABOUT ' } ' ABOUT/nuxt-link/Li linuxt-link : to=' { name : ' NEWS ' } ' NEWS/nuxt-link/Li/ul/div/template script导出默认{ components : } }/脚本样式/样式

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

3 .参数传递参数

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

(1)我们先修改页下的Index.vue文件，给新闻的跳转加上参数参数，传递3306。

模板div ul linuxt-link : to=' { name : ' index ' } ' HOME/nuxt-link/Li linuxt-link : to=' { name : ' ABOUT ' } ' ABOUT/nuxt-link/Li linuxt-link : to=' { name : ' NEWS '，params 3360 { NEWS id 33603306 } } ' NEWs/nuxt-link/Li/ul/div/template

(2)在新闻文件夹下的index.vue里用$route.params.newsId进行接收，代码如下。

模板div h2News索引页/H2 pnewsid : { { $ route。参数。news id } }/p ul lia href='/' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' Home/a/Li/ul/div/模板

成功实现参数的传递。

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

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

(1)新闻详情页：我新建了一个_id的文件。新闻文件夹下的Vue，前缀为下面几行的vue文件是动态路由，然后文件中有$route.params.id接收参数。

/pages/news/_id.vue

模板div h2News-Content[{ { $ route . params . id } }]/H2 ul lia href='/' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' Home/a/Li/ul/div/模板

(2)修改新闻主页路线

我们在/pages/news/index.vue中对其进行了修改，增加了News-1和News-2两条详细的页面路线。

模板div h2News Index page/H2 pnewsid : { { $ route . params . newid } }/p ul lia href='/' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' Home/a/Li lia href='/News/123 ' rel=' external nofollow ' News-1/a/Li lia href='/News我们已进入新闻详细信息页面，并在详细信息页面中获得了传递的新闻id。

2.参数校准

进入一个页面，需要验证参数传递的正确性，Nuxt.js为我们贴心地准备了验证方法validate()。

(1)在接受参数的页面上添加

/pages/news/_id.vueexport默认值{ validate ({ params }) { //必须是返回/^\d $/的数字。测试(params.id) }}

使用validate方法，传入参数，然后定期检查。如果正则性返回真，可以正常进入页面，如果返回假，可以进入404页面。

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

路由的动画效果也叫页面替换效果。Nuxt.js提供了两种为路由提供动画效果的方法，一种是全局的，另一种是为单个页面制作的。

1.全局路由动画

默认情况下，页面用于设置全局动画。例如，现在我们在进入和退出时为每个页面设置一个淡入淡出效果。我们可以首先在根目录的assets/css下创建一个normailze.css文件。

(1)添加样式文件

/assets/CSS/normalize . CSS(请自行创建)。页面-输入-活动，页面-离开-活动{ transition : opacity2s}.页面-输入，页面-保持活动状态{ opa city 3360 0；}

(2)文件配置

然后向nuxt.config.js添加一个全局css文件

CSS :[' assets/CSS/main . CSS ']，

这时切换页面会有2秒的动画切换效果，但是你会发现有些页面是无效的，因为你不是一个做跳转链接的nuxt-link组件。你需要做出改变。

例如，在我们上次做的动态路由新闻页面中，您需要将其更改为以下链接。

linuxt-link : to=' { name : ' News-id '，params 3360 { id :123 } } ' News-1/nuxt-link/Li

更改后会看到动画效果。

2.单独设置页面动态效果

当我们想要为页面设置特殊效果时，我们只需要在css中更改默认页面，然后在页面组件的配置中添加过渡字段。例如，我们想给“关于”页面添加一个字体先放大后缩小的效果，但是其他页面没有这个效果。

(1)在全局样式assets/main.css中添加以下内容。测试-输入-激活。测试-离开-激活{ transition:所有2s；font-size :12 px；}.测试输入。测试-离开-活动{ opa city 3360 0；font-size :40 px；}

(2)然后设置关于/index.vue组件

导出默认{ transition: ' test ' }

此时，页面切换有一种独特的动态效果。

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

第8节：Nuxt的默认模板和默认布局

开发应用程序时，经常会用到一些常见的元素。例如，网页的标题是相同的，每个页面都有相同的标题。这时，我们有两种方法。第一种方法是创建一个公共组件，第二种方法是修改默认模板。这两种方法各有利弊。比如常见的组件比较灵活，但每次都需要手动引入；模板很方便，但只能在每一页介绍。

1.默认模板

Nuxt为我们提供了一种超简单的默认模板定制方法，可以通过在根目录下创建一个app.html来实现。现在我们想在每个页面的顶部添加“learn nuxt.js”字样，我们可以使用默认模板来完成。

在app.html中：

！doctype html lang=' en ' head { { head } }/head body pLearn nuxt.js/p { { app } }/body/html

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

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

2.默认布局

默认模板有类似的功能和默认布局，但从名称可以看出，默认布局主要用于页面的统一布局。它位于该位置根目录下的layouts/default.vue中。需要注意的是，默认布局中不应该添加标题信息，但是模板标签下的内容应该统一定制。

需求：让我们把“learn nuxt.js”放在每个页面的顶部，看看默认布局中的实现。

模板div p学习nuxt.js/p nuxt///div/模板

这里的nuxt/相当于每页的内容。您也可以将一些常见的样式放入这个默认布局中，但这会增加页面的复杂性。

总结：区分默认模板和默认布局的区别，模板可以自定义很多表头信息，包括IE版本的判断；模板只能自定义模板中与布局相关的内容。在工作中修改时根据情况编写代码。

第9部分：文本错误页面和个性元设置

当用户进入错误的路线时，我们需要给他一个清晰的指引，所以404页面在应用开发中是必不可少的。Nuxt.js支持直接在默认布局文件夹中创建错误页面。

1.创建错误页面

在根目录的layouts文件夹下创建一个error.vue文件，它相当于一个显示应用程序错误的组件。

模板divh2v-if='错误。statuscode==404' 404page不存在/h2 h2 v-else500服务器错误/H2 ullinuxt-link to='/' home/nuxt-link/Li/ul/div/templatescriptordefault { props 3360 [' error ']

代码使用v-if判断错误类型。需要注意的是，这个错误需要在脚本中声明。如果未声明程序，则找不到错误. statusCode。

在这里，我还使用了一个简单的nuxt-link来直接跟踪路径。

2.人格元设置

页面的元对于搜索引擎优化设置非常重要。例如，如果你想现在制作一个新闻页面，每个页面都需要有不同的标题和新闻元设置。直接使用head方法设置当前页面的页眉信息。我们将把新1页设置为个性的元和标题。

1.首先，我们修改pages/news/index.vue页面的链接并导入一个标题，以便在特定的新闻页面上接收标题并形成文章的标题。

/pages/News/index . vuelinuxt-link : to=' { name : ' News-id '，params: { id:123，title : ' nuxt.com ' } ' News-1/nuxt-link/Li

2.第一步完成后，我们修改/pages/news/_id.vue，使其根据传递的值成为唯一的meta和title标签。

template div H2 news-content[{ { $ route . params . id } }]/H2 ul lia href='/' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' home/a/Li/ul/div/templatescript export default { validate({ params }){//必须是返回/^\d $/的数字。test(params.id) }，Data () {return {title : this。$ route.params.title，}}，//独立设置标题信息(){return {title : this.title，meta 3360 [{hid :' description '，name:'news '，content: '这是新闻页' }]} } } }/script

注意：为了避免子组件中的元标签不能正确覆盖父组件中的相同标签而导致的重复，建议使用hid键为元标签分配一个唯一的标识号。

第10节：通过asyncData方法获取数据

Nuxt.js紧密地扩展了Vue.js的方法，并添加了anyncData来异步请求数据。

(1)创建远程数据

在这里制作一些假的远程数据。我选择的网站是myjson.com，这是一个简单的json仓库。非常适合学习使用。我们打开网站，在对话空气中输入JSON代码。这个代码可以随意输入，键和值都是以字符串格式创建的。

{ '姓名' : 'Nuxt '，'年龄' : 18，'兴趣' : '我爱编码！'}

输入保存，网站会给你一个地址，就是你的JSON仓库的地址。https://api.myjson.com/bins/1ctwlm

(2)安装Axios

Axios是官方推荐的Vue.js远程数据采集方式，所以我们安装官方推荐使用的Axios。这里我们使用npm来安装axios。直接在终端输入以下命令：

npm安装axios -保存

1.ansycData的承诺方法

我们在名为ansyData.vue的页面下创建一个新文件，然后编写以下代码：

模板div h1名称：{ { info . name }}/h1h 2 age:{ { info . age } }/h2h 2 interest:{ { info . interest } }/H2/div/templatescriptimport axios from ' axios ' export default { data(){ return { name : ' hello World '，} }，async data(){ return axios . get(' https://API . myjson.com/bins/1ctwlm ')。然后((res)={ console.log(res)返回{info:res.data} }) }}/script

这时，我们可以看到浏览器已经可以输出结果了。AsyncData的方法将值返回给数据。这是组件创建(页面呈现)之前的操作，因此不能使用this.info。返回{info:res.data}相当于在数据中添加一个info: ' '。

2.2.ansycData的等待方法

当然，上面的方法有点过时了，现在他们正在使用ansyc…wait来解决异步并重写上面的代码。

模板div h1名称：{ { info . name }}/h1h 2 age:{ { info . age } }/h2h 2 interest:{ { info . interest } }/H2/div/templatescriptimport axios from ' axios ' export default { data(){ return { name : ' hello World '，} }，async data(){ let { data }=await axios . get(' https://API . myjson.com/bin/8g dmr ')return { info 3360 data } }/script

第11节：静态资源和打包

1.静态资源

(1)直接导入图片，在网上随意下载一张图片，放在项目中的静态文件夹下，然后使用下面的导入方法进行参考

div mg src=' http : ~ static/logo . png '/div

“~”相当于定位项目的根目录，所以图片路径不会有错误，即使打包了也是正常的。

(2)在CSS中引入图片如果在CSS中引入图片，方法与在html中直接引入相同，也用“~”符号引入。

风格。diss { width: 300px高度： 100像素；background-image : URL(' ~ static/logo . png ')}/style此时在npm run dev下完全正常。

2.包装

Nuxt.js完成后，可以将其打包成静态文件，放在服务器上运行。

在终端中输入：

npm运行生成

然后在dist文件夹下输入live-server。