Nuxt.js - vue的服务端渲染应用框架

---

Nuxt

• 内置了vue,vue-router,vuex,webpack
• 可以作为Node.js应用跑在服务器上，也可以把整站直接编译为静态HTML
• 会根据pages目录下对应文件夹层级创键的vue文件生成路由
• 减少首次响应时间
• 利于SEO
• 静态化（预渲染），nuxt generate可生成静态站

服务器请求到渲染或者路由切换渲染.png

服务器请求到渲染或者路由切换渲染流程：

• 服务器初始化
  当用户访问应用程序，如果store中定义了nuxtServerInit action,Nuxt.js将调用它更新store
• 中间件运行
  加载即将访问页面所依赖的任何中间件。Nuxt先从nuxt.config.js中加载全局依赖的中间件，之后检测每个相应页面对应的布局文件（页面js中有layout属性指定，默认default布局文件），最后，检测布局文件下子页面子组件依赖的中间件。
• 路由校验参数
  如果访问的页面路由是动态的，且有对应的validate()方法，将进行路由校验
• 异步数据处理
  Nuxt.js调用asyncData()和fetch()方法，在渲染页面之前加载异步数据。
  asyncData()用于异步数据获取，并将数据在服务端渲染到页面。
  fetch()将数据在渲染页面之前填入store.
  ！！！注意：fetch,asyncData,validate只能在页面组件使用，即pages目录下的组件，而不是components目录下的文件
• 开始客户端渲染

赞赞哇.png