安装

这里介绍如何通过 4 个步骤启动并运行 Nuxt 项目。

在线演练场

可以直接在 CodeSandbox 或 StackBlitz 上在线体验 Nuxt：

前提条件

• Node.js - 建议安装最新的 LTS 版本。
• 文本编辑器，推荐使用 VS Code 配合 Vetur 扩展，或 WebStorm 。
• 终端，推荐使用 VS Code 的集成终端 或 WebStorm 终端 。

使用 create-nuxt-app

为了快速开始，可以使用 create-nuxt-app 。

确保已安装 yarn 或 npx（npx 从 npm 5.2 起默认提供），或 npm v6.1 以上。

yarn create nuxt-app <project-name>

npx create-nuxt-app <project-name>

npm init nuxt-app <project-name>

启动后会出现一些问题（名称、Nuxt 选项、UI 框架、TypeScript、代码检查、测试框架等）。要了解所有选项，请查看 create-nuxt-app 文档 。

回答完所有问题后，所有依赖项将被安装。下一步是进入项目文件夹并启动项目：

cd <project-name>
yarn dev

cd <project-name>
npm run dev

应用程序现在运行在 http://localhost:3000 。

手动安装

只需一个文件和一个目录就可以从头创建 Nuxt 项目。

本例中使用终端创建目录和文件，但您也可以用喜欢的编辑器创建。

项目设置

首先创建一个以项目名称命名的空目录并进入：

mkdir <project-name>
cd <project-name>

将 <project-name> 替换为您的项目名称。

创建 package.json：

touch package.json

用编辑器打开 package.json 并填入以下 JSON 内容：

{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "start": "nuxt start"
  }
}

scripts 定义了通过 npm run <command> 或 yarn <command> 启动的 Nuxt 命令。

什么是 package.json 文件？

package.json 就像项目的身份证。如果不了解 package.json 文件，建议阅读 npm 文档 。

安装 Nuxt

创建 package.json 后，通过 npm 或 yarn 将 nuxt 添加到项目中：

yarn add nuxt

npm install nuxt

此命令将 nuxt 作为依赖项添加到项目中，并自动添加到 package.json。同时会创建 node_modules 目录，存储已安装的包和依赖项。

创建第一个页面

Nuxt 将 pages 目录中的所有 *.vue 文件转换为应用程序的路由。

在项目中创建 pages 目录：

mkdir pages

然后在 pages 目录中创建 index.vue 文件：

touch pages/index.vue

将此页面命名为 index.vue 很重要，这是 Nuxt 默认显示的页面。这是主页，必须命名为 index。

用编辑器打开 index.vue 文件并添加以下内容：

<template>
  <h1>Hello world!</h1>
</template>

启动项目

在终端中输入以下命令之一运行项目：

yarn dev

npm run dev

应用程序现在运行在 http://localhost:3000 。

点击终端中的链接打开浏览器，将看到上一步复制的"Hello World"文本。

额外步骤

在 pages 目录中创建名为 fun.vue 的页面。

添加 <template></template> 并在标签内放入有趣文字的标题。

然后在浏览器中访问新页面 localhost:3000/fun 。