Prerequisites

先决条件

  • node-我们推荐你使用最新的LTS版本安装或者至少v10.13及以上（不包含v11）。
  • 文本编辑器，我们推荐带有Vetur扩展的VS code或者WebStorm
  • 终端，我们推荐使用VS code的集成终端或者webstorm终端

    Using create-nuxt-app

    To get started quickly you can use the create-nuxt-app.
    Make sure you have npx installed (npx is shipped by default since npm 5.2.0) or npm v6.1 or yarn.
    你可以使用create-nuxt-app快速入门
    确保你安装了npx(npx从npm5.2.0开始默认提供)或者 npm v6.1 或者 yarn
  1. //yarn
  2. yarn create nuxt-app <project-name>
  4. //npx
  5. npx create-nuxt-app <project-name>
  7. //npm
  8. npm init nuxt-app <project-name>

It will ask you some questions (name, Nuxt options, UI framework, TypeScript, linter, testing framework, etc). To find out more about all the options see the Create Nuxt app.
它将问一些问题（命名，Nuxt选项，ui框架，typescript, linter, testing framework等等）找出更多关于所有选项查看 create nuxt app.

Once all questions are answered, it will install all the dependencies. The next step is to navigate to the project folder and launch it:
一旦所有问题被回答，它将安装所有依赖，接下来是导航到项目目录并运行它：

  1. //yarn
  2. cd <project-name>
  3. yarn dev
  5. //npm
  6. cd <project-name>
  7. npm run dev

The application is now running on http://localhost:3000. Well done!
应用程序现在正在运行在 http://localhost:3000。干得漂亮！

Another way to get started with Nuxt.js is to use CodeSandbox which is a great way for quickly playing around with Nuxt.js and/or sharing your code with other people.

另一种方式入门Nuxt.js是使用codesandbox，这是快速玩转Nuxt.js和/或分享你的代码给其他人的好方法。


Manual Installation

Creating a Nuxt.js project from scratch only requires one file and one directory.
从头创建Nuxt.js项目仅仅需要一个文件和一个文件夹。

We will use the terminal to create the directories and files, feel free to create them using your editor of choice.
我们将使用终端创建文件夹和文件，自由选择使用你的编辑器创建它们。

Set up your project

Create an empty directory with the name of your project and navigate into it:
创建一个你项目名字的空文件夹并进入：

  1. mkdir <project-name>
  2. cd <project-name>

Replace **** with the name of your project.
替换为你项目的名字

Create the package.json file:

  1. touch package.json

Fill the content of your package.json with:
填写package.json的内容如下：

  1. {
  2.   "name": "my-app",
  3.   "scripts": {
  4.     "dev": "nuxt",
  5.     "build": "nuxt build",
  6.     "generate": "nuxt generate",
  7.     "start": "nuxt start"
  8.   }
  9. }

scripts define Nuxt.js commands that will be launched with the command npm run or yarn .
scripts定义Nuxt.js命令，使用命令npm run 或者yarn 启动。


What is a package.json file?

The package.json is like the ID card of your project. It contains all the project dependencies and much more. If you don’t know what the package.json file is, we highly recommend you to have a quick read on the npm documentation.
package.json像是你项目的身份证。它包含所有项目依赖项等等。如果你不知道package.json文件是什么，我们强烈推荐你快速阅读npm文档。


Install Nuxt

Once the package.json has been created, add nuxt to your project via npm or yarn like so below:
一旦创建package.json,通过npm或者yarn增加nuxt到你的项目，如下：

  1. //yarn
  2. yarn add nuxt
  4. //npm
  5. npm install nuxt

This command will add nuxt as a dependency to your project and add it to your package.json. The node_modules directory will also be created which is where all your installed packages and dependencies are stored.
这个命令添加nuxt作为依赖到你的项目并且添加它到你的package.json中。node_modules文件夹也被创建，所有你安装的软件包和依赖被存储在这里。

A yarn.lock or package-lock.json is also created which ensures a consistent install and compatible dependencies of your packages installed in your project.

yarn.lock或者package-lock.json也被创建，以确保安装在项目中的包的安装和兼容依赖项的一致性。

Create your first page

Nuxt.js transforms every *.vue file inside the pages directory as a route for the application.
Nuxt.js转换pages文件夹中的每一个*.vue文件作为应用程序的一个路由。

Create the pages directory in your project:
在项目中创建pages文件夹

  1. mkdir pages

Then, create an index.vue file in the pages directory:

  1. touch pages/index.vue

It is important that this page is called index.vue as this will be the default home page Nuxt shows when the application opens.
这个页面被称为 index.vue 很重要，因为这将是 Nuxt 在应用程序打开时显示的默认主页。

Open the index.vue file in your editor and add the following content:

  1. <template>
  2.   <h1>Hello world!</h1>
  3. </template>


Start the project

Run your project by typing one of the following commands below in your terminal:
通过在终端输入一下的命令之一运行项目：

  1. //yarn
  2. yarn dev
  4. //npm
  5. npm run dev

We use the dev command when running our application in development mode.

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

The application is now running on http://localhost:3000.
应用程序现在正运行在 http://localhost:3000

Open it in your browser by clicking the link in your terminal and you should see the text “Hello World” we copied in the previous step.
在终端点击链接在你的浏览器打开它，你应该看到我们上一步复制的文本Hello World。

When launching Nuxt.js in development mode, it will listen for file changes in most directories, so there is no need to restart the application when e.g. adding new pages 当在开发模式启动Nuxt.js，它将监听大部分文件夹中文件的变化，所以当案例增加新页面时不需要重启应用。

When you run the dev command it will create .nuxt folder. This folder should be ignored from version control. You can ignore files by creating a .gitignore file at the root level and adding .nuxt. 当你运行dev命令时将会创建.nuxt目录。在版本控制中这个目录应该被忽略。你在根目录可以通过创建.gitinore文件来忽略文件，文件中并添加.nuxt。


Bonus step

Create a page named fun.vue in the pages directory.
Add a and include a heading with a funny sentence inside.
Then, go to your browser and see your new page on localhost:3000/fun.

在pages文件夹中创建命名为fun.vue的页面
增加并包含一个有意思的句子标题。
然后，去你的浏览器并查看新页面localhost:3000/fun

Creating a directory named more-fun and putting an index.vue file inside it will give the same result as creating a more-fun.vue file. 创建一个名为 more-fun 的目录并在其中放置一个 index.vue 文件将得到与创建一个 more-fun.vue 文件相同的结果。