vue 二、Nuxt 入门

二、Nuxt 入门

本章将指导您从头开始或使用 Nuxt 脚手架工具安装 Nuxt 项目。安装 Nuxt 是开发 Nuxt 应用时应该做的第一件事。在本书中，我们将对所有示例应用使用 Nuxt 脚手架工具，因为它会自动为我们生成重要的项目文件夹和文件（我们将在本章中探讨）；当然，你可以从头开始开发小应用。我们将介绍目录结构以及每个目录的用途。如果您是从头开始安装 Nuxt 项目，您仍然需要知道 Nuxt 将从项目中自动读取的目录结构和官方目录。您还将了解如何配置 Nuxt 以满足应用的特定需求，即使默认情况下 Nuxt 已配置为涵盖大多数实际情况。因此，我们将引导您完成配置的螺母和螺栓。此外，我们还将介绍 Nuxt 应用中的资产服务，特别是图像服务。

我们将在本章中介绍的主题如下：

安装 Nuxt
了解目录结构
了解自定义配置
理解资产服务

技术要求

您应该熟悉以下术语：

JavaScript ES6
服务器端和客户端开发基础
应用接口（API）

支持的操作系统如下所示：

带 PowerShell 的 Windows 10 或更高版本
带终端的 macOS（Bash 或 Oh My Zsh）
带有终端的 Linux 系统（如 Ubuntu）

建议的跨平台软件如下：

Node.js:https://nodejs.org/
节点包管理器（npm）：https://www.npmjs.com/

安装 Nuxt

有两种方法可以轻松开始使用 Nuxt。最简单的方法是使用 Nuxt 脚手架工具create-nuxt-app，它会自动为您安装所有 Nuxt 依赖项和默认目录。另一种方法是从头开始，只使用package.json文件。让我们来看看你是如何做到这一点的。

使用 CreateNuxt 应用

create-nuxt-app是 Nuxt 团队创建的脚手架工具，可用于快速安装项目。您需要做的是使用npx在您喜爱的终端上运行create-nuxt-app：

$ npx create-nuxt-app <project-name>

npx 自 npm 5.2.0 起默认发货，但您可以通过在终端上检查其版本来确保已安装，如下所示：

$ npx --version
6.14.5

在安装 Nuxt 项目的过程中，将向您询问一些与 Nuxt 集成的问题，如下所示：

选择一种编程语言：

JavaScript 
TypeScript

选择一个包管理器：

Yarn 
Npm

选择一个 UI 框架：

None
Ant Design Vue  
Bootstrap Vue 
...

选择一个测试框架：

None
Jest
AVA
WebdriverIO

让我们使用 npx 创建您的第一个 Nuxt 应用，名为first-nuxt。因此，在您的机器上选择一个本地目录，在该目录上打开一个终端，然后运行npx create-nuxt-app first-nuxt。当您在安装过程中遇到类似前面提到的问题时，选择JavaScript作为编程语言，选择【Npm】作为包管理器，选择None作为 UI 框架和测试框架。然后，跳过其余的问题（只是不要选择任何选项），以便我们可以在以后需要时添加它们。在您的终端上，您应该有一个类似于以下的问题列表，以及我们建议的相同选项：

$ npx create-nuxt-app first-nuxt 
create-nuxt-app v3.1.0
:: Generating Nuxt.js project in /path/to/your/project/first-nuxt 
? Project name: first-nuxt 
? Programming language: JavaScript 
? Package manager: Npm 
? UI framework: None 
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection) 
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection) 
? Testing framework: None 
? Rendering mode: Universal (SSR / SSG) 
? Deployment target: Server (Node.js hosting) 
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)

关于渲染模式的问题，您应该选择Universal (SSR / SSG)。我们将在第 15 章中介绍单页应用（SPA）选项使用 Nuxt创建 SPA。在本书中，除了第 15 章、中使用 Nuxt创建 SPA 的示例外，我们将在所有示例应用中使用 SSR。在本书中，我们还将使用npm作为我们的包管理器，因此请确保您选择此选项。安装完成后，我们可以开始：

$ cd first-nuxt
$ npm run dev

应用正在localhost:3000上运行。在您喜爱的浏览器中运行 Nuxt 地址时，您应该会在屏幕上看到 Nuxt 生成的默认索引页。使用脚手架工具安装 Nuxt 项目很容易，不是吗？但有时您可能不需要这样的完整堆栈安装；您可能只需要一个“裸骨”安装。如果是这样，我们将在下一节了解如何从头开始安装 Nuxt。

您可以在我们的 GitHub 存储库的/nuxt-packt/chapter-2/scaffolding/中找到这个简单应用的源文件。

从头开始

如果您不想使用 Nuxt scaffolding 工具，可以使用package.json文件和npm为您安装 Nuxt 应用。让我们通过以下步骤了解如何：

在根项目中创建一个package.json文件：

{
  "name": "nuxt-app",
  "scripts": {
    "dev": "nuxt"
  }
}

通过 npm 在项目中安装 Nuxt：

$ npm i nuxt

在根项目中创建一个/pages/目录，然后在其中创建一个index.vue页面：

// pages/index.vue
<template>
  <h1>Hello world!</h1>
</template>

使用 npm 启动项目：

$ npm run dev

应用正在localhost:3000上运行。当您在最喜爱的浏览器中运行该地址时，您应该会在屏幕上看到您创建的带有Hello world!消息的索引页。

但是，无论您选择“裸体”还是全堆栈选项，您都应该了解 Nuxt 运行应用所需的默认目录。那么，让我们在下一节中了解这些目录是什么。

You can find this simple app in /nuxt-packt/chapter-2/scratch/ in our GitHub repository.

了解目录结构

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

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

让我们逐一了解它们，并在以下各节中了解它们的用途。

资产目录

/img/目录用于包含项目的资产，如图像、字体等，手写笔或 Sass 文件，这些文件将由 webpack 编译。例如，您的文件可能较少，如下所示：

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

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

webpack 将为您的应用将上述代码编译为以下 CSS：

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

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

静态目录

/static/目录用于包含您不希望通过 webpack 编译或无法编译的文件，如 favicon 文件。如果您不想 img/目录中提供您的资产，例如图像、字体和样式，您可以将它们保留在/static/目录中。此目录中的所有文件都直接映射到服务器根目录，因此可以在根 URL 下直接访问这些文件。例如，/static/1.jpg被映射为/1.jpg`，所以您可以按如下方式访问它：

http://localhost:3000/1.jpg

我们将在本章后面讨 img/和/static/目录在提供图像方面的差异。请注意，当您使用 Nuxt scaffolding 工具时，默认情况下会在此目录中获得一个favicon.ico`文件，但您可以创建 favicon 文件来替换它。

页面目录

/pages/目录用于包含应用的视图和路由。Nuxt 将读取并转换此目录中的所有.vue文件，并自动为您生成 app router。例如，以以下内容为例：

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

Nuxt 将采用前面没有.vue扩展名的文件名，并为您的应用创建以下路由：

localhost:3000/about
localhost:3000/contact

如果您通过create-nuxt-app安装 Nuxt，您会得到一个自动为您创建的index.vue文件，您可以在localhost:3000处看到此页面。

我们将在第 4 章添加视图、路线和过渡中更详细地查看此目录。

布局目录

/layouts/目录用于包含应用的布局。使用 Nuxt 脚手架工具时，默认情况下会得到一个名为default.vue的布局。您可以修改此默认布局或将新布局添加到此目录。

我们将在第 4 章添加视图、路线和过渡中更详细地查看此目录。

组件目录

/components/目录用于包含 Vue 组件。当您使用 Nuxt 脚手架工具时，默认情况下会得到一个名为Logo.vue的组件。此目录中的.vue文件与/pages/目录中的.vue文件有一个明显而重要的区别，即您不能对该目录中的组件使用asyncData方法；但是，如果需要，您可以使用fetch方法设置它们。您应该将小型和可重用的组件保存在此目录中。

我们将在第 5 章添加 Vue 组件中更详细地查看此目录。

插件目录

/plugins/目录用于包含 JavaScript 函数，例如在实例化根 Vue 实例之前要运行的全局函数。例如，您可能希望创建一个新的axios实例，专门向发送 API 请求 https://jsonplaceholder.typicode.com 仅限，您可能希望使此实例在全局可用，而无需每次导入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')
  }
}

我们将在第 6 章编写插件和模块中更详细地了解该目录。

Note that axios is an HTTP client that we will use often throughout this book. You will need to install it in your project directory before importing it in the preceding plugin file. For more information about this Node.js package, please visit https://github.com/axios/axios.

存储目录

/store/目录用于包含 Vuex 存储文件。您不需要在 Nuxt 中安装 Vuex，因为它已经随 Nuxt 提供。默认情况下，它是禁用的，您只需将一个index.js文件添加到此目录即可启用它。例如，如果您想拥有一个名为auth的属性，该属性可以在应用中的任何位置访问。

您将在index.js文件的state变量中存储该属性，如下所示：

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

我们将在第 10 章添加 Vuex 存储中更详细地查看此目录。

中间件目录

/middleware/目录用于包含中间件文件，这些文件是在呈现页面或页面组之前运行的 JavaScript 函数。例如，您可能希望有一个只有在用户经过身份验证后才能访问的秘密页面。如果state存储区中的auth属性为空，您可以使用 Vuex 存储区存储经过身份验证的数据，并创建一个中间件来抛出403错误：

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

我们将在第 11 章、编写路由中间件和服务器中间件中更详细地了解该目录。

package.json 文件

package.json文件用于包含 Nuxt 应用的依赖项和脚本。例如，如果使用 Nuxt scaffolding 工具，则会在此文件中获得以下默认脚本和依赖项：

// package.json
{
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "nuxt": "^2.14.0"
  }
}

我们将在第 8 章、添加服务器端框架和第 14 章、中使用 linter、formatter 和部署命令对该文件进行大量工作。

nuxt.config.js 文件

nuxt.config.js文件用于包含专门应用于您的应用的自定义配置。例如，当您使用 Nuxt scaffolding 工具时，默认情况下会为 HTML<head>块获得这些自定义元标记、标题和链接：

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: 'img/x-icon', href: '/favicon.ico' }
    ]
  }
}

我们可以修改前面的自定义头块。您将在第 4 章中学习如何添加视图、路线和过渡。除了head之外，还有其他用于定制配置的关键属性，我们将在下一节中介绍。

别名

在 Nuxt 中，~或@别名用于与srcDir属性关联，~~或@@别名用于与rootDir属性关联。例如，如果要将图像链接 img/目录，可以使用~`别名，如下所示：

<template>
  <img src=img/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()。我们将在下一节介绍这两个选项，您将了解如何更改它们的默认值。因此，让我们来探讨如何在项目中处理自定义配置。

了解自定义配置

您可以通过在项目的根目录中添加一个nuxt.config.js文件（我们在本书中将其称为Nuxt 配置文件，来配置您的 Nuxt 应用以适合您的项目。默认情况下，如果使用 Nuxt scaffolding 工具，将获得此文件。打开此文件时，应获得以下选项（或属性）：

// nuxt.config.js
export default {
  mode: 'universal',
  target: 'server',
  head: { ... },
  css: [],
  plugins: [],
  components: true,
  buildModules: [],
  modules: [],
  build: {}
}

除mode、target、head和components外，大多数为空。您可以通过这些选项自定义 Nuxt 以特别适合您的项目。让我们先看一下它们中的每一个，然后看一下其他选项，看看它们有什么用途。

模式选项

mode选项用于定义应用的“性质”——无论是通用还是 SPA。其默认值为通用。如果您正在使用 Nuxt 开发 SPA，则将此值更改为spa。除了第 15 章使用 Nuxt创建 SPA 之外，我们将在本书接下来的章节中重点介绍通用模式。

目标选项

target选项用于设置应用的部署目标–无论是部署为服务器端渲染应用还是静态生成的应用。服务器端渲染部署的默认值为server。本书中大多数示例应用的部署目标是服务器端渲染。我们将在几章中针对静态生成的部署，特别是最后一章——第 18 章，创建一个带有 CMS 和 GraphQL的 Nuxt 应用。

头选项

head选项用于定义我们应用<head>块中的所有默认元标记。如果使用 Nuxt scaffolding 工具，您将在 Nuxt 配置文件中获得以下自定义head配置：

// nuxt.config.js
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: 'img/x-icon', href: '/favicon.ico' }
    ]
  }
}

您可以修改前面的配置或添加更多自定义配置–例如，添加项目所需的一些 JavaScript 和 CSS 库：

// nuxt.config.js
export default {
  head: {
    titleTemplate: '%s - Nuxt App',
    meta: [
      //...
    ],
    script: [
      { src: 'https://cdnjs.cloudflare.com/.../jquery.min.js' },
      { src: 'https://cdn.jsdelivr.net/.../foundation.min.js' },
    ],
    link: [
      { rel: 'stylesheet', href: 
      'https://cdn.jsdelivr.net/.../foundation.min.css' },
    ]
  }
}

我们将在第 3 章、添加 UI 框架和第 4 章、添加视图、路由和过渡中详细介绍此选项。注意，jQuery 是基金会（ZURB）的核心依赖性，我们将在 AutoT8A.第 3 章 AUTT9T，OUT1010 中添加。因此，当前需要在项目中安装 jQuery 以使用基础。这在将来的版本中可能成为可选的。

css 选项

css选项用于添加全局 CSS 文件。这些文件可以是.css、.less或.scss文件。它们也可以是直接从项目中的 Node.js/node_modules/目录加载的模块和库。例如，以以下内容为例：

// nuxt.config.js
export default {
  css: [
    'jquery-ui-bundle/jquery-ui.min.css',
    img/less/styles.less',
    img/scss/styles.scss'
  ]
}

在前面的配置中，我们从安装在/node_modules/目录中的 jQuery UI 模块加载 CSS 文件，以及存储 img/目录中的 Less 和 Sass 文件。请注意，如果您正在使用.less和.scss`文件编写样式，则需要将 Less 和 Sass 模块及其 webpack Loader 一起安装，如下所示：

$ npm i less less-loader --save-dev
$ npm i node-sass --save-dev
$ npm i sass-loader --save-dev

我们将在第 3 章、添加 UI 框架和第 4 章、添加视图、路由和过渡中更多地使用此选项。

插件选项

plugins选项用于添加在根 Vue 实例之前运行的 JavaScript 插件。例如，以以下内容为例：

// nuxt.config.js
export default {
  plugins: ['~/plugins/vue-notifications']
}

我们经常在/plugins/目录中使用此选项，我们在上一节中介绍了这一点。我们将在第 6 章编写插件和模块中对此选项进行大量研究。

组件选项

components选项用于设置是否自动导入/components/目录中的组件。如果要将大量组件导入布局或页面，则此选项非常有用。如果将此选项设置为true，则不必手动导入。其默认值为false。对于本书中的所有应用，我们将此选项设置为true。

For more information and (advanced) usage of this option, please visit https://github.com/nuxt/components.

buildModules 选项

buildModules选项用于注册仅构建的模块–仅在应用的开发和构建时需要的模块。在本书中，请注意，我们将只利用 Nuxt 社区中的一些模块，并在第 6 章编写插件和模块中创建 Node.js 运行时所需的自定义模块。但有关buildModules选项和仅用于构建时间的构建模块的更多信息，请访问https://nuxtjs.org/guide/modules#build-仅限模块。

模块选项

modules选项用于将 Nuxt 模块添加到项目中。例如，以以下内容为例：

// nuxt.config.js
export default {
  modules: [
    '@nuxtjs/axios',
    '~/modules/example.js'
  ]
}

我们还可以使用此选项直接创建内联模块：

// nuxt.config.js
export default {
  modules: [
    function () {
      //...
    }
  ]
}

Nuxt 模块本质上是 JavaScript 函数，就像插件一样。我们将在第 6 章、编写插件和模块中讨论它们之间的差异。与经常与/plugins/目录一起使用的plugins选项一样，modules选项经常与/modules/目录一起使用。我们将在第 6 章编写插件和模块中经常讨论这个选项。

构建选项

build选项用于自定义网页包配置，以便按照您喜欢的方式构建 Nuxt 应用。例如，您可能希望在项目中全局安装 jQuery，这样您就不必在需要时使用import。您可以使用 webpack 的ProvidePlugin功能自动加载 jQuery，如下所示：

// nuxt.config.js
import webpack from 'webpack'

export default {
  build: {
    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery"
      })
    ]
  }
}

我们将在第 4 章、添加视图、路由和转换、在第 6 章、编写插件和模块、和第 14 章、中使用 linter、格式化器和部署命令再次使用此build选项。

For more details and examples of things that you can do with this option for your Nuxt app, visit https://nuxtjs.org/api/configuration-build. For more information about webpack's ProvidePlugin function, visit https://webpack.js.org/plugins/provide-plugin/. If you are new to webpack, we encourage you to visit and learn about it from https://webpack.js.org/guides/.

以下各节概述了一些附加选项，您可以使用这些选项进一步更具体地自定义 Nuxt 应用。让我们探讨其中一些对您的项目有用的方法。其中一些在本书中经常使用。那么，让我们开始吧！

开发选项

dev选项用于定义应用的development或production模式。它不会添加到 Nuxt 配置文件中，但您可以在需要时手动添加它。它只接受布尔类型，默认设置为true。总是通过nuxt命令强制为true，并且总是通过nuxt build、nuxt start和nuxt generate命令强制为false。

因此，从技术上讲，您不能自定义它，但您可以在 Nuxt 模块中使用此选项，如下所示：

// modules/sample.js
export default function (moduleOptions) {
  console.log(this.options.dev)
}

您将获得true或false，具体取决于您使用的 Nuxt 命令。我们将在第 6 章、编写插件和模块中介绍此模块。或者，在服务器端框架中将 Nuxt 作为包导入时，也可以使用此选项，如下所示：

// server/index.js
import { Nuxt, Builder } from 'nuxt'
import config from './nuxt.config.js'

const nuxt = new Nuxt(config)

if (nuxt.options.dev) {
  new Builder(nuxt).build()
}

当dev选项为true时，运行new Builder(nuxt).build()行。我们将在第 8 章中讨论服务器端框架，添加了一个服务器端框架。

You can find an example app for this option in /chapter-2/configuration/dev/ in our GitHub repository.

rootDir 选项

rootDir选项用于定义 Nuxt 应用的工作区。例如，假设您的项目位于以下位置：

/var/www/html/my-project/

然后，您的项目的rootDir选项的默认值为/var/www/html/my-project/。但是，您可以使用package.json文件中的 Nuxt 命令进行更改，如下所示：

// my-project/package.json
{
  "scripts": {
    "dev": "nuxt ./app/"
  }
}

现在，你的 Nuxt 应用的工作区在/var/www/html/my-project/app/中，你的应用结构如下：

-| my-project/
---| node_modules/
---| app/
------| nuxt.config.js
------| pages/
------| components/
------| ...
---| package.json

注意，现在，Nuxt 配置文件必须放在/app/目录中。我们将在第 14 章中介绍 Nuxt 命令，使用 linter、格式化器和部署命令。

You can find an example app for this option in /chapter-2/configuration/rooDir/ in our GitHub repository.

srcDir 选项

srcDir选项用于定义 Nuxt 应用的源目录。srcDir的默认值为rootDir的值。您可以按如下方式进行更改：

// nuxt.config.js
export default {
  srcDir: 'src/'
}

现在，您的应用结构如下所示：

-| my-project/
---| node_modules/
---| src/
------| pages/
------| components/
------| ...
---| nuxt.config.js
---| package.json

请注意，Nuxt 配置文件位于/src/目录之外。

You can find an example app for this option in /chapter-2/configuration/srcDir/ in our GitHub repository.

服务器选项

server选项用于配置 Nuxt 应用的服务器连接变量。它具有以下默认服务器连接详细信息：

export default {
  server: {
    port: 3000,
    host: 'localhost',
    socket: undefined,
    https: false,
    timing: false
  }
}

您可以按如下方式更改它们：

export default {
  server: {
    port: 8080,
    host: '0.0.0.0'
  }
}

现在，您的应用正在0.0.0.0:8080上运行。

You can find an example app for this option in /chapter-2/configuration/server/ in our GitHub repository.

环境选项

env选项用于为 Nuxt 应用的客户端和服务器端设置环境变量。此选项的默认值为空对象{}。当您在项目中使用axios时，此选项非常有用。

以以下为例：

// nuxt.config.js
export default {
  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:3000'
  }
}

然后，您可以在axios插件中设置env属性，如下所示：

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

export default axios.create({
  baseURL: process.env.baseUrl
})

现在，将baseURL选项设置为localhost:3000，或者定义为BASE_URL的任何内容。我们可以在package.json中设置BASE_URL，如下：

// package.json
"scripts": {
  "start": "cross-env BASE_URL=https://your-domain-name.com nuxt start"
}

您需要安装cross-env才能在 Windows 上使用上述示例：

$ npm i cross-env --save-dev

我们将在第 6 章中讨论插件，编写插件和模块。在创建跨域应用时，我们将在本书中经常使用此env选项。

You can find an example app for this option in /chapter-2/configuration/env/ in our GitHub repository.

路由选项

router选项用于覆盖 Vue 路由上的默认 Nuxt 配置。默认的 Vue 路由配置如下所示：

{
  mode: 'history',
  base: '/',
  routes: [],
  routeNameSplitter: '-',
  middleware: [],
  linkActiveClass: 'nuxt-link-active',
  linkExactActiveClass: 'nuxt-link-exact-active',
  linkPrefetchedClass: false,
  extendRoutes: null,
  scrollBehavior: null,
  parseQuery: false,
  stringifyQuery: false,
  fallback: false,
  prefetchLinks: true
}

您可以更改此配置，如下所示：

// nuxt.config.js
export default {
  router: {
    base: '/app/'
  }
}

现在，您的应用正在localhost:3000/app/上运行。

For more information about this property and the rest of its configuration, visit https://nuxtjs.org/api/configuration-router.

You can find an example app for this option in /chapter-2/configuration/router/ in our GitHub repository.

dir 选项

dir选项用于在我们的 Nuxt 应用中定义自定义目录。默认目录如下所示：

{
  assets: 'assets',
  layouts: 'layouts',
  middleware: 'middleware',
  pages: 'pages',
  static: 'static',
  store: 'store'
}

您可以按如下方式更改它们：

// nuxt.config.js
export default {
  dir: {
    assets: 'nuxt-assets',
    layouts: 'nuxt-layouts',
    middleware: 'nuxt-middleware',
    pages: 'nuxt-pages',
    static: 'nuxt-static',
    store: 'nuxt-store'
  }
}

现在，您可以按如下方式使用前面的自定义目录：

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

You can find an example app for this option in /chapter-2/configuration/dir/ in our GitHub repository.

加载选项

loading选项用于自定义 Nuxt 应用中的默认加载组件。如果您不想使用此默认加载组件，可以将其设置为false，如下所示：

// nuxt.config.js
export default {
  loading: false
}

我们将在第 4 章中更详细地介绍此选项，添加视图、路线和过渡。

pageTransition 和 layoutTransition 选项

pageTransition和layoutTransition选项用于自定义 Nuxt 应用中页面和布局转换的默认属性。页面转换的默认属性设置如下：

{
  name: 'page',
  mode: 'out-in',
  appear: false,
  appearClass: 'appear',
  appearActiveClass: 'appear-active',
  appearToClass: 'appear-to'
}

布局转换的默认属性设置如下：

{
  name: 'layout',
  mode: 'out-in'
}

您可以按如下方式更改它们：

// nuxt.config.js
export default {
  pageTransition: {
    name: 'fade'
  },
  layoutTransition: {
    name: 'fade-layout'
  }
}

我们将在第 4 章中更详细地介绍这些选项，添加视图、路线和过渡。

生成选项

generate选项用于告诉 Nuxt 如何为静态 web 应用生成动态路由。动态路由是通过在 Nuxt 中使用下划线创建的路由。我们将在第 4 章中介绍这种类型的路线，添加视图、路线和过渡。如果我们想将我们的 Nuxt 应用导出为静态 web 应用或 SPA，而不是将 Nuxt 作为通用应用（SSR），则我们使用带有动态路由的generate选项，Nuxt 爬虫无法自动检测到。例如，如果 scrawler 无法检测到以下动态路由（分页），则您的应用中可能有这些动态路由：

/posts/pages/1
/posts/pages/2
/posts/pages/3

然后，您可以使用此generate选项为您生成每个路由的内容并将其转换为 HTML 文件，如下所示：

// nuxt.config.js
export default {
  generate: {
    routes: [
      '/posts/pages/1',
      '/posts/pages/2',
      '/posts/pages/3'
    ]
  }
}

我们将在第 15 章、创建 Nuxt SPA和第 18 章以及创建带有 CMS 和 GraphQL的 Nuxt 应用中，向您展示如何使用此选项生成路由。

For more information and more advanced usage of this generate option, please visit https://nuxtjs.org/api/configuration-generate.

在接下来的章节中，我们将介绍并发现其他配置选项。但是，这些是您现在应该了解的基本自定义配置选项。现在，让我们在下一个主题中进一步探讨 Web 包的资产服务。

理解资产服务

Nuxt 使用vue-loader、file-loader和url-loader网页包加载器为应用中的资产提供服务。首先，Nuxt 将使用vue-loader将<template>和<style>块与css-loader和vue-template-compiler一起处理，将这些块中的<img src="...">、background-image: URL(...)、CSS@import等元素编译成模块依赖项。以以下为例：

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

<style>
.container {
  background-image: url("~img/sample-2.jpg");
}
</style>

前面的<template>和<style>块中的图像元素和资产将被编译并转换为以下代码和模块依赖项：

createElement('img', { attrs: { src: require(img/sample-1.jpg') }})
require(img/sample-2.jpg')

Note that from Nuxt 2.0, the ~/ alias will not be correctly resolved in your styles, so use ~assets or the @/ alias instead.

在前面的编译和转换之后，Nuxt 将使用file-loader将import/require模块依赖项解析为 URL，并将资产发送（复制和粘贴）到输出目录中，或者，如果资产小于 1KB，则使用url-loader将资产转换为 Base64 URI。但是，如果资产大于 1 KB 阈值，它将回落到file-loader。这意味着低于 1KB 的任何文件都将被url-loader内联为 Base64 数据 URL，如下所示：

<img src="data:img/png;base64,iVBO...">

这可以让您更好地控制从应用到服务器的 HTTP 请求数量。内联资产花费更少的 HTTP 请求，而任何超过 1KB 的文件都将被复制并粘贴到输出目标中，并使用版本哈希进行命名，以便更好地缓存。例如，前面的<template>和<style>块中的图像如下（通过npm run build发射）：

img/04983cb.jpg 67.3 KiB [emitted]
img/cc6fc31.jpg 85.8 KiB [emitted]

您将在浏览器的正面看到该图像，如下所示：

<div class="links">
  <img src="/_nuimg/04983cb.jpg">
</div>

以下是这两个网页包加载程序（url-loader和file-loader的默认配置：

[
  {
    test: /\.(png|jpe?g|gif|svg|webp)$/i,
    use: [{
      loader: 'url-loader',
      options: Object.assign(
        this.loaders.imgUrl,
        { name: this.getFileName('img') }
      )
    }]
  },
  {
    test: /\.(woff2?|eot|ttf|otf)(\?.)?$/i,
    use: [{
      loader: 'url-loader',
      options: Object.assign(
        this.loaders.fontUrl,
        { name: this.getFileName('font') }
      )
    }]
  },
  {
    test: /\.(webm|mp4|ogv)$/i,
    use: [{
      loader: 'file-loader',
      options: Object.assign(
        this.loaders.file,
        { name: this.getFileName('video') }
      )
    }]
  }
]

您可以使用网页包配置的build选项自定义此默认配置，就像我们在上一主题中所做的那样。

For more information about file-loader and url-loader, please visit https://webpack.js.org/loaders/file-loader/ and https://webpack.js.org/loaders/url-loader/.

For more information about vue-loader and vue-template-compiler, please visit https://vue-loader.vuejs.org/ and https://www.npmjs.com/package/vue-template-compiler.

如果您是网页新手，请访问https://webpack.js.org/concepts/ 。另外，请访问https://webpack.js.org/guides/asset-management/ 为其资产管理指南。简而言之，webpack 是 JavaScript 应用的静态模块绑定器。它的主要用途是绑定 JavaScript 文件，但也可以用于转换 HTML、CSS、图像和字体等资产。如果您不想像 webpack 为您提供的那样为您的资产提供服务，您也可以使用/static/静态资产目录，正如我们在上一节了解目录结构中提到的那样。然而，使用 webpack 服务资产也有好处。让我们在下一节中了解它们是什么。

Web 包资产与静态资产

使用 webpack 提供资产服务的好处之一是，它可以优化它们的生产，无论它们是图像、字体还是预处理样式（如 Less、Sass 或手写笔）。webpack 可以将 Less、Sass 和手写笔转换为通用 CSS，而静态文件夹只是一个可以放置 webpack 永远不会触及的所有静态资产的地方。在 Nuxt 中，如果您不想在项目中使 img/目录中的 webpack 资产，可以使用/static/`目录。

例如，我们可以使用/static/目录中的静态图像，如下所示：

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

另一个很好的例子是 Nuxt 配置文件中的 favicon 文件：

// nuxt.config.js
export default {
  head: {
    link: [
      { rel: 'icon', type: 'img/x-icon', href: '/favicon.ico' }
    ]
  }
}

请注意，如果您使用~别名链接/static/目录中的资产，webpack将处理这些资产，就像处 img/`目录中的资产一样，如下所示：

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

我们将在第 3 章、添加 UI 框架、第 4 章、添加视图、路由和转换以及第 5 章、添加 Vue 组件中，img/`目录进行大量的资产服务工作，动态地为资产服务。现在，让我们总结一下您在本章学到的知识。

You can find an example app for serving assets and files from these two directories in /chapterimg/ in our GitHub repository.

总结

在本章中，您学习了如何使用create-nuxt-app安装 Nuxt，如何从头开始安装，以及 Nuxt scaffolding 工具安装的默认目录。您还学习了如何使用nuxt.config.js文件定制应用。最后，您了解了资产在 Nuxt 中的工作方式，以及使用 webpack 和/static/文件夹提供资产服务之间的区别。

在即将到来的章节中，您将学习如何安装自定义 UI 框架、库和工具，如 ZURB 基金会、运动 UI、JQuery UI 和应用的更少 CSS。您将编写一些基本代码来设置索引页的样式，并向其中添加一些动画。您还将开始使用我们在本章中刚刚介绍的一些目录，例 img/、/plugins/和/pages/`目录，来开发您的 Nuxt 应用。**

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://moonapi.com/news/12876.html

数据知识

系统公告

开发文档

vue查看更多书籍

《NuxtJS Web 开发实用指南》

vue 二、Nuxt 入门

二、Nuxt 入门

技术要求

安装 Nuxt

使用 CreateNuxt 应用

从头开始

了解目录结构

资产目录

静态目录

页面目录

布局目录

组件目录

插件目录

存储目录

中间件目录

package.json 文件

nuxt.config.js 文件

别名

了解自定义配置

模式选项

目标选项

头选项

css 选项

插件选项

组件选项

buildModules 选项

模块选项

构建选项

开发选项

rootDir 选项

srcDir 选项

服务器选项

环境选项

路由选项

dir 选项

加载选项

pageTransition 和 layoutTransition 选项

生成选项

理解资产服务

Web 包资产与静态资产

总结

留言

联系客服

vue 查看更多书籍