Nuxt.js 入门指南

在本文中，我们将了解 Nuxt 框架，并讨论如何在阿里云 ECS 服务器上进行设置。

介绍

Nuxt.js是一个用于创建 Vue.js 应用的通用框架。通用框架的目标是使其足够灵活，既可以用作服务器端渲染应用，也可以用作静态网站，还可以用作单页应用。Nuxt.js
的主要关注点在于 UI 渲染，同时抽象化了客户端/服务器的部署。在本文中，我们将了解 Nuxt 框架，包括如何配置它，以及它在构建 Vue 应用中的结构。

为什么要使用 Nuxt？

Nuxt.js 内置了许多不容忽视的功能，所有这些功能都开箱即用，可供您在构建 Web 应用程序时使用。部分功能包括：

• 自动代码分割
• Vue 驱动
• 静态文件渲染
• 热模块更换
• 预处理器：Sass、Stylus、Less
• 服务器端渲染
• HTTP/2 支持

搭建 Nuxt 应用的脚手架

Nuxt.js 入门非常简单。Nuxt 团队创建了一个名为 `nuxt-starter` 的脚手架工具，可以让你在几秒钟内创建一个 Nuxt 应用create-nuxt-app。你可以使用 `nuxt-starter`npx或 ` yarnnuxt-starter`，通过以下命令创建 Nuxt 项目。

npx create-nuxt-app <project-name> or 
yarn create nuxt-app <project-name>

使用该create-nuxt-app命令时，您可以选择集成服务器端框架、UI框架、测试框架以及其他所需工具（例如PWA和代码检查工具），系统会自动为您生成和配置。但本教程仅提供最基本的功能，因此我选择禁用部分功能。

运行项目

安装完依赖项后，即可使用以下命令运行项目：

yarn run dev

还有其他命令可用于构建应用程序、检查整个项目或使用该generate脚本生成静态网站。

运行启动应用程序的命令后，如果我们访问http://localhost:3000，现在应该可以看到我们的应用程序在屏幕上运行，如下图所示。

文件夹结构

Nuxt 应用程序的文件夹结构由以下文件和文件夹目录组成，我们将逐一查看它们，以确定它们代表什么。

资源：此文件夹中包含的文件包括 Nuxt 应用程序将使用的图像、字体和样式表等资源。

组件：该components目录包含可重用的 Vue.js 组件，这些组件将用于构建应用程序，例如（输入框、按钮和卡片）等。

布局：此layouts目录包含您的应用程序布局。布局用于更改页面的外观（例如，通过包含首页）。此layouts目录定义了应用程序可以使用的所有不同布局。这里非常适合添加应用程序中常用的全局组件，例如页眉和页脚。您应该将那些不想在每个新页面中重复定义的组件包含在此文件中。

中间件：此middleware目录包含您的应用程序中间件。中间件允许您定义自定义函数，这些函数可以在渲染页面或页面组之前运行。

页面：此pages目录包含您的应用程序视图和路由。框架会读取.vue此目录中的所有文件并创建应用程序路由。例如，如果您有一个视图index.vue，它将成为/路由，而路由about.vue将成为/about路由。

插件：此plugins目录包含您希望在实例化根 Vue.js 应用程序之前运行的 JavaScript 插件。您可以在此处全局注册组件，并注入函数或常量。

静态目录：该static目录与静态目录类似assets，但它直接映射到服务器根目录（/static/robots.txt可通过访问http://localhost:3000/robots.txt），并且包含可能不会更改的文件（例如网站图标）。

Store：此store目录存放您的Vuex Store文件。Vuex Store 已随 Nuxt.js 内置，但默认情况下处于禁用状态。index.js在此目录中创建文件即可启用 Store。

nuxt.config.js：此文件包含 Nuxt.js 的自定义配置。请注意，如果不添加额外的配置，则不能重命名此文件。

package.json：所有依赖项和脚本都存放在此文件中，该文件不能重命名。

路由

Nuxt.js 的路由工作方式是，它会根据目录下的文件树自动生成vue-router配置。它会分析目录结构，并根据该结构自动生成路由配置。Nuxt 和 vue-router 会在底层完成所有工作。 以下是一个目录结构的示例，文件树将与下面的结构完全相同。.vuepages

pages/
--|index.vue
--|product.vue
 --|index.vue
 --|one.vue 

这将生成如下类型的路由：

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'product',
      path: '/product',
      component: 'pages/product/index.vue'
    },
    {
      name: 'product-one',
      path: '/product/one',
      component: 'pages/product/one.vue'
    }
  ]
}

动态路线

您可能想知道，当处理动态路由时，这种方法该如何运作。要定义带有参数的动态路由，您需要定义一个以下划线开头的.vue文件或目录，我们来看一个例子。

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

这将生成以下路由：

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'users-id',
      path: '/users/:id?',
      component: 'pages/users/_id.vue'
    },
    {
      name: 'slug',
      path: '/:slug',
      component: 'pages/_slug/index.vue'
    },
    {
      name: 'slug-comments',
      path: '/:slug/comments',
      component: 'pages/_slug/comments.vue'
    }
  ]
}

嵌套路由

Nuxt.js 允许你使用 vue-router 的子路由来创建嵌套路由。
要定义嵌套路由的父组件，你需要创建一个与包含子视图的目录同名的 Vue 文件。

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

将成为：

router: {
  routes: [
    {
      path: '/products',
      component: 'pages/products.vue',
      children: [
        {
          path: '',
          component: 'pages/products/index.vue',
          name: 'products'
        },
        {
          path: ':id',
          component: 'pages/products/_id.vue',
          name: 'products-id'
        }
      ]
    }
  ]
}

在页面之间导航时，Nuxt 建议我们使用nuxt-link内置组件，而不是使用router-linkvue-router 使用的组件。

部署 Nuxt.js 应用

Nuxt.js 提供了一系列实用的命令，可用于开发和生产环境。
我们将了解运行 Nuxt 应用所使用的所有脚本，并深入研究 Nuxt 应用的部署脚本。

上面列出的命令是可以在终端中运行的脚本yarn。npm对于生产环境，我们需要部署应用程序。Nuxt.js 提供了三种应用程序部署模式：服务器端渲染 (SSR)、静态生成 (SGI) 和单页应用程序 (SPA)。
根据您选择的部署模式，以下是构建用于生产环境的 Nuxt 应用程序的方法。

服务器端渲染：
要运行您的应用程序，您需要运行以下命令：

$ yarn build or npm run build

静态文件生成：
要将我们的应用程序生成为静态文件，我们需要运行以下命令：

$ yarn generate or npm run generate

Nuxt 中的单页应用程序
(SPA) 可以使用两种模式生成：

• 添加mode: 'spa'到nuxt.config.js文件

export default { 
  mode: 'spa'
}

• --spa给每个脚本命令添加标志

  "scripts": {
     "dev": "nuxt --spa",
     "build": "nuxt build --spa",
     "start": "nuxt start --spa",
     "generate": "nuxt generate --spa",
   },

按照上述步骤，我们可以选择以三种不同的模式部署我们的 Nuxt 应用程序。

将 Nuxt 应用部署到阿里云

我们将使用阿里云对象存储服务 (Alibaba Object Storage Service)部署 Nuxt 应用。阿里云对象存储服务是一种云存储服务，可用于在全球任何地方存储海量数据，我们将使用此服务部署静态网站。
首先，您需要拥有一个阿里云账号，如果没有，请创建一个。

为了在阿里云对象存储服务上托管我们的静态网站，我们必须首先完成以下步骤：

• 创建一个存储桶，用于存储我们网站的文件，例如文件、图像和脚本。
• 然后将文件上传到我们的存储桶。
• 将我们的存储桶设置为静态网站托管模式。

完成这些步骤后，我们的网站将被部署到阿里云，然后我们可以使用类似的链接访问它：http://nuxt-app.oss-ap-southeast-1.aliyuncs.com/。

在阿里云开源软件 (OSS) 上创建存储桶
要创建存储桶，请点击图中所示的“创建存储桶”按钮。系统会弹出一个对话框，要求您输入存储桶名称和区域。请务必将存储类和访问控制列表 (ACL)设置为下图所示的默认值。

下一步是将文件上传到我们刚刚创建的存储桶。由于我们要部署的是静态网站，因此需要运行命令来nuxt generate创建可以上传的静态文件。运行该命令后dist，将在项目目录中创建一个文件夹。然后，我们前往阿里巴巴上传文件，点击“文件”，然后点击“上传”。将整个dist文件夹拖到上传框中，几秒钟后，文件即可上传完成。

将存储桶设置为静态网站模式
最后一步，我们需要将存储桶设置为静态网站托管模式。在控制面板中，点击“基本设置”，导航至“静态页面”，并将其添加index.html为默认首页。

完成以下步骤后，我们的网站将运行在由阿里巴巴OSS生成的自定义域名上。http ://nuxt-app.oss-ap-southeast-1.aliyuncs.com/

结论

Nuxt.js 既可以用于生成静态网站，也可以用于生成服务器端渲染的单页应用程序（SPA），它还支持 Vue.js，这正是它的通用性所在。本文介绍了如何开始使用 Nuxt.js，从项目设置到理解其功能特性，还讲解了目录结构以及如何部署不同版本的 Nuxt 应用。现在，您可以开始使用 Nuxt.js 构建 Web 应用程序了。

相关内容：请查看另一位阿里云员工撰写的关于 Vue.JS 框架入门的
文章。