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

1. assets: 资源文件。用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。放置不需要经过 webpack 打包处理的资源文件，如 scss，图片，字体等。
2. components: 组件。可以复用的组件。存放项目中的各种组件；注意，只有在这个目录下的文件才能被称为 组件 。
3. layouts: 创建自定义的页面布局即根组件，可用于提起页面公共部分（头部、底部）。页面都需要有一个布局，默认为 default.vue。它规定了一个页面如何布局页面。 可以在这个目录下创建全局页面的统一布局，或是错误页布局。如果需要在布局中渲染 pages 目录中的路由页面，需要在布局文件中加上 <nuxt /> 标签。如果需要在普通页面中使用下级路由，则需要在页面中添加 <nuxt-child />。<nuxt-link to="/filem" tag="li">filem</nuxt-link>链接。
   多个页面布局.vue，需要在使用页面中添加属性layout:'layoutName'
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 调用 layout 和 page 的中间件方法

调用 validate 方法

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

调用 fetch 及 asyncData 方法服务器端请求数据

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

  /**
   * 后端请求
   * 1 在服务器端调用asyncData时，您可以访问用户请求的req和res对象。
   * 2 在当前页面刷新， 服务端执行此函数
   * 3 从其他页面跳转过来，客户端执行此函数
   */
  asyncData({ isDev, route, store, env, params, query, req, res, redirect, error }) {
    /**
     * process全局变量
     * process.server==>Boolean是否在服务器端运行
     */
    console.log(process.server);
    return axios({
      url: process.server
        ? "http://152.136.185.211:7878/api/h666/home/data?type=pop&page=1"
        : "/api/hy66/home/data?type=pop&page=1",
    }).then((res) => {
      // console.log(res.data);
      return {
        // 默认合并data中的状态
        list: res.data.data.list,
      };
    });
  },