nuxt架构

安装过程

  • 首先安装vue-cli,直接使用过nuxt的模板
  • 然后直接安装vue-cli对应的nuxt模板

     vue init nuxt/starter <project-name>
    cd <project-name>
    npm install
    

目录结构

  • components存放组件,nuxt.js不会扩展增强该目录下的vue.js组件,即不会拥有asyncData特性
  • layouts用于组织应用的布局组件
  • middleware用于存放中间件
  • pages用于组织应用的路由以及视图,nuxt会读取改目录下所有的.vue文件并自动生成对应的路由配置,并且该目录为保留目录,不可更改
  • plugins用于存放那些需要在页面中使用的javascript组件
  • nuxt拓展的asyncData方法(仅限于页面组件)可以在组件每次加载之前没调用,可以再服务端或者路由更新之前调用。被调用时,第一个参数设置为当前页面的上下文对对象,可以利用这个方法获取数据,nuxt会将返回的数据融合组件data方法返回的数据一并返回给当前组件
  • Nuxt.js 提供了几种不同的方法来使用 asyncData 方法,你可以选择自己熟悉的一种来用:
    • 返回一个 Promise, nuxt.js会等待该Promise被解析之后才会设置组件的数据,从而渲染组件.
    • 使用 async 或 await (了解更多)
    • 为第二个参数指定一个回调函数. 注:该回调函数需符合通用的 NodeJs 回调函数的形式: callback(err, data)
    • 具体使用示例
    • nuxt.config.js的extend函数介绍
      • 该扩展方法会被调用两次,一次在服务端打包构建的时候,另外一次是在客户端打包构建的时 候。
      • 该方法的参数为1.Webpack 配置对象2.构建环境对象,包括这些属性(全部为布尔类型): dev, isClient, isServer
  • 你可以通过 vue-router 的子路由创建 Nuxt.js 应用的嵌套路由。

  • 创建内嵌子路由,你需要添加一个 Vue 文件,同时添加一个与该文件同名的目录用来存放子视图组件。

  • 别忘了在父级 Vue 文件内增加 <nuxt-child/> 用于显示子视图内容。

    pages/
        --| users/
        -----| _id.vue
        -----| index.vue
        --| users.vue
    

##关于插件(plugin)

  • 如果担心对于同一个插件引入次数过多,可以使用build下的vendor配置,直接把该插件打进vendor bundle从而减少文件的体积(自己写的组件也可以这样使用)

##生成项目之后

  • 使用nuxt build可以在dist文件夹下生成dist目录直接生成项目
  • 使用nuxt build -a 可以直接生成dist文件之后再8888端口对文件的大小进行分析

注:在任何 Vue 组件的生命周期内, 只有 beforeCreate 和 created 这两个钩子方法会在 客户端和服务端均被调用。其他钩子方法仅在客户端被调用。