nuxt 目录结构及配置文件详解

nuxt 目录结构详解

首先我们来看下使用 create-nuxt-app脚手架工具所创建的nuxt项目目录的结构，

windows cmd 命令行输入，tree /f /a ，打印如下项目目录结构：

C:.
|   .editorconfig
|   .gitignore
|   nuxt.config.js
|   package.json
|   README.md
|
+---assets
|       README.md
|
+---components
|       Logo.vue
|       README.md
|
+---layouts
|       default.vue
|       README.md
|
+---middleware
|       README.md
|
+---pages
|       index.vue
|       README.md
|
+---plugins
|       README.md
|
+---static
|       favicon.ico
|       README.md
|
\---store
        README.md

我们现在来分析一下，可以发现，目录结构中有：

• 文件夹8个： assets、components、layouts、middleware、pages、plugins、static、store 这个
• 文件5个：.editorconfig、.gitignore、nuxt.config.js、package.json、README.md

好，我们现在梳理出了项目目录下所有的文件夹和文件，我们现在呢，就来分析下它们的具体的功能：

1. 首先，我们来分析每个文件夹的功能，我们可以看到在每个文件夹下面有一个README.md这样一个markdown文件，我们打开这个文件，可以看见里面有一些关于这个目录使用的一些说明，大致呢，包括下面几种，

   （1）是否必须，不必要的话可以删除
   （2）该目录有哪些作用
   （3）还有文档的官方文档地址

2. 目录功能的具体介绍

• assets ，存放一些静态资源，包括一些 Sass、Less 或者一些 Javascript 文件 ，在项目组件中引用的时候需要在开头使用 ~assets/ 符号，如果你的静态资源文件需要 webpack 做构建编译处理，可以放到 assets 目录，否则可以放到 static 目录中去，这也是 assets 目录 和 static 目录的一个区别

• components , 这是一个存放 vue.js 组件文件的目录，而且呢，Nuxt.js 在构建的时候，也不会处理这些组件文件，对这些文件内容进行增强，就是增加如下的这些内容：

  export default {
    asyncData (context) {
      // called every time before loading the component
      return { name: 'World' }
    },
    fetch () {
      // The fetch method is used to fill the store before rendering the page
    },
    head () {
      // Set Meta Tags for this Page
    },
    // and more functionality to discover
    ...
  }
  

• layouts，这个目录呢，包含着开发项目的布局，在这里面呢可以定义一些项目的公用结构，比如导航栏等

  • 在这个目录呢，我们来新建一个blog.vue，内容如下：

   <template>
     <div>
       <header> <h3>这是我的 blog 导航栏h3> header>
       <nuxt />
     div>
   template>
  

  • 然后我们在page目录下，新建一个posts.vue文件，编辑如下：

    <template>
      <div class="container">
        我是一篇文章
      div>
    template>
    
    <script>
        export default {
            layout: 'blog'
        }
    script>
  

  • 我们也可以在page目录下面index..vue，新增layout: 'blog'，我们也会发现在首页/的顶部我们也出现了我们的haedr标题

• middleware，这个middleware目录主要是用于存放一些方法函数，在页面加载渲染前运行,每一个中间件应放置在 middleware/ 目录。文件名的名称将成为中间件名称(middleware/auth.js将成为 auth 中间件)。

  • 一个中间件接收 context 作为第一个参数：
  • middleware/stats.js

    import axios from 'axios'
  
    export default function ({ route }) {
      return axios.post('http://my-stats-api.com', {
        url: route.fullPath
      })
    }
  

  • 使用方法，分别在我们的 nuxt.config.js 、 layouts 或者 pages 中使用中间件:

    // 现在，stats 中间件将在每个路由改变时被调用
    module.exports = {
      router: {
        middleware: 'stats'
      }
    }
  

  • 我们也可以将 middleware 添加到指定的布局或者页面，pages/index.vue 或者 layouts/default.vue:

  // 在当前页面或者布局加载之前执行
  export default {
    middleware: 'stats'
  }
  

• pages，pages 目录是一个存放页面（.vue）的文件夹，这些页面的层级约束的页面路由url的跳转及展示，Nuxt 会帮我们将 pages 下面的文件的层级自动解析成路由

• plugins，存放一些第三方库（element-ui等）的引用，然后在 nuxt.config.js 中的plugins字段中配置使用

• static，存放静态资源的目录，包括一些图片，视频，音乐等媒体资源

• store，存放vuex状态树文件，包括 state.js、store.js 等等

3. 根目录文件的介绍

• package.json：npm 包管理器的文件，用于管理项目的依赖，包括暴露 npm script 命令的管理
• nuxt.config.js: nuxt 项目的配置文件，在这个配置文件可以配置nuxt项目启动的一些设置， 组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。
• .gitignore：git 仓库 忽略的文件
• .editorconfig, 编辑器的相关字体，颜色等配置
• README.md，项目的markdown介绍文件

接下来，我们来补充下，整个 nuxt.js 为页面提供的一些特殊配置

属性名	描述
asyncData	最重要的一个键, 支持 异步数据处理，另外该方法的第一个参数为当前页面组件的 上下文对象。
fetch	与 asyncData 方法类似，用于在渲染页面之前获取数据填充应用的状态树（store）。不同的是 fetch 方法不会设置组件的数据。详情请参考 关于fetch方法的文档。
head	配置当前页面的 Meta 标签, 详情参考 页面头部配置API。
layout	指定当前页面使用的布局（layouts 根目录下的布局文件）。详情请参考 关于 布局 的文档。
loading	如果设置为false，则阻止页面自动调用this.$nuxt.$loading.finish()和this.$nuxt.$loading.start(),您可以手动控制它,请看例子,仅适用于在nuxt.config.js中设置loading的情况下。请参考API配置 loading 文档。
transition	指定页面切换的过渡动效, 详情请参考 页面过渡动效。
scrollToTop	布尔值，默认: false。 用于判定渲染页面前是否需要将当前页面滚动至顶部。这个配置用于 嵌套路由的应用场景。
validate	校验方法用于校验 动态路由的参数。
middleware	指定页面的中间件，中间件会在页面渲染之前被调用， 请参考 路由中间件。

nuxt.config.js 配置文件详解

现在我们来介绍 nuxt.config.js 配置文件详细介绍

• 字段 mode：

  • mode: 'universal',
  • nuxt 项目的开发模式，默认是 universal （SSR服务端渲染），但是呢，它还有一个值，是spa ，就是我们常说的单页面应用，使用nuxt是可以构建单页面应用的，类似于使用vue-cli脚手架工具的创建spa项目

• 字段 head：

  • 这个head呢，就是我们的项目页面的header部分，这些配置会在head标签里面生成对应的meta，link等标签，这里默认的title是我们项目package.json的默认name，描述呢，也是我们项目默认的 description ; 这里的hid属性，是我们的id标识符，用于区分相同name的meta标签， 这里的Link 是我们项目的ico，默认的 / 地址，是我们的static目录下地址

  head: {
      title: process.env.npm_package_name || '',
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
      ],
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
      ]
  }
  

• 字段 loading:

  • loading: { color: '#fff' }
  • 目录项目页面切换，默认的加载配置
  • 在页面切换的时候，Nuxt.js 使用内置的加载组件显示加载进度条。我们可以定制它的样式，禁用或者创建自己的加载组件。

    export default {
      mounted () {
        this.$nextTick(() => {
          this.$nuxt.$loading.start()
          setTimeout(() => this.$nuxt.$loading.finish(), 500)
        })
      }
    }
  

  • 禁用加载进度条

    module.exports = {
      loading: false
    }
  

• 字段 css :

  • 存放样式文件，可以在项目的全局加载出来，可以放置一些全局的而一些浏览器默认样式

• 字段 plugins:

  • 使用方式

    module.exports = {
      plugins: ['~plugins/vue-notifications']
    }
  

  • 然后, 我们需要创建 plugins/vue-notifications.js 文件：

    import Vue from 'vue'
    import VueNotifications from 'vue-notifications'
  
    Vue.use(VueNotifications)
  

• 字段 modules:

  • modules是Nuxt.js扩展，可以扩展它的核心功能并添加无限的集成。
  • 参考案例：

    export default {
      modules: [
        // Using package name
        '@nuxtjs/axios',
  
        // Relative to your project srcDir
        '~/modules/awesome.js',
  
        // Providing options
        ['@nuxtjs/google-analytics', { ua: 'X1234567' }],
  
        // Inline definition
        function () { }
      ]
    }
  

• 字段 build:

  • Nuxt.js 允许我们在自动生成的 vendor.bundle.js 文件中添加一些模块，以减少应用 bundle 的体积。如果你的应用依赖第三方模块，这个配置项是十分实用的。
  • Nuxt.js 使用 webpack-bundle-analyzer 分析并可视化构建后的打包文件，你可以基于分析结果来决定如何优化它。
  • 案例代码：

    module.exports = {
      build: {
        analyze: true
        // or
        analyze: {
          analyzerMode: 'static'
        }
      }
    }
  

• 字段 devModules,

  • 类似于 module 字段，但只运行于开发环境，不会在线上环境构建