Next.js 翻译

1. 安装

需要准备

• node我们推荐最新的LTS版 或最新的v10.13及以上（包括 v11）
• 文本编辑器，我们推荐VS Code和插件 [Vetur] 或 [webstorm]
• 终端，我们推荐使用 vscode的内置终端 或 webstorm终端。

使用 create-nuxt-app

快速安装你可以使用 creat-next-app。

确认你安装过npx（npx 从 npm5.2.0开始提供默认安装 或 npm v6.1 或 yarn

yarn create nuxt-app <project-name>

npx create-nuxt-app <project-name>

npm init nuxt-app <project-name>
复制代码

它将讯问你一些选项(name,nuxt options,ui framework,typescript,linter,testing framework,etc)。要了解更多相关可选项信息 请参阅 create nuxt app.

选择完成后，它会安装所有依赖项。下一个步骤是进入项目文件夹并启动它。

cd <project-name>
yarn dev

cd <project-name>
npm run dev
复制代码

这个应用现在运行在 http://localhost:3000。完成！

另一种方式是使用 codesandbox 启动nuxt.js,这种方法能快速运行nust.js 且是与其他人共享代码的好方式。

安装手册

从头开始创建一个Next.js项目 仅需要一个文件和一个目录。

我们将使用终端创建目录和文件，使用你选择的编译器自由创建他们。

set up your project

创建一个空目录为你的项目命名并按路径进入它。

mkdir <name>
cd <name>
复制代码

用项目名称代替 <name>

创建 package.json 文件:

touch package.json
复制代码

填上你的 package.json 的内容：

{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "start": "nuxt start"
  }
}
复制代码

scripts 定义了 nuxt.js命令 且能用命令 npm run <command> 或 yarn <command>启动项目.

什么是 package.json 文件？

package.json像你项目的id卡，它包含了项目的所有依赖。如果你不知道什么是package.json，我们郑重推荐你快去阅读 npm documentation.

安装 nuxt

package.json 被创建后，使用 npm 或yarn 添加 nuxt 到你的项目。

yarn add nuxt
复制代码

这个将添加 nuxt 作为一个依赖到你的项目中且会添加到 package.json. 也会创建 node_modules 目录 且你的安装包和依赖也会被储存。

一个 yarn.lock 或 package-lock.json也会被创建，以确保你的项目中已安装包具有一致的安装和兼容的依赖关系。

创建你的第一个页面

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

在你的项目中创建 pages 目录：

touch pages
复制代码

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

touch pages/index.vue
复制代码

这个叫 index.vue 的页面是重要的，因为这将是当你打开应用时nuxt展示的默认主页。

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

<template>
  <h1>Hello world!</h1>
</template>
复制代码

启动项目

运行项目需在你的终端输入以下命令：

yarn dev

npm run dev
复制代码

当运行应用在开发模式时我们使用 dev 命令

这个应用现在运行在 3000 上。

在你的终端点击链接打开你的浏览器，你将看到如下文字”Hello world” 这是我们在先前的步骤复制的。

当在开发模式打开 Nuxt.js时，他将在大多数目录中监听文件变化，所以当编辑添加新页面时无需再重启应用。
当你运行dev命令时将创建 .nuxt文件夹。这个文件夹必须被版本控制忽略。可以通过在根级别创建一个 .ignore文件 并添加 .nuxt 来忽略文件。

彩蛋步骤

创建一个页面在pages目录并命名为fun.vue.

添加一个<tempelate></tempelate> 并包括一个头和一个有趣的句子在里面。

然后，去浏览器并打开页面localhost:3000/fun.

创建一个目录命名为more-fun并放一个index.vue文件在里面将得到与创建more-fun.vue文件同样的结果。