为什么使用服务器端渲染(SSR)？
- 更好的 SEO
搜索引擎爬虫抓取工具在抓取页面的时候是可以看到已经渲染完的页面，但是正常的vue程序最先到达服务的仅仅是一个html页面和一个<div id="app"></div>然后随之的是一串js代码，浏览器通过解析js代码对页面进行渲染，页面数据也是异步通过js中的ajax获取的，但是搜索引擎爬虫抓取工具并不会等待这个异步的过程，比如某些新闻网站就是通过内容来获取流量的，使用正常的vue程序是不利于SEO的，就需要使用服务器端渲染(SSR)技术解决此问题
- 更快的内容到达时间
正常的vue程序需要js代码执行完毕后才会渲染出页面，相比于正常的html页面展示出来而后进行js加载对于用户而言是更快的，体验相对而言也是更好的
- 基于vue的服务器端渲染框架nuxt入门
入门条件
- vue相关基础
- node环境，推荐v8.12以上，nuxt框架推荐使用npx进行项目构建，npx在NPM版本5.2.0默认安装了
项目搭建
搭建命令npx create-nuxt-app <项目名> 或者 yarn create nuxt-app <项目名>
执行搭建命令后的步骤
注意：Nuxt.js 会监听 pages 目录中的文件更改，因此在添加新页面时无需重新启动应用程序。
创建好项目之后项目目录介绍
assets 目录用于组织未编译的静态资源如 LESS、SASS 或 JavaScript
components 目录用于放置应用中使用的 Vue.js 组件
layouts 目录用于放置应用的布局组件。其实就是页面的公共部分的模版
middleware目录用于存放中间件，中间件允许一个自定义函数运行在一个页面或一组页面渲染之前，类似于vue-router的导航守卫，中间件是一个js文件，文件名就是中间件的名字，中间件自定义函数接收一个context，context对象中参数可以可以参考https://zh.nuxtjs.org/api/#%E4%B8%8A%E4%B8%8B%E6%96%87%E5%AF%B9%E8%B1%A1
中间件执行优先级nuxt.config.js-----layout中的模版-----pages中的页面
在nuxt.config.js中使用中间件
在layout的模版文件中使用中间件
在page文件中使用中间件
pages 目录用于存放应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置
plugins 目录用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。比如element ui
static 目录用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。
store 目录用于存放应用的 vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置，在 store 目录下创建一个 index.js 文件可激活这些配置。
nuxt.config.js项目配置文件
package.json 文件用于描述项目