安装 Nuxt

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

使用 create-nuxt-app

create-nuxt-app 是 Nuxt 团队创建的脚手架工具，你可以使用它快速安装你的项目。你需要做的就是在你喜欢的终端上使用 npx 运行 create-nuxt-app 命令：

Yarn
NPX
NPM

yarn create nuxt-app <project-name>

npx create-nuxt-app <project-name>

npm init nuxt-app <project-name>

请确保您已安装 npx (自 NPM 5.2.0 版本起，npx 已默认自带)，或者安装 npm 6.1 版本或 yarn。

$ npx --version
6.14.5

在安装 Nuxt 项目的过程中，你会被问到一些与 Nuxt 集成的问题，如下所示：

Choose a programming language:
JavaScript
TypeScript

Choose a package manager:
Yarn
Npm

Choose a UI framework:
None
Ant Design Vue
Bootstrap Vue
...

Choose a testing framework:
None
Jest
AVA
WebdriverIO

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

$ 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)。我们将在第十五章 “使用 Nuxt 创建 SPA” 中介绍单页应用程序 (SPA) 的选项。本书中所有示例应用程序都将使用 SSR，第十五章 “使用 Nuxt 创建 SPA” 中的示例除外。本书中我们也将使用 npm 作为我们的包管理器，所以请确保你选择了这个选项。安装完成后，我们可以通过以下命令启动它：

Yarn
NPM

$ cd first-nuxt
$ yarn dev

$ cd first-nuxt
$ npm run dev

现在应用程序正在 localhost:3000 上运行。当你在你喜欢的浏览器中打开该地址时，你应该看到 Nuxt 生成的默认首页。使用脚手架工具安装 Nuxt 项目非常容易，不是吗？但有时你可能不需要像这样的完整堆栈安装；你可能只需要一个 “精简” 的安装。如果是这样，让我们在下一节中了解如何从头开始安装 Nuxt。

你可以在我们的 GitHub 仓库的 /nuxtpackt/chapter-2/scaffolding/ 目录下找到这个简单应用程序的源文件。

从零开始

如果你不想使用 Nuxt 脚手架工具，你可以使用 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 运行你的应用程序所需的默认目录。因此，让我们在下一节中了解这些目录是什么。

你可以在我们的 GitHub 仓库的 /nuxt-packt/chapter-2/scratch/ 目录下找到这个简单的应用程序。