vue 十五、使用 Nuxt 创建 SPA

十五、使用 Nuxt 创建 SPA

在前面的章节中，我们在universal模式下创建了各种 Nuxt 应用。这些是通用服务器端呈现（SSR）应用。这意味着它们是同时在服务器端和客户端运行的应用。Nuxt 为我们开发单页应用（SPA）提供了另一种选择，就像我们可以使用 Vue 和其他 SPA 框架（如 Angular 和 React）一样。在本章中，我们将指导您如何在 Nuxt 中开发、构建和部署 SPA，并了解它与现有传统 SPA 的区别。

在本章中，我们将介绍以下主题：

了解经典水疗和 Nuxt 水疗
安装 Nuxt SPA
开发 Nuxt 水疗中心
部署 Nuxt SPA

让我们开始吧！

了解经典水疗和 Nuxt 水疗

SPA，也称为经典 SPA，是一种在浏览器上加载一次的应用，在应用的整个生命周期内不需要我们重新加载和呈现页面。这与多页应用（MPA）不同，在 MPA 中，每次更改和与服务器的每次数据交换都需要重新提交整个页面，从服务器到浏览器。

在经典/传统 SPA 中，提供给客户机的 HTML 是相对空的。一旦到达客户端，JavaScript 将动态呈现 HTML 和内容。React、Angular 和 Vue 是创建经典水疗中心的热门选择。但是，不要混淆 spa 模式下的 Nuxt 应用（我们称之为Nuxt spa），即使 Nuxt 为您提供了仅使用一行配置开发“spa”的选项，如下所示：

// nuxt.config.js
export default {
  mode: 'spa'
}

Nuxt 的 SPA 模式只是意味着您将失去 Nuxt 和 Node.js 的服务器端功能，正如我们在第 14 章中所了解的，使用 linter、格式化器和部署命令将通用 SSR Nuxt 应用转换为静态生成（预渲染）的 Nuxt 应用。spa 模式 Nuxt 应用也是如此–当您使用上述配置时，您的 spa 模式 Nuxt 应用将成为纯粹的客户端应用。

但是 spa 模式 Nuxt 应用与通过 Vue CLI、React 或 Angular 创建的经典 spa 截然不同。这是因为，在构建应用之后，您（经典）SPA 的页面和路径将在运行时由 JavaScript 动态呈现。另一方面，spa 模式 Nuxt 应用中的页面将在构建时预呈现，并且每个页面中的 HTML 与经典 spa 一样“空”。这就是事情开始变得混乱的地方。让我们来看看下面的例子。假设您的 Vue 应用中有以下页面和路线：

src
├── favicon.ico
├── index.html
├── components
│ ├── about.vue
│ ├── secured.vue
│ └── ...
└── routes
  ├── about.js
  ├── secured.js
  └── ...

您的应用将内置到以下发行版中：

dist
├── favicon.ico
├── index.html
├── css
│ └── ...
└── js
  └── ...

在这里，您可以看到只有index.html、/css/和/js/文件夹内置在/dust/文件夹中。这意味着您的应用的页面和路由将在运行时由 JavaScript 动态呈现。但是，假设您的 spa 模式 Nuxt 应用中有以下页面：

pages
├── about.vue
├── secured.vue
├── ...
└── users
  ├── about.js
  ├── index.vu
  └── _id.vue

您的应用将内置到以下发行版中：

dist
├── index.html
├── favicon.ico
├── about
│ └── index.html
├── secured
│ └── index.html
├── users
│ └── index.html
└── ...

正如你所看到的，你的应用的每个页面和路径都有一个index.html文件，并放在/dust/文件夹中——就像你为通用 SSR Nuxt 应用生成的静态站点一样。因此，在这里，我们可以说您将构建和部署的 spa 模式 Nuxt 应用是一个“静态”spa，而经典 spa 是“动态”的。当然，您仍然可以使用以下部署命令将 spa 模式 Nuxt 应用部署为通用 SSR Nuxt 应用。这将使其在运行时“动态”：

$ npm run build
$ npm run start

但是在 Node.js 主机上部署 Nuxt SPA 应用可能会有些过火，因为您一定有很好的理由选择 SPA 模式的 Nuxt 应用，并且不想在 SPA 中使用 Node.js 主机。因此，将Nuxt SPA 预渲染为静态生成的应用（我们称之为静态生成的 Nuxt SPA可能更合理。您可以使用nuxt export命令轻松地预渲染 Nuxt SPA，就像通用 SSR Nuxt 应用一样。

这就是本章的全部内容：在 spa 模式下开发 Nuxt 应用，并在将其部署到静态托管服务器（如 GitHub 页面）之前生成所需的静态 HTML 文件。因此，让我们从安装和设置环境开始。

安装 Nuxt SPA

安装 Nuxt SPA 与使用create-nuxt-app脚手架工具安装 Nuxt universal SSR 相同。让我们开始：

使用 Nuxt 脚手架工具通过终端安装 Nuxt 项目：

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

回答出现的问题，并在询问呈现模式时选择单页应用选项：

? Project name
? Project description
//...
? Rendering mode:  
  Universal (SSR / SSG)  
> Single Page App

安装完成后，如果您检查项目根目录中的 Nuxt config 文件，您应该会看到mode选项在安装过程中被配置为 SPA：

// nuxt.config.js
export default {
  mode: 'spa'
}

在终端中启动 Nuxt 开发模式：

$ npm run dev

您应该看到只有客户端的代码是在您的终端上编译的：

✓ Client
  Compiled successfully in 1.76s

在universal模式下，您将不再看到 Nuxt 应用在服务器端编译的任何代码：

✓ Client
  Compiled successfully in 2.75s

✓ Server
  Compiled successfully in 2.56s

如您所见，在 Nuxt 中启动 spa 模式环境相当容易。您也可以手动设置此 spa 模式，只需将spa值添加到 Nuxt 配置文件中的mode选项即可。现在，让我们开发一个 Nuxt 水疗中心。

**# 开发 Nuxt 水疗中心

在开发 Nuxt SPA 时需要记住的一件重要事情是，给定给asyncData和fetch方法的 Nuxt 上下文将丢失它们的req和res对象，因为这些对象是 Node.js HTTP 对象。在本节中，我们将创建一个简单的用户登录身份验证，您应该已经熟悉了。然而，这一次，我们将在 Nuxt 水疗中心成功。我们还将创建一个页面，列出使用动态路由的用户，正如我们在第 4 章中所了解的，添加视图、路由和转换。让我们开始：

准备以下.vue文件或仅复制上一章，如下所示：

-| pages/
---| index.vue
---| about.vue
---| login.vue
---| secret.vue
---| users/
-----| index.vue
-----| _id.vue

使用存储状态、突变、操作和索引文件准备 Vuex 存储，以处理用户登录身份验证，如下所示：

-| store/
---| index.js
---| state.js
---| mutations.js
---| actions.js

正如我们在上一章中提到的，当我们静态生成 Nuxt Universal SSR app时，我们将丢失商店中的nuxtServerInit操作，因此在 Nuxt SPA 中也是如此–我们在客户端不会有此服务器操作。因此，我们需要一个客户端nuxtServerInit动作来模拟服务器端nuxtServerInit动作。接下来我们将学习如何进行此操作。

创建客户端 nuxtServerInit 操作

这些文件中的方法和属性与我们在过去的练习中的方法和属性相同，除了nuxtServerInit操作：

// store/index.js
const cookie = process.server ? require('cookie') : undefined

export const actions = {
  nuxtServerInit ({ commit }, { req }) {
    if (
      req 
      && req.headers 
      && req.headers.cookie 
      && req.headers.cookie.indexOf('auth') > -1
    ) {
      let auth = cookie.parse(req.headers.cookie)['auth']
      commit('setAuth', JSON.parse(auth))
    }
  }
}

Nuxt SPA 中没有涉及任何服务器，因为 Nuxt 只从服务器端调用了nuxtServerInit。因此，我们需要一个解决方案。我们可以使用 Node.jsjs-cookie模块在用户登录时将经过身份验证的数据存储在客户端，这使得它成为替换服务器端 cookie 的最佳候选。让我们学习如何实现这一点：

通过 npm 安装 Node.jsjs-cookie模块：

$ npm i js-cookie

在 store actions 中创建一个名为nuxtClientInit（如果愿意，您可以选择任何您喜欢的名称）的自定义方法，以检索 cookie 中的用户数据。然后，当用户刷新浏览器时，将其设置回指定情况下的所需状态：

// store/index.js
import cookies from 'js-cookie'

export const actions = {
  nuxtClientInit ({ commit }, ctx) {
    let auth = cookies.get('auth')
    if (auth) {
      commit('setAuth', JSON.parse(auth))
    }
  }
}

您可能还记得，刷新页面时，服务器端总是调用 storenuxtServerInit操作。这种nuxtClientInit方法也是如此；每次刷新页面时，都应该在客户端调用它。但是，它不会自动调用，所以我们可以在 Vue 根启动之前，每次调用它时都使用插件。****

**3. 在/plugins/目录中创建一个名为nuxt-client-init.js的插件，通过商店中的dispatch方法调用nuxtClientInit方法：

// plugins/nuxt-client-init.js
export default async (ctx) => {
  await ctx.store.dispatch('nuxtClientInit', ctx)
}

请记住，我们可以在启动 Vue 根目录之前访问插件中的 Nuxt 上下文。存储被添加到 Nuxt 上下文中，因此，我们可以访问存储操作，nuxtClientInit方法是我们感兴趣的。

现在，将此插件添加到 Nuxt 配置文件，以便安装该插件：

// nuxt.config.js
export default {
  plugins: [
    { src: '~/plugins/nuxt-client-init.js', mode: 'client' }
  ]
}

现在，每次刷新浏览器时，都会调用nuxtClientInit方法，并且在启动 Vue 根目录之前，该方法将重新填充状态。正如你所看到的，当我们失去 Nuxt 作为一个通用 JavasScript 应用的全部功能时，模仿nuxtClientInit动作并不容易。但是如果你必须去 Nuxt SPA，那么这个问题可以通过我们刚刚创建的nuxtClientInit方法来解决。

接下来，我们将使用 Nuxt 插件创建一些自定义 Axios 实例。这应该是你已经非常熟悉的东西。但是，能够创建自定义 Axios 实例是很有用的，因为在需要时，您可以随时返回到普通版本的 Axios，即使我们还有Nuxt Axios 模块。所以，让我们继续前进！

使用插件创建多个自定义 Axios 实例

在本 spa 模式练习中，我们需要两个 Axios 实例对以下地址进行 API 调用：

localhost:4000用于用户身份验证
jsonplaceholder.typicode.com用于抓取用户

我们将使用香草 Axios（https://github.com/axios/axios ），因为它使我们能够灵活地创建具有一些自定义配置的多个 Axios 实例。让我们开始：

通过 npm 安装香草axios：

$ npm i axios

在需要的页面上创建一个axios实例：

// pages/users/index.vue
const instance = axios.create({
  baseURL: '<api-address>',
  timeout: <value>,
  headers: { '<x-custom-header>': '<value>' }
})

但是直接在页面上创建axios实例并不理想。理想情况下，我们应该能够提取这个实例并在任何地方重用它。通过 Nuxt 插件，我们可以创建 Axios 提取实例。我们可以遵循两种方法来创建它们。我们将在下一节中介绍第一种方法。

在 Nuxt 配置文件中安装自定义 Axios 插件

在前面的章节中，您了解到我们可以使用inject方法创建插件，并通过 Nuxtconfig文件安装插件。除了使用inject方法外，我们还可以将插件直接注入 Nuxt 上下文。让我们来看看如何做到这一点：

在/plugins/目录下创建axios-typicode.js文件，导入香草axios并创建实例，如下所示：

// 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)
}

如您所见，创建axios实例后，我们通过 Nuxt 上下文（ctx注入插件，使用inject方法，然后导出插件。

在 Nuxt 配置文件中安装此插件：

// nuxt.config.js
export default {
  plugins: [
    { src: '~/plugins/axios-typicode.js', mode: 'client' }
  ]
}

您必须将mode选项设置为client，因为我们只需要在客户端使用它。

你可以从任何你喜欢的地方访问这个插件。在本例中，我们希望在用户索引页面上使用此插件获取用户列表：

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

在这个插件中，我们将自定义的axios实例直接作为$axiosTypicode注入 Nuxt 上下文（ctx，这样我们就可以使用 JavaScript 解构赋值语法直接调用它，将其解包为$axiosTypicode。我们也使用inject方法注入插件，所以我们也使用ctx.app方法调用这个插件，如下所示：

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

创建自定义 Axios 插件不是很难吗？如果您通过 Nuxt 配置文件安装插件，这意味着它是一个全局 JavaScript 函数，您可以从任何地方访问它。但是，如果您不想将其作为全局插件安装，可以在 Nuxt 配置文件中跳过安装。这就引出了创建 Nuxt 插件的第二种方法。

手动导入自定义 Axios 插件

创建自定义 Axios 实例的另一种方法根本不涉及 Nuxt 配置。我们可以将自定义实例作为常规 JavaScript 函数导出，然后将其直接导入到需要的页面中。让我们来看看如何做到这一点：

在/plugins/目录下创建axios-api.js文件，导入香草axios并创建实例，如下所示：

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

export default axios.create({
  baseURL: 'http://localhost:4000',
  withCredentials: true
})

如你所见，我们不再使用inject方法；相反，我们直接导出实例。

现在，我们可以在需要时手动导入它。在本例中，我们在login动作方法中需要它，如下所示：

// store/actions.js
import axios from '~/plugins/axios-api'

async login({ commit }, { username, password }) {
  const { data } = await axios.post('/public/users/login', { 
   username, password })
  //...
}

如您所见，我们必须手动导入此插件，因为它没有插入 Nuxt 生命周期。

导入并在token中间件的axios实例上设置Authorization头，如下：

// middleware/token.js
import axios from '~/plugins/axios-api'

export default async ({ store, error }) => {
  //...
  axios.defaults.headers.common['Authorization'] = Bearer: 
  ${store.state.auth.token}
}

尽管我们在使用此方法时必须手动导入插件，但至少我们已将以下设置提取到一个插件中，以便在需要时重用：

{
  baseURL: 'http://localhost:4000',
  withCredentials: true
}

You can find the code for the Nuxt SPA, along with these two methods, in /chapter-15/frontend/ in this book's GitHub repository.

创建、测试和整理所有代码和文件后，就可以部署 Nuxt SPA 了。那么，让我们开始吧！

部署 Nuxt SPA

如果我们有 Node.js 运行时服务器，我们可以部署 Nuxt SPA，就像部署 universal SSR Nuxt 应用一样。如果我们不这样做，那么我们只能将 SPA 作为静态站点部署到静态托管服务器，例如GitHub Pages。您可以按如下方式部署静态生成的 Nuxt SPA：

确保已在 Nuxt 配置文件的mode选项中将值设置为spa：

// nuxt.config.js
export default {
  mode: 'spa'
}

确保在package.json文件中也有以下运行脚本：

{
  "scripts": {
    "generate": "nuxt generate"
  }
}

运行npm run generate，就像运行 universal SSR Nuxt 应用一样。您应该在终端中看到以下输出：

ℹ Generating output directory: dist/
ℹ Generating pages 
✓ Generated /about
✓ Generated /login
✓ Generated /secret
✓ Generated /users
✓ Generated /

在前面的输出中，如果您导航到项目中的/dist/文件夹，您将在根目录中找到一个index.html文件，以及每个子文件夹中的index.html文件，以及路由名称。但是，在生成的动态路由中，您将找不到任何这些页面，例如/users/1。这是因为与通用模式相反，动态路由不是在 spa 模式下生成的。

此外，如果你打开/dist/文件夹中的index.html文件，你会发现所有index.html文件都完全相同——只是一些“空”HTML 元素，类似于经典的 SPA。此外，每个index.html文件不包含其单独的元信息，仅包含nuxt.config.js中的公共元信息。这些页面的元信息将在运行时水合（填充和更新）。因此，对于一个“静态”水疗来说，这似乎是违反直觉和“半生不熟”的。除此之外，不会生成静态有效载荷。这意味着，如果您在浏览器上导航到localhost:3000/users，您将注意到该页面仍在从请求其数据 https://jsonplaceholder.typicode.com/users 而不是像 universal SSR Nuxt 应用那样从有效负载获取数据。这是因为 Nuxt 不会在 spa 模式下生成静态内容，即使您已在 Nuxt 配置文件中为目标属性设置了static。为了克服这些问题，我们可以从通用模式生成所需的静态内容。

Nuxt 配置文件中的mode选项将spa更改为universal：

// nuxt.config.js
export default {
  mode: 'universal'
}

运行npm run generate以便 Nuxt 对 API 进行 REST API 调用，以检索用户并将其内容导出到本地静态有效负载。您将看到以下输出：

ℹ Generating output directory: dist/
ℹ Generating pages with full static mode 
✓ Generated /about
✓ Generated /secret
✓ Generated /login
✓ Generated /users
✓ Generated /users/1
✓ Generated /users/2
...
...
✓ Generated /users/10
✓ Generated /

请注意，在前面的输出中没有生成动态路由。如果您再次导航到/dist/文件夹，您应该会看到/users/文件夹现在包含多个文件夹，每个文件夹都有自己的用户 ID。每个文件夹都包含一个index.html文件，其中包含该特定用户的内容。现在，每个index.html文件都包含它自己的元信息和/dist/_nuxt/static/中生成的有效负载。

Nuxt 配置文件中的mode选项将universal改回spa：

// nuxt.config.js
export default {
  mode: 'spa'
}

现在，在终端上运行npm run build。您应该看到以下输出：

Hash: c36ee9714ee9427ac1ff 
Version: webpack 4.43.0 
Time: 5540ms 
Built at: 11/07/2020 07:58:09 
                         Asset       Size  Chunks                         Chunk Names 
../server/client.manifest.json   9.31 KiB          [emitted]               
                      LICENSES  617 bytes          [emitted]               
                app.922dbd1.js     57 KiB       0  [emitted] 
                [immutable] app 
        commons/app.7236c86.js    182 KiB       1  [emitted] 
        [immutable] commons/app 
        pages/about.75fcd06.js  667 bytes       2  [emitted] 
        [immutable] pages/about 
        pages/index.76b5c20.js  784 bytes       3  [emitted] 
        [immutable] pages/index 
        pages/login.09e509e.js   3.14 KiB       4  [emitted]
        [immutable] pages/login 
      pages/secured.f086299.js   1.36 KiB       5  [emitted] 
       [immutable] pages/secured 
    pages/users/_id.e1c568c.js   1.69 KiB       6  [emitted] 
      [immutable] pages/users/_id 
  pages/users/index.b3e7aa8.js    1.5 KiB       7  [emitted]
    [immutable] pages/users/index 
            runtime.266b4bf.js   2.47 KiB       8  [emitted] 
            [immutable] runtime 
+ 1 hidden asset 
Entrypoint app = runtime.266b4bf.js commons/app.7236c86.js app.922dbd1.js 
ℹ Ready to run nuxt generate

忽略Ready to run nuxt generate消息。相反，首先在终端上使用nuxt start命令从/dist/目录测试生产静态 SPA：

$ npm run start

您应该获得以下输出：

Nuxt.js @ v2.14.0

> Environment: production
> Rendering: client-side
> Target: static
Listening: http://localhost:3000/

ℹ Serving static application from dist/

现在，像localhost:3000/users这样的路由将不再从请求数据 https://jsonplaceholder.typicode.com 。相反，他们将从/static/文件夹中的有效负载获取数据，该文件夹位于/dist/文件夹中。

最后，只需将这个/dist/目录部署到您的静态托管服务器。

如果您正在寻找一个免费的静态托管服务器，请考虑使用 GITHUB 页面。使用此选项，您可以使用以下格式的网站域名：

<username>.github.io/<app-name>

GitHub 还允许您使用自定义域名服务您的站点，而不是使用他们的域名。有关更多信息，请遵循 GitHub 帮助站点的指南：https://help.github.com/en/github/working-with-github-pages/configuring-a-custom-domain-for-your-github-pages-site 。然而，在本书中，我们将向您展示如何在 GitHub 的github.io域名上为您的站点提供服务。我们将在下一节学习如何做到这一点。

You can find the code for this section in /chapter-15/frontend/ in this book's GitHub repository.

部署到 GitHub 页面

GitHub Pages 是 GitHub 提供的静态站点托管服务，它托管和发布 GitHub 存储库中的静态文件（仅限 HTML、CSS 和 JavaScript）。只要您在 GitHub 上有一个用户帐户，并且为您的站点创建了一个 GitHub 存储库，您就可以在 GitHub 页面中托管静态站点。

Please visit https://guides.github.com/features/pages/ to find out how to get started with GitHub Pages.

您只需转到 GitHub 存储库中的设置部分，然后向下滚动到GitHub 页面部分。然后，您需要点击选择主题按钮，开始创建静态站点的过程。

将 Nuxt SPA 的静态版本部署到 GitHub 页面相当容易–您只需要对 Nuxt 配置文件进行一些小的配置更改，然后使用git push命令将其上载到 GitHub 存储库。当您创建 GitHub 存储库时，如果您正在创建 GitHub 页面，默认情况下，静态页面的 URL 将以以下格式提供：

<username>.github.io/<repository-name>

因此，您需要将此<repository-name>添加到 Nuxt 配置文件中的router基本选项中，如下所示：

export default {
  router: {
    base: '/<repository-name>/'
  }
}

但在开发 Nuxt 应用时，更改基本名称将干扰localhost:3000。让我们了解如何解决此问题：

在 Nuxt 配置文件中为开发和生产 GitHub 页面创建一个if条件，如下所示：

// nuxt.config.js
const routerBase = process.env.DEPLOY_ENV === 'GH_PAGES' ? {
  router: {
    base: '/<repository-name>/'
  }
} : {}

如果DEPLOY_ENV选项在流程环境中有GH_PAGES，则此条件只是将/<repository-name>/添加到router选项的base键上。

使用spread运算符将此routerBase常量添加到配置文件中的 Nuxt 配置中：

// nuxt.config.js
export default {
  ...routerBase
}

在package.json文件中设置DEPLOY_ENV='GH_PAGES'脚本：

// package.json
"scripts": {
  "build:gh-pages": "DEPLOY_ENV=GH_PAGES nuxt build",   
  "generate:gh-pages": "DEPLOY_ENV=GH_PAGES nuxt generate"
}

使用这两个 npm 脚本中的一个，在运行npm run dev进行开发时，/<repository-name>/的值不会被注入到 Nuxt 配置中，并且不会干扰开发过程。

将 Nuxt 配置文件中的mode选项的spa更改为universal，就像上一节中的步骤 4一样，使用nuxt generate命令生成静态有效载荷和页面：

$ npm run generate:gh-pages

Nuxt 配置文件中的mode选项将universal改回spa，与上节步骤 6一样，使用nuxt build命令构建 SPA：

$ npm run build:gh-pages

通过 GitHub 存储库将 Nuxt 生成的/dist/文件夹中的文件推送到 GitHub 页面。

这就是将 Nuxt SPA 部署到 GitHub 页面的方法。但是，在将静态站点推送到 GitHub 页面时，请确保在/dist/文件夹中包含一个empty .nojekyll文件。

Jekyll 是一个简单的、支持博客的静态站点生成器。它将纯文本转换为静态网站和博客。GitHub Pages 由 Jekyll 幕后支持，默认情况下，它不会构建任何以点“.”开头、下划线“u”或以波浪号“~”结尾的文件或目录。在 GitHub 页面中为静态站点提供服务时，这将是一个问题，因为在构建 Nuxt SPA 时，/dist/文件夹中也会生成一个名为_nuxt的子文件夹；此/_nuxt/文件夹将被 Jekyll 忽略。为了解决这个问题，我们需要在/dist/文件夹中包含一个空的.nojekyll文件来关闭 Jekyll。该文件是在为 Nuxt SPA 构建静态页面时生成的，因此请确保将其推送到 GitHub 存储库中。

干得好–您已经完成了本书的另一个简短章节！如果您想在 Nuxt 中构建 SPA 而不是使用 Vue 或其他框架（如 Angular 和 React），Nuxt SPA 是一个很好的选择。但是，如果您提供需要即时或实时发布的 web 服务（如社交媒体网站），则静态生成的 Nuxt SPA 可能不是一个好选择。这一切都取决于您的业务性质，以及您是想要充分利用 Nuxt、universal SSR 还是 Nuxt-Nuxt SPA 的客户端版本。接下来，我们将总结本章学到的内容。

总结

在本章中，我们学习了如何在 Nuxt 中开发、构建和部署 SPA，并了解它与经典 SPA 的不同之处。我们还了解到 Nuxt SPA 是开发应用的一个不错的选择，但开发 Nuxt SPA 意味着我们将失去nuxtServerInit操作和req和resHTTP 对象。但是，我们可以使用客户端js-cookies（或localStorage)和 Nuxt 插件来模拟nuxtServerInit动作。最后，我们学习了如何在 GitHub 页面上发布和服务静态生成的 Nuxt SPA。

到目前为止，在本书中，我们只在所有 Nuxt 应用和 API 中使用 JavaScript。然而，在接下来的章节中，我们将探讨如何进一步使用 Nuxt，以便使用另一种语言PHP。我们将引导您了解 HTTP 消息和 PHP 标准，使用 PHP 数据库框架编写 CRUD 操作，并为 Nuxt 应用提供 PHP API。读下去！****

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

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

vue 查看更多书籍

《NuxtJS Web 开发实用指南》

分类

最近更新

vue 十五、使用 Nuxt 创建 SPA

十五、使用 Nuxt 创建 SPA

了解经典水疗和 Nuxt 水疗

安装 Nuxt SPA

创建客户端 nuxtServerInit 操作

使用插件创建多个自定义 Axios 实例

在 Nuxt 配置文件中安装自定义 Axios 插件

手动导入自定义 Axios 插件

部署 Nuxt SPA

部署到 GitHub 页面

总结

留言

联系客服

数据知识

系统公告

开发文档

vue查看更多书籍

《NuxtJS Web 开发实用指南》

vue 十五、使用 Nuxt 创建 SPA

十五、使用 Nuxt 创建 SPA

了解经典水疗和 Nuxt 水疗

安装 Nuxt SPA

创建客户端 nuxtServerInit 操作

使用插件创建多个自定义 Axios 实例

在 Nuxt 配置文件中安装自定义 Axios 插件

手动导入自定义 Axios 插件

部署 Nuxt SPA

部署到 GitHub 页面

总结

留言

联系客服

vue 查看更多书籍