Skip to content
This repository has been archived by the owner on Sep 3, 2024. It is now read-only.

Commit

Permalink
Translage ja/guide/installation.md
Browse files Browse the repository at this point in the history
  • Loading branch information
inouetakuya committed Feb 19, 2017
1 parent bf49efe commit 1e8e5a4
Showing 1 changed file with 88 additions and 26 deletions.
114 changes: 88 additions & 26 deletions ja/guide/installation.md
Original file line number Diff line number Diff line change
@@ -1,53 +1,87 @@
---
title: Installation
title: インストール
description: Nuxt.js is really easy to get started with. A simple project only need the `nuxt` dependency.
---

> Nuxt.js is really easy to get started with. A simple project only need the `nuxt` dependency.
<!-- title: Installation -->
<!-- description: Nuxt.js is really easy to get started with. A simple project only need the `nuxt` dependency. -->

## Using Nuxt.js starter template
<!-- \> Nuxt.js is really easy to get started with. A simple project only need the `nuxt` dependency. -->

To start quickly, the Nuxt.js team has created a [starter template](https://github.com/nuxt/starter).
Nuxt.js はとても簡単に始められます。シンプルなプロジェクトでは必要なものは `nuxt` だけです。

[Download the .zip](https://github.com/nuxt/starter/archive/source.zip) starter template or install it with vue-cli:
<!-- ## Using Nuxt.js starter template -->

## Nuxt.js を使ったスターターテンプレート

<!-- To start quickly, the Nuxt.js team has created a [starter template](https://github.com/nuxt/starter). -->

素早くスタートできるようにするため、Nuxt.js チームは [スターターテンプレート](https://github.com/nuxt/starter) を作りました。

<!-- [Download the .zip](https://github.com/nuxt/starter/archive/source.zip) starter template or install it with vue-cli: -->

[ZIP をダウンロード](https://github.com/nuxt/starter/archive/source.zip) するか、vue-cli を使ってインストールしてください:

```bash
$ vue init nuxt/starter <project-name>
```

> If [vue-cli](https://github.com/vuejs/vue-cli) is not installed, please install it with `npm install -g vue-cli`
<!-- \> If [vue-cli](https://github.com/vuejs/vue-cli) is not installed, please install it with `npm install -g vue-cli` -->

then install the dependencies:
> もし [vue-cli](https://github.com/vuejs/vue-cli) をインストールしていなければ、`npm install -g vue-cli` でインストールしてください。
<!-- then install the dependencies: -->

それから依存するライブラリをインストールしてください:

```bash
$ cd <project-name>
$ npm install
```

and launch the project with:
<!-- and launch the project with: -->

そしてプロジェクトを起動してください:

```bash
$ npm run dev
```
The application is now running on http://localhost:3000

<p class="Alert">Nuxt.js will listen on the files changes inside the `pages` directory, so no need to restart the application when adding new pages</p>
<!-- The application is now running on http://localhost:3000 -->

To discover more about the directory structure of the project: [Directory Structure Documentation](/guide/directory-structure).
するとアプリケーションは http://localhost:3000 で動きます。

## Starting from scratch
<!-- <p class="Alert">Nuxt.js will listen on the files changes inside the `pages` directory, so no need to restart the application when adding new pages</p> -->

Creating a Nuxt.js application from scratch is also really easy, it only needs *1 file and 1 directory*. Let's create an empty directory to start working on the application:
<p class="Alert">Nuxt.js は `pages` ディレクトリ内のファイルの更新を監視します。そのため新しいページを追加した場合にアプリケーションを再起動する必要はありません</p>

<!-- To discover more about the directory structure of the project: [Directory Structure Documentation](/guide/directory-structure). -->

プロジェクトのディレクトリ構造についてより深く理解するには [ディレクトリ構造のドキュメント](/guide/directory-structure) を参照してください。

<!-- ## Starting from scratch -->

## スクラッチから始める

<!-- Creating a Nuxt.js application from scratch is also really easy, it only needs *1 file and 1 directory*. Let's create an empty directory to start working on the application: -->

Nuxt.js アプリケーションをスクラッチから作ることもとても簡単で、必要なものは *1つのファイルと 1つのディレクトリ* だけです。アプリケーションで動かす空のディレクトリを作りましょう:

```bash
$ mkdir <project-name>
$ cd <project-name>
```

*Info: replace project-name by the name of the project.*
<!-- *Info: replace project-name by the name of the project.* -->

*メモ: `<project-name>` の箇所は置き換えてください。*

### The package.json

The project needs a `package.json` file to specify how to start `nuxt`:
<!-- The project needs a `package.json` file to specify how to start `nuxt`: -->

`nuxt` をどのように起動するかを指定するために `package.json` ファイルが必要です。

```json
{
"name": "my-app",
Expand All @@ -56,37 +90,65 @@ The project needs a `package.json` file to specify how to start `nuxt`:
}
}
```
`scripts` will launch Nuxt.js via `npm run dev`.

### Installing `nuxt`
<!-- `scripts` will launch Nuxt.js via `npm run dev`. -->

`npm run dev` すると `scripts` が Nuxt.js を起動させます。

<!-- ### Installing `nuxt` -->

### `nuxt` のインストール

<!-- Once the `package.json` has been created, add `nuxt` to the project via NPM: -->

一旦 `package.json` が作成されると、NPM によってプロジェクトに `nuxt` が追加されます:

Once the `package.json` has been created, add `nuxt` to the project via NPM:
```bash
npm install --save nuxt
```

### The `pages` directory
<!-- ### The `pages` directory -->

### `pages` ディレクトリ

<!-- Nuxt.js will transform every `*.vue` file inside the `pages` directory as a route for the application. -->

Nuxt.js は `pages` ディレクトリ内の全ての `*.vue` ファイルを、ファイルごとにアプリケーションのひとつのルートとして変換します。

<!-- Create the `pages` directory: -->

Nuxt.js will transform every `*.vue` file inside the `pages` directory as a route for the application.
`pages` ディレクトリを作ります:

Create the `pages` directory:
```bash
$ mkdir pages
```

then create the first page in `pages/index.vue`:
<!-- then create the first page in `pages/index.vue`: -->

それから最初のページを `pages/index.vue` に作ります:

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

and launch the project with:
<!-- and launch the project with: -->

そして、プロジェクトを起動します:

```bash
$ npm run dev
```
The application is now running on http://localhost:3000

<p class="Alert">Nuxt.js will listen on the files changes inside the `pages` directory, so no need to restart the application when adding new pages</p>
<!-- The application is now running on http://localhost:3000 -->

すると、アプリケーションは http://localhost:3000 で動いています。

<!-- <p class="Alert">Nuxt.js will listen on the files changes inside the `pages` directory, so no need to restart the application when adding new pages</p> -->

<p class="Alert">Nuxt.js は `pages` ディレクトリ内のファイルの更新を監視します。そのため新しいページを追加した場合にアプリケーションを再起動する必要はありません</p>

<!-- To discover more about the directory structure of the project: [Directory Structure Documentation](/guide/directory-structure). -->

To discover more about the directory structure of the project: [Directory Structure Documentation](/guide/directory-structure).
プロジェクトのディレクトリ構造についてより深く理解するには [ディレクトリ構造のドキュメント](/guide/directory-structure) を参照してください。

0 comments on commit 1e8e5a4

Please sign in to comment.