服务端渲染 nuxt简单总结

官方网站

https://zh.nuxtjs.org

总结时版本

"nuxt": "^2.4.0"，"koa": "^2.6.2"

开源时间

16年12月25日，react.js的next发布，几个小时后nuxt发布，基于vue.js

作用

更快的响应数据，seo友好，服务端加载数据，渲染，吐出完整的html页面

特点

需要基于node作为中间层转发，钩子函数区分服务端和客户端，框架的文件夹配置很重要，不能随便改，比如pages目录下的东西，每个文件就是一个默认的路由，index.vue是程序的入口路由，没有其他的配置文件了，也就是创建就是配置

构建

npm run build生成静态文件，npm start启动node服务器，nuxt.render函数，处理页面请求，nuxt generate生成静态站点，利于微服务部署，基于静态文件部署

框架运作

vue.js + webpack + bablel + vue-loader + babel-loader等

流程图

request – nuxtServerInit – middleware – validate – asyncData(fetch) – render，跳转页面后，又开始从middleware开始运行，nuxtServerInit的作用是在vuex的actions内运行，可以拿到一些服务端的数据，比如session，用户验证信息等，然后通过vuex返回给客户端，
以上钩子，都是在服务端执行，且都是在pages页面下有钩子函数，而components和layout没有；beforeCreated和created是服务端和客户端都执行的钩子函数，切记，没有window对象，操作dom必须在mounted钩子，不支持keep-alive，所有它的钩子也没有

• Middleware
  执行流程为nuxt.config.js - 匹配布局 - 匹配页面，先在Middleware文件夹下创建中间件，在nuxt.config.js中引入，然后会去找layout中有没有，然后会去找，pages页面中有没有，中间件就是执行过程中处理的一些问题，或是验证信息，或是拿到一些信息，可以保存，可以跳转等
• Validate
  在动态路由对应的页面来验证参数，如果验证不通过，可以返回404页面，在pages页面中使用
• asyncData
  服务端执行，可以拿到ctx对象，可以异步请求，然后返回一个对象，这个对象会和页面的data对象合并，频繁使用

项目目录结构

• Assets
  用于存放静态文件，会被webpack编译，比如css会被压缩，图片会被require进来，可能会打成base64
• Static
  由于存放静态文件，不会被编译，会复制到构建后的项目，可以用来存放一些文本，数据文件等
• Layouts
  布局文件，每个页面公共的部分，可以自定义再引如，默认是default，可以运行一些钩子，比如中间件等
• Middleware
  中间件，先创建，再配置，再使用，可以拦截一些东西
• Pages
  页面组件，也是路由，支持所有的特殊钩子函数
• Components
  组件，主要是pages组件下面的子组件，特殊钩子都没有，注意，就是用来处理业务逻辑，解耦应用
• Plugins
  插件目录，比如elementUi等插件，就在这里创建引入和配置，然后就可以全局使用，可以操作挂载到vue实例或者是挂载ctx对象上，这样对于的可以使用this或者ctx对象的地方就可以使用了
• Store
  vuex，默认下载了，配置即可，不需要单独下载，分为经典模式和模块模式，推荐使用模块模式

配置文件 nuxt.config.js

• Build
  允许你在自动生成的 vendor.bundle.js 文件中添加一些模块，以减少应用 bundle 的体积。如果你的应用依赖第三方模块，这个配置项是十分实用的，比如axios，如果不添加到这里，那么就是打包进vendor.bundle.js了，但是配置了，那么就会单独打个包进来，多个文件请求，加快请求速度
• Cache
  开启组件缓存，提示访问速度，可能会报错，三思
• Css
  加载第三方css，比如elementu的css，assets中的全局reset.css等
• env
  配置环境变量，可以让客户和服务端共享数据
• Generate
  该配置项用于定义每个动态路由的参数，Nuxt.js 依据这些路由配置生成对应目录结构的静态文件
• Head
  该配置项用于配置应用默认的meta标签
• Loading
  该配置项用于个性化定制 Nuxt.js 使用的加载组件
• Plugins
  该配置项用于配置那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件
• Router
  该配置项可用于覆盖 Nuxt.js 默认的 vue-router 配置
• Transition
  过渡动画