Vue服务器端渲染
1. 关于vue项目的seo(搜索引擎优化)问题
2. 服务端渲染介绍：
Ⅰ. 从网页的渲染方式说起
➀前端渲染：html页面作为静态文件存在，前端请求时后端不对该文件做任何内容上的修改，直接以资源的方式返回给前端，前端拿到页面后，根据写在html页面上的js代码，对该html的内容进行修改。
➁服务端渲染：前端发出请求后，后端在将HTML页面返回给前端之前，先把HTML页面中的特定区域，用数据填充好，再将 完整的HTML 返回给前端。在SPA场景下，服务端渲染都是针对第一次get请求，它会将完整的html给浏览器，浏览器直接渲染出首屏，用不着浏览器端多一个AJAX请求去获取数据再渲染。
Ⅱ.为什么要用服务器端渲染
优点：
- 更好的 SEO（搜索引擎优化），因为传统的搜索引擎只会从 HTML 中抓取数据，这会导致前端渲染的页面无法被抓取。
- 更快的内容到达时间(time-to-content)，特别是对于缓慢的网络情况或运行缓慢的设备 。页面首屏时间大概有80%消耗在网络上，剩下的时间在后端读取数据以及浏览器渲染，显然要优化后面的20%是比较困难的，优化网络时间是效果最明显的手段。传统的Ajax请求是先请求js再由js发起数据请求，两项时间再加上浏览器渲染时间才是首屏时间。而SSR能将两个请求合并为一个。
缺点：
- 更多的服务器端负载。
- 服务器端和浏览器环境差异带来的问题，例如document等对象找不到的问题。
Ⅲ. 如何选择
建议：如果注重SEO的新闻站点，非强交互的页面，建议用SSR；像后台管理页面这类强交互的应用，建议使用前端渲染。
3. vue的服务端渲染方式：Nuxt.js
Ⅰ. 什么是Nuxt.js:
Nuxt.js 是一个基于 Vue.js 的通用应用框架，通过对客户端/服务端基础架构的抽象组织，预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。（开箱即用）
官方地址：https://zh.nuxtjs.org/guide
Ⅱ. Nuxt安装使用
| NO. | 步骤描述 |
|---|---|
| 1.全局安装nuxt脚手架 | cnpm i create-nuxt-app -g |
| 2.创建新项目 | create-nuxt-app my-nuxt-demo（项目名） |
| 3.新项目配置 | 如下 |
| 4.进入新项目 | cd my-nuxt-demo（项目名） |
| 5.运行新项目 | npm run dev |
Ⅲ. Nuxt模板目录结构分析
重点关注：components、layouts、pages、plugins、nust.config.js目录及文件
Ⅳ.Nuxt路由
➀.pages目录结构自动生成对应的路由配置
➁路由跳转
- 跳转方式1.使用nuxt-link组件
注意：不能用a标签代替nuxt-link组件，虽然最终的显示效果一样，但是a标签会刷新页面
- 跳转方式2.使用编程式导航this.$router.push（用于事件）
➂动态路由
➃路由参数校验
Nuxt.js 可以让你在动态路由对应的页面组件中配置一个validate方法用于校验动态路由参数的有效性。该函数有一个布尔类型的返回值，如果返回true则表示校验通过，如果返回false则表示校验未通过。
validate(data) {
cosole.log(data)
return true
}
⑤嵌套路由
| NO. | 步骤描述 |
|---|---|
| 1. | 添加一个Vue文件，作为父组件 |
| 2. | 添加一个与父组件同名的文件夹来存放子视图组件 |
| 3. | 在父文件中，添加<nuxt-child></nuxt-child>组件，用于展示匹配到的子视图 |
父组件authors.vue的demo：
<template>
<div class="authors">
<h3>这是作者列表页</h3>
<ul>
<li v-for="item in bookList" :key="item.id">
<!-- <nuxt-link :to="`/book/${item.id}`">{{item.name}}</nuxt-link> -->
<!-- 将传参改为传name -->
<nuxt-link :to="`/authors/${item.id}`">{{item.name}}</nuxt-link>
</li>
</ul>
<nuxt-child></nuxt-child>
</div>
</template>
<script>
export default {
data(){
return{
bookList:[
{name:'萧鼎',id:1},
{name:'墨香铜臭',id:2},
{name:'番茄',id:3},
]
}
}
}
</script>
嵌套的子组件_id文件夹下的demo
<template>
<div class="authors-detail">
<!-- Nuxt.js 定义带参数的动态路由，需要创建
以下划线作为前缀的Vue文件或目录，为了避免出错我们只考虑目录 -->
<!-- 底下这个id对应左边加了下划线的文件夹名_id -->
这是{{$route.params.id}}号作者的详细信息
</div>
</template>
<script>
export default {
// Nuxt.js 可以让你在动态路由对应的页面组件中配置一个`validate`方法用于校验动态路由参数的有效性。
// 该函数有一个布尔类型的返回值，如果返回true则表示校验通过，如果返回false则表示校验未通过。
validate(obj){//默认有个obj的参数
console.log(this);
console.log(obj.params);// { id: '诛仙' }
return /^\d+$/.test(obj.params.id)//用正则限制只能是数字
}
}
</script>
Ⅴ.布局组件
| NO. | 步骤描述 |
|---|---|
| 1. | 去layouts文件夹下面新建一个新的layout布局组件（如 a.vue），并在这个组件中添加<nuxt />组件 |
| 2. | 给需要用到a.vue的组件添加layout属性，并指定需要使用的layout(如 layout:'a') |
特殊的布局组件：error布局组件（error是关键字，只能取这个名字）
Ⅵ.设置全局样式
Ⅶ.ElementUI使用
| NO. | 步骤描述 |
|---|---|
| 1. | 下载(c)npm i element-ui -S（一定要在package.json里确认是否下载成功） |
| 2. | 在plugins文件夹下面，创建ElementUI.js文件 |
| 3. | 在nuxt.config.js中添加系统设置 |
| 4. | 测试UI组件是否生效 |
测试的时候不要范如下错误：
Ⅷ.发送请求
➀.生命周期函数：
在nuxt中，只有created以及beforeCreate两个能够在服务端正常使用
但是发异步请求不能在created生命周期函数中去发送，因为它会在前端执行（打印一下，发送前端和服务器端都会有打印信息）
那么如何发送异步请求呢？
➁.asyncData的方法:可以在服务端或路由更新之前被调用, 需要注意这个函数中不能使用this
③. axios的使用
| NO. | 步骤描述 |
|---|---|
| 1. | 下载(c)npm install axios -S（一定要在package.json里确认是否下载成功） |
| 2. | 在plugins文件夹下面，创建axios.js文件并进行设置 |
| 3. | 在nuxt.config.js中添加系统设置 |
| 4. | 测试axios是否生效 |
Ⅸ.SEO优化
➀.全局优化:在nuxt.config.js配置文件中修改
head: {
title: '全网最好看的电影在线网站',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '韩剧、日剧、美剧，只有你想不到，没有你找不到' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
➁.局部优化:去每个页面直接加入head() 方法
head(){
return{
title:'豆瓣电影',
meta:[{
'name':'keywords',
'content': '电影、经典电影、热映、电视剧、美剧、影评、电影院、电影票、排行、推荐'
}]
}
}
Ⅹ.实战项目：豆瓣电影小案例
➀.案例源码：
复制这段内容后打开百度网盘手机App，操作更方便哦
链接：https://pan.baidu.com/s/1YFdpQIGUMF28uEm8oBUfbw
提取码：iqjb
➁.获取源码后项目跑动
后记：解决SEO问题不一定非得用服务端渲染来处理，特别是项目已经开发完毕，突然告诉你添加个SEO优化，这时候可以考虑vue-meta-info ，官方地址：https://github.com/muwoo/vue-meta-info
