Nust.js

2,485 阅读2分钟

客户端渲染

客户端渲染是等js代码下载、加载、解析完成再请求数据渲染,等待的过程页面是什么都没有的,就是用户看到的白屏

页面效果:

查看源码,不是控制台的elemnts:看不到异步请求来的数据的

服务器端渲染

将组件或页面通过服务器生成html字符串,再发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序。

两点❤

  • 服务器端将编译好的内容发给浏览器
  • 异步的数据同时也传给浏览器端

因为:浏览器要编译结果,需要数据,要完成交互,客户端和服务器端对比数据,保障数据一致

查看源码:可以看到异步请求来的数据的,服务器扔给客户端的就是你查看源码的

SSR实现原理


创建即配置

概述

  • Nust.js是服务端渲染应用框架    
  • Vue2 基于Vue2框架做的
  • Vue Router 包含Vue Router    支持路由
  • Vuex 可以支持vuex     跨组件通信工具
  • Vue Server Renderer 支持     SSR(服务端渲染)
  • vue-meta     html中的管理,配置文件的形式去写

生命周期

asyncData():异步获取数据,处理组件数据。

fetch():异步获取数据,用来修改vuex的

Nust安装

github.com/nuxt-commun…

目录

  • components:   普通组件

组件逻辑

  • assets:   放静态资源
  • pages:   页面组件 ps:理解为配置路由

Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。

  • layouts: ensp;  模版组件    ps:理解为公共组件

公共的组件放到模版里 头部-尾部-菜单啥的,模版文件不用动。

  • store :   管理状态
  • nuxt.config.js 全局配置全局配置
  • server 服务端部分

接口,完成异步请求。里面的index.js 是接口的入口文件。