NUXTJSでプロジェクトを作成する

# この記事の概要
NUXTJSでのプロジェクト作成手順をお伝えします！

# この記事のゴール
NUXTJSのプロジェクトを作成し、localhostで起動ができる。

# NUXTJSについて
プロジェクトの作成手順をお伝えする前に、まずはNUXTJSについて簡単に説明します。

NUXTJSは、Webアプリケーション開発のためのフレームワークです。<br>
Vue.jsをベースとしています。<br>
「Vue.js」 + 「Webアプリケーション開発に必要な機能」がまとめられたフレームワークといった印象です。<br>
詳細は、下記公式サイトをご覧ください。

* NUXTJS：https://ja.nuxtjs.org/
* Vue.js：https://jp.vuejs.org/index.html

# 作成手順

### 1. 任意のディレクトリでCUIを起動
今回は`sample`ディレクトリとします。

### 2. コマンドの実行
下記コマンドを実行してください。
`npx create-nuxt-app <project-name>`

* `<project-name>`は任意の名前でOKです（今回は、`nuxt_sample`とします）。
* npxとは：https://www.npmjs.com/package/npx

### 3. プロジェクトの構成を設定
対話形式でプロジェクトの構成の設定を行います。<br>
下記に記載する選択は一例ですので、状況に合わせて適宜選択してください。

#### ① 作成するプロジェクト名を設定
* (nuxt_sample)の名前で問題なければ、そのままエンターで次へ。
* (nuxt_sample)は上記 __手順2__ で設定したものです。

```
> npx create-nuxt-app nuxt_sample
create-nuxt-app v3.6.2
✨  Generating Nuxt.js project in nuxt_sample
? Project name (nuxt_sample)
```

#### ② 利用する言語を選択
* 今回は、TypeScript選択します。

```
? Programming language: (Use arrow keys)
> JavaScript
  TypeScript
```

#### ③ 利用するパッケージマネージャーを選択
* 今回はNpmを選択します。

```
? Package manager: (Use arrow keys)
> Yarn
  Npm
```

#### ④ 利用するUIフレームワークを選択
* 今回はBootstrap Vueを選択します。
* 後から変更可能です。

```
? UI framework: (Use arrow keys)
> None
  Ant Design Vue
  BalmUI
  Bootstrap Vue
  Buefy
  Chakra UI
  Element
  Framevuerk
  iView
  Tachyons
  Tailwind CSS
  Vuesax
  Vuetify.js
  Oruga
```

#### ⑤ 利用するmoduleを選択
* 今回はHTTPリクエスト用にAxiosを選択します。
* 後から変更可能です。

```
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Axios - Promise based HTTP client
 ( ) Progressive Web App (PWA)
 ( ) Content - Git-based headless CMS
```

#### ⑥ 利用する静的解析ツールを選択
* 今回はESLintとPrettierを選択します。
* 後から変更可能です。

```
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) ESLint
 ( ) Prettier
 ( ) Lint staged files
 ( ) StyleLint
```

#### ⑦ ユニットテストのフレームワークを選択
* 今回はJestを選択します。
* 後から変更可能です。

```
? Testing framework: (Use arrow keys)
> None
  Jest
  AVA
  WebdriverIO
  Nightwatch
```

#### ⑧ 画面の描画方法を選択
* 今回はSingle Page App（SPA）を選択します。

```
? Rendering mode: (Use arrow keys)
> Universal (SSR / SSG)
  Single Page App
```

#### ⑨ デプロイ先を選択
* 今回はServerを選択します。

```
? Deployment target: (Use arrow keys)
> Server (Node.js hosting)
  Static (Static/JAMStack hosting)
```

#### ⑩ デプロイツールを選択
* 今回は何も選択しません。
* 後から変更可能です。

```
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) jsconfig.json (Recommended for VS Code if you're not using typescript)
 ( ) Semantic Pull Requests
 ( ) Dependabot (For auto-updating dependencies, GitHub only)
```

#### ⑪ CIツールを選択
* 今回は何も選択しません。
* GitHub Actionsを選択した場合は、GitHubのユーザ名を設定する必要があります。

```
? Continuous integration: (Use arrow keys)
> None
  GitHub Actions (GitHub only) 
```

#### ⑫ バージョン管理システムを選択
* 今回はGit選択します。

```
? Version control system: (Use arrow keys)
> Git
  None
```

#### ⑬ 待機！
設定が完了すると、各パッケージのインストールが開始されるので、待機します。

インストールが完了すると、直下にディレクトリが生成されます。

```
> ls

    ディレクトリ: sample


Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----       2021/04/24     17:51                nuxt_sample
```

` nuxt_sample`はこのような構成になります。

```
> ls

    ディレクトリ: sample\nuxt_sample


Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----       2021/04/24     17:50                assets
d-----       2021/04/24     17:50                components
d-----       2021/04/24     17:50                layouts
d-----       2021/04/24     17:50                middleware
d-----       2021/04/24     17:51                node_modules
d-----       2021/04/24     17:50                pages
d-----       2021/04/24     17:50                plugins
d-----       2021/04/24     17:50                static
d-----       2021/04/24     17:50                store
d-----       2021/04/24     17:50                test
-a----       2021/04/24     17:50            212 .babelrc
-a----       2021/04/24     17:50            207 .editorconfig
-a----       2021/04/24     17:51            314 .eslintrc.js
-a----       2021/04/24     17:50           1253 .gitignore
-a----       2021/04/24     17:50             43 .prettierrc
-a----       2021/04/24     17:51            438 jest.config.js
-a----       2021/04/24     17:51           1277 nuxt.config.js
-a----       2021/04/24     17:51         637400 package-lock.json
-a----       2021/04/24     17:51           1127 package.json
-a----       2021/04/24     17:50            349 README.md
-a----       2021/04/24     17:50            604 tsconfig.json
```

## 4. 動作確認
`nuxt_sample`配下で`npm run dev`を実行します。

`http://localhost:3000/`にアクセスし、以下の画面が出ればOKです！
![nuxt.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1451890/722e3c66-b831-24ff-0111-8f8d83e43a86.png)

---
【参考】
https://ja.nuxtjs.org/guide/installation/