理解目录结构

如果你已使用 create-nuxt-app 脚手架工具成功安装了 Nuxt 项目，你应该在你的项目文件夹中看到以下默认目录和文件：

-| your-app-name/
---| assets/
---| components/
---| layouts/
---| middleware/
---| node_modules/
---| pages/
---| plugins/
---| static/
---| store/
---| nuxt.config.js
---| package.json
---| README.md

在接下来的部分中，让我们逐个了解它们及其各自的用途。

assets 目录

/assets/ 目录用于存放你的项目资源，例如图片、字体以及 Less、Stylus 或 Sass 文件，这些文件将由 webpack 编译。例如，你可能有一个 Less 文件，如下所示：

// assets/styles.less
@width: 10px;
@height: @width + 10px;

header {
  width: @width;
  height: @height;
}

webpack 会将上面的代码编译成以下供你的应用程序使用的 CSS：

header {
  width: 10px;
  height: 20px;
}

我们将在本章稍后讨论在此目录中提供图像的好处，并且在本书生成静态页面时，我们将经常使用此目录。

static 目录

/static/ 目录用于存放你不想被 webpack 编译或无法编译的文件，例如 favicon 文件。如果你不想在 /assets/ 目录中提供你的资源（例如图片、字体和样式），你可以将它们放在 /static/ 目录中。此目录中的所有文件都直接映射到服务器根目录，因此可以直接通过根 URL 访问它们。例如，/static/1.jpg 映射为 /1.jpg，因此你可以像这样访问它：

http://localhost:3000/1.jpg

我们将在本章稍后讨论在 /assets/ 和 /static/ 目录之间提供图像的差异。请注意，当你使用 Nuxt 脚手架工具时，默认情况下会在该目录中获得一个 favicon.ico 文件，但你可以创建自己的 favicon 文件来替换它。

pages 目录

/pages/ 目录用于存放应用程序的视图和路由。Nuxt 将读取并转换此目录中的所有 .vue 文件，并自动为你生成应用程序路由器。例如，考虑以下文件：

/pages/about.vue
/pages/contact.vue

Nuxt 将获取上述文件名（不带 .vue 扩展名），并为你的应用程序创建以下路由：

localhost:3000/about
localhost:3000/contact

如果你通过 create-nuxt-app 安装 Nuxt，你将自动获得一个 index.vue 文件，你可以在 localhost:3000 上看到此页面。

我们将在第四章 “添加视图、路由和过渡效果” 中更详细地介绍此目录。

layouts 目录

/layouts/ 目录用于存放应用程序的布局。当你使用 Nuxt 脚手架工具时，默认会获得一个名为 default.vue 的布局。你可以修改此默认布局或向此目录添加新布局。

我们将在第四章 “添加视图、路由和过渡效果” 中更详细地介绍此目录。

components 目录

/components/ 目录用于存放 Vue 组件。当你使用 Nuxt 脚手架工具时，默认会获得一个名为 Logo.vue 的组件。此目录中的 .vue 文件与 /pages/ 目录中的 .vue 文件之间明显的也是重要的区别在于，你不能在此目录的组件中使用 asyncData 方法；但是，如果需要，你可以使用 fetch 方法在其中设置数据。你应该将小型且可重用的组件放在此目录中。

我们将在第五章 “添加 Vue 组件” 中更详细地介绍此目录。

plugins 目录

/plugins/ 目录用于存放 JavaScript 函数，例如你希望在根 Vue 实例实例化之前运行的全局函数。例如，你可能想要创建一个新的 axios 实例，该实例专门向 https://jsonplaceholder.typicode.com 发送 API 请求，并且你可能希望全局使用此实例，而无需每次都导入 axios 并创建新实例。你可以创建一个注入并插入到 Nuxt 上下文的插件，如下所示：

// plugins/axios-typicode.js
import axios from 'axios'

const instance = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com'
})

export default (ctx, inject) => {
  ctx.$axiosTypicode = instance
  inject('axiosTypicode', instance)
}

然后，你可以通过调用 $axiosTypicode 在任何页面上使用此 axios 实例，如下所示：

// pages/users/index.vue
export default {
  async asyncData ({ $axiosTypicode, error }) {
    let { data } = await $axiosTypicode.get('/users')
  }
}

我们将在第六章 “编写插件和模块” 中更详细地介绍此目录。

请注意，axios 是一个 HTTP 客户端，我们将在本书中经常使用它。在前面的插件文件中导入它之前，你需要将其安装在你的项目目录中。有关此 Node.js 包的更多信息，请访问 https://github.com/axios/axios。

store 目录

/store/ 目录用于存放 Vuex store 文件。你不需要在 Nuxt 中安装 Vuex，因为它已经包含在 Nuxt 中了。它默认是禁用的，你只需要在此目录中添加一个 index.js 文件即可启用它。例如，如果你想要一个名为 auth 的属性，该属性可以从你的应用程序的任何地方访问。你将把该属性存储在 index.js 文件的 state 变量中，如下所示：

// store/index.js:
export const state = () => ({
  auth: null
})

我们将在第十章 “添加 Vuex Store” 中更详细地介绍此目录。

middleware 目录

/middleware/ 目录用于存放中间件文件，这些文件是在渲染页面或一组页面之前运行的 JavaScript 函数。例如，你可能想要创建一个只有在用户通过身份验证后才能访问的秘密页面。你可以使用 Vuex store 来存储身份验证数据，并创建一个中间件，如果在 state store 中 auth 属性为空，则抛出 403 错误：

// middleware/auth.js
export default function ({ store, error }) {
  if (!store.state.auth) {
    error({
      message: 'You are not connected',
      statusCode: 403
    })
  }
}

我们将在第十一章 “编写路由中间件和服务端中间件” 中更详细地介绍此目录。

目录结构

/
├── 📁 .nuxt // Nuxt 在开发中使用 .nuxt/ 目录来生成你的 Vue 应用程序
├── 📁 .output // 当构建你的应用程序用于生产时，Nuxt 会创建 .output/ 目录
├── 📁 assets // 用于添加所有将由构建工具处理的网站资产
├── 📁 components // 放置所有 Vue 组件的地方
├── 📁 composables // 将你的 Vue 组合式函数自动导入到你的应用程序中
├── 📁 content // 为你的应用创建一个基于文件的内容管理系统（CMS）
├── 📁 layouts // Nuxt 提供了一个布局框架，用于将常见的 UI 模式提取为可重用的布局
├── 📁 middleware // Nuxt 提供了中间件来在导航到特定路由之前运行代码
├── 📁 modules // 在应用程序中自动注册本地模块
├── 📁 node_modules // 包管理器会将项目的依赖存储在 node_modules/ 目录中
├── 📁 pages // Nuxt 提供了基于文件的路由功能，用于在你的 Web 应用中创建路由
├── 📁 plugins // Nuxt拥有一个插件系统，可以在创建 Vue 应用程序时使用 Vue 插件和其他功能
├── 📁 public // 用于提供网站的静态资源
├── 📁 server // 用于在应用程序中注册API和服务器处理程序
├── 📁 utils // 在整个应用程序中自动导入你的工具函数
├── 📁 store/
├── 📁 static/
├── 📄 .env // 用于指定构建和开发环境变量
├── 📄 .gitignore // 指定了Git应该忽略的故意未跟踪的文件
├── 📄 .nuxtignore // 允许 Nuxt 在构建阶段忽略项目根目录下的文件
├── 📄 app.vue // Nuxt 应用的主要组件，入口文件
├── 📄 app.config.ts // 使用 App Config 文件在应用程序中公开响应式配置
├── 📄 nuxt.config.ts // Nuxt 可以通过一个单独的 nuxt.config 文件进行简单配置
├── 📄 package.json // 包含了应用程序的所有依赖项和脚本
└── 📄 tsconfig.json // Nuxt 会根据你在 Nuxt 项目中使用的别名，以及其他合理的默认值，自动生成一个 `.nuxt/tsconfig.json` 文件

package.json 文件

package.json 文件用于存放 Nuxt 应用程序的依赖项和脚本。例如，如果你使用 Nuxt 脚手架工具，你将在该文件中获得以下默认脚本和依赖项：

{
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "nuxt": "^2.14.0"
  }
}

我们将在第八章 “添加服务端框架” 和第十四章 “使用代码检查器、格式化工具和部署命令” 中大量使用此文件。

nuxt.config.js 文件

nuxt.config.js 文件用于存放应用于你的应用程序的自定义配置。例如，当你使用 Nuxt 脚手架工具时，默认情况下会为你的 HTML <head> 块提供以下自定义 meta 标签、标题和链接：

export default {
  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' }
    ]
  }
}

我们可以修改上述自定义 head 块。你将在第四章 “添加视图、路由和过渡效果” 中学习如何做到这一点。除了 head 之外，还有其他用于进行自定义配置的关键属性，我们将在接下来的部分中介绍这些属性。

别名

在 Nuxt 中，~ 或 @ 别名用于关联 srcDir 属性，而 ~~ 或 @@ 别名用于关联 rootDir 属性。例如，如果你想将图片链接到 /assets/ 目录，你可以使用 ~ 别名，如下所示：

<template>
  <img src="~/assets/sample-1.jpg"/>
</template>

另一方面，如果你想将图片链接到 /static/ 目录，你可以使用 ~ 别名，如下所示：

<template>
  <img src="~/static/sample-1.jpg"/>
</template>

请注意，你也可以在不使用这些别名的情况下链接 /static/ 目录中的资源：

<template>
  <img src="/sample-1.jpg"/>
</template>

默认情况下，srcDir 的值与 rootDir 的值相同，即 process.cwd()。我们将在下一节中介绍这两个选项，你将学习如何更改它们的默认值。因此，让我们探索如何在你的项目中进行自定义配置。