Nuxt 目录结构(nuxt渲染流程)

Nuxt 目录结构(nuxt渲染流程)_第1张图片

  1. assets: 资源文件。用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。放置不需要经过 webpack 打包处理的资源文件,如 scss,图片,字体等。
  2. components: 组件。可以复用的组件。存放项目中的各种组件;注意,只有在这个目录下的文件才能被称为 组件
  3. layouts: page: 创建自定义的页面布局。页面都需要有一个布局,默认为 default.vue。它规定了一个页面如何布局页面。 可以在这个目录下创建全局页面的统一布局,或是错误页布局。如果需要在布局中渲染 pages 目录中的路由页面,需要在布局文件中加上 标签。如果需要在普通页面中使用下级路由,则需要在页面中添加 该目录名为Nuxt.js保留的,不可更改。
  4. middleware: 中间件。放置自定义的中间件,会在加载组件之前调用。可以在页面中调用: middleware: 'middlewareName' 。
  5. pages: 页面。一个 vue 文件即为一个页面。index.vue 为根页面。用于nuxt自动组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。
    1. 若需要二级页面,则添加文件夹即可。
    2. 如果页面的名称类似于 _id.vue (以 _ 开头),则为动态路由页面,_ 后为匹配的变量(params)。
    3. 若变量是必须的,则在文件夹下建立空文件 index.vue。更多的配置请移步至 官网 。
  6. plugin: 插件。用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。需要注意的是,在任何 Vue 组件的生命周期内, 只有 beforeCreate 和 created 这两个钩子方法会在 客户端和服务端均被调用。其他钩子方法仅在客户端被调用。 可以在这个目录中放置自定义插件,在根 Vue 对象实例化之前运行。例如,可以将项目中的埋点逻辑封装成一个插件,放置在这个目录中,并在 nuxt.config.js 中加载。
  7. static: 静态文件。静态文件目录 static 用于存放应用的静态文件,此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 放置不需要经过 webpack 打包的静态资源。如一些 js, css 库,图片,ico地址导航图标。服务器启动的时候,该目录下的文件会映射至应用的根路径 / 下。
  8. store: 用于组织vuex状态管理。具体使用请移步至 官网
  9. nuxt.config.js: nuxt.config.js 文件用于组织Nuxt.js 应用的个性化配置,以便覆盖默认配置。具体配置请移步至 官网

 

Nuxt.js 的渲染流程

Nuxt.js 通过一系列构建于 Vue.js 之上的方法进行服务端渲染,具体流程如下:

调用 nuxtServerInit 方法

当请求打入时,最先调用的即是 nuxtServerInit 方法,可以通过这个方法预先将服务器的数据保存,如已登录的用户信息等。另外,这个方法中也可以执行异步操作,并等待数据解析后返回。

Middleware

经过第一步后,请求会进入 Middleware 层,在该层中有三步操作:

读取 nuxt.config.js 中全局 middleware 字段的配置,并调用相应的中间件方法 匹配并加载与请求相对应的 layout 调用 layoutpage 的中间件方法

调用 validate 方法

在这一步可以对请求参数进行校验,或是对第一步中服务器下发的数据进行校验,如果校验失败,将抛出 404 页面。

调用 fetch asyncData 方法

这两个方法都会在组件加载之前被调用,它们的职责各有不同, asyncData 用来异步的进行组件数据的初始化工作,而 fetch 方法偏重于异步获取数据后修改 Vuex 中的状态。

 

你可能感兴趣的:(Nuxt.js)