这是我参与「第五届青训营 」伴学笔记创作活动的第 8 天
采用vue开发的应用系统seo优化不友好，需要解决SEO的问题
比如：新闻门户，博客系统有SEO的需求，希望被搜索引擎收录，百度排名靠前。
什么是服务端渲染
- 浏览器通过AJAX向服务端发送http请求数据接口
- 服务端将获取的接口数据封装成JSON，相应给浏览器
- 浏览器拿到JSON就进行渲染html页面生成DOM元素，然后将页面展示给用户
客户端渲染特点：
- 服务端只响应数据，不生成html页面
- 浏览器负责发送请求获取服务端的数据，然后渲染成html页面
服务端渲染特点：
- 在服务端生成html页面
- 浏览器只负责显示html元素内容
安装
安装脚手架工具
npm install -g create-nuxt-app
创建项目
create-nuxt-app nuxt-demo
使用npx方式安装
npx create-nuxt-app 项目名
安装完成后打开项目
模板属性从配置文件中进行获取。
配置的属性会从配置文件中渲染到模板文件上。
如果我们想用自定义模板就在项目的根目录创建新的模板页面，然后重启重新渲染页面。
但是页面模板的方式并不常用，我们通常使用插件的方式。
插件
Nuxtjs允许在运行Vuejs之前执行js插件，这在您需要使用自己的库或第三方模块时有用。可以将自定义插件自定义注入到vue客户端，context服务器端，store（vue），新增的属性方法使用$作为前缀。
初始化插件，编写引入插件的js文件然后在nuxt.config.js中配置文件配置plug文件的位置。在启动时会自动使其生效。
异步加载数据asyncData
Nuxt扩展vue，增加了一个叫asyncData的方法，使得我们可以在渲染组件之前异步获取数据。
asyncData方法会在组件，每次加载之前进行调用，它可以在服务端或路由更新之前被调用。在这个方法被调用的时候，第一个参数context被设定为当前页面的上下文对象，可以利用asyncData方法来获取数据Nuxt会将asyncData返回的数据与data方法返回的数据一起合并后返回给当前组件，调用接口后台数据采用axios异步发送请求。
安装@nuxtjs/axios nuxtjs官方提供了专用的axios模块，此模块还包括了axios，@nuxtjs/proxy模块，其中@nuxtjs/proxy时解决nuxt中跨域问题，进行代理转发请求。
npm install @nuxtjs/axios
安装完成后在nuxt.config.js中进行配置moudles
"@nuxtjs/axios"
使用asyncData方法使异步数据渲染到页面上，方法内部执行的是axios的异步方法。得到结果后返回，asyncData返回结果会返回到vue的data当中。
async asyncData({ $axios }) {
var data = await demo().then((res) => {
return res;
});
return { data: data };
}
任何异步数据都可以通过这种方法进行渲染。
异步无需渲染的数据直接使用axios方法进行请求，无需使用nuxt的异步渲染方法。
路由
nuxtjs在pages下会自动生成路由，写下相应的文件名就可以使用对应路由
如上会自动生成路由article。
路由的跳转使用nuxt-link来实现跳转。
<nuxt-link to="/">首页</nuxt-link>
中间件
我们需要权限认证，如果没有权限需要页面进行重定向。我们创建文件夹middleware创建认证中间件auth，在文件中写入认证条件。
中间件可以获取到存储信息，可以执行重定向方法。
中间件可以在页面中单独配置，也可以在配置文件中全局配置。
在页面中单独配置。
在配置文件中进行全局配置
使用vuex状态管理
Nuxt会尝试到项目根目录的store目录，如果存在该目录，它将做以下事情：
- 引用vuex模块
- 将vuex模块加到配置中去
- 设置vue根实例的store配置项
只要在store目录下创建模块文件就行，nuxt实例化好vuex.store对象，自动将目录下的模块管理起来。
nuxt支持两种使用store目录下每个js文件会被转换成状态树，指定命令的子模块。
