服务端框架Nuxt

　　单页面应用（SPA）越来越无法满足业务对页面响应速度的要求。随着工程不断变大，打包文件不断增长，页面的整体刷新加载速度慢慢成为瓶颈。越来越多的应用开始使用服务端描画（SSR）来提高响应速度。

　　我们项目在SPA单页的时候，mouted元素部分，都是先去服务端拉取js脚本，然后客户端解析成html，那这样可能就会出现白屏时间过长，虽然现在有骨架技术，也就是在响应的html主体中，填充静态内容，但也是治标不治本。而在SSR下，mouted部分是服务端描画好后，直接发送到客户端，客户端不用进行html的重新组合，只需要激活即可。

　　那就不得不提到Nuxt.js了，他是基于Vue.js的通用应用框架，通过对客户端/服务端基础框架的抽象组织，Nuxt.js关注的是UI渲染，不过也支持SPA，但是SSR才是他的重点。

　　SSR的优点无非两个，一个是对SEO友好，二就是更快的内容到达时间，也就是加载的更快。但是SSR有更长的链路，之前是浏览器+nginx+后台服务，而现在就变成浏览器+nginx+nodejs+后台服务。nodejs中的阻塞型请求，容易成为性能的瓶颈。一套api，要考虑前后端的兼容性对业务开发人员来说，曲线变长，需要能明确代码在前后端的执行位置。

　　Nuxt与vue的目录结构以及作用有些许区别这里简单说一下

.
├── README.md
├── assets
├── components
├── layouts
├── middleware
├── node_modules
├── nuxt.config.js
├── package.json
├── pages
├── plugins
├── static
├── store
└── yarn.lock

1. assets: 资源文件。放置需要经过 webpack 打包处理的资源文件，如 scss，图片，字体等。
2. components: 组件。这里存放在页面中，可以复用的组件。
3. layouts: 布局。页面都需要有一个布局，默认为 default。它规定了一个页面如何布局页面。所有页面都会加载在布局页面中的 <nuxt /> 标签中。如果需要在普通页面中使用下级路由，则需要在页面中添加 <nuxt-child />。该目录名为Nuxt.js保留的，不可更改。
4. middleware: 中间件。存放中间件。可以在页面中调用： middleware: 'middlewareName' 。
5. pages: 页面。一个 vue 文件即为一个页面。index.vue 为根页面。
6. plugin: 插件。用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。需要注意的是，在任何 Vue 组件的生命周期内， 只有 beforeCreate 和 created 这两个钩子方法会在 客户端和服务端均被调用。其他钩子方法仅在客户端被调用。
   1. 若需要二级页面，则添加文件夹即可。
   2. 如果页面的名称类似于 _id.vue （以 _ 开头），则为动态路由页面，_ 后为匹配的变量（params）。
   3. 若变量是必须的，则在文件夹下建立空文件 index.vue 。
8. static: 静态文件。放置不需要经过 webpack 打包的静态资源。如一些 js, css 库。
9. store: 状态管理。
10. nuxt.config.js: nuxt.config.js 文件用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。

　　　　

　　Nuxt没有像Vue专门的路由配置文件，他是依靠page中文件层级来定义路由的，那我们一些路由重定向的配置，以及没有登录需要跳转到登录页面这个Nuxt也为我们提供了中间件

 1 export default function ({ store, redirect }) {
 2   if (!store.state.user) {
 3     return redirect('/login')
 4   }
 5 }
 6 //页面单独使用
 7 export default {
 8   middleware: 'auth'
 9   }
10 ///全局使用
11 module.exports = {
12   router: {
13     middleware: 'auth'
14   }  

　　偶然间从大佬那里了解到Nuxt，记性不好，在此做个简单的记录，目前也用不到好像用这个框架的也很少，nuxt的学习曲线非常小，就像vue框架一样，已经是一个开箱即用的状态，我们可以直接跨过配置直接开发。