はじめてNuxt.js「プロジェクト立ち上げから、テンプレートに変数表示、ページ遷移するまで



学んだことを忘れないために、一度アウトプットしまする。

# 環境
### 実施時の環境
現時点のcreate-nuxt-appの最新版は（v4.0.0）です。
今回実施した環境についてですが、Windows10にWSL2のせて、そこにubunt走らせてます。
なので若干PowerShellやコマンドプロンプトの方とは微妙に違うかもです。
```
$ npm -v
8.4.0
$ cat /etc/os-release
NAME="Ubuntu"
VERSION="20.04.2 LTS (Focal Fossa)"
ID=ubuntu
ID_LIKE=debian
PRETTY_NAME="Ubuntu 20.04.2 LTS"
VERSION_ID="20.04	"
```
# 前準備
node.jsをインスールします。
https://nodejs.org/ja/

# プロジェクト生成
### create-nuxt-app
```
$ npx create-nuxt-app helloNuxtjs
```
helloNuxtjsプロジェクトを生成

### プロジェクト名
```
create-nuxt-app v4.0.0
✨  Generating Nuxt.js project in helloNuxtjs
? Project name: (helloNuxtjs) 
```
プロジェクト名「helloNuxtjs」で良いか聞いてくるので、このままEnter

### 言語
```
? Programming language: (Use arrow keys)
❯ JavaScript
  TypeScript
```
使用する言語を聞いています、今回はJavaScriptを選択。

### パッケージマネージャ
```
? Package manager: (Use arrow keys)
Yarn
❯ Npm
```
パッケージマネージャを何にするか聞いてきます。今回はNpmで

### UI
```
? UI framework: (Use arrow keys)
❯ None
  Ant Design Vue
  BalmUI
…
```
UIを選択します、今回は文字出すだけなのでNone

### モジュール
```
? 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
```
nuxtのモジュールを使うときは、選択しますが今回は文字出すだけなので
何も選択しないでEnter

:::note info
補足
ちなみそれぞれ何を表しているのかざっと解説すると
* Axios - Promise based HTTP client
プロミスベースのHTTPクライアント、NuxtでREST-APIを作るときに使う
* Progressive Web App (PWA)
PWAという、ウェブページをスマホのアプリのように利用するもの
* Content - Git-based headless CMS
GitベースのCMS、画像とかの資材をGitに置く場合に使いそう
:::

### コードレビュー
```
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ ESLint
 ◯ Prettier
 ◯ Lint staged files
 ◯ StyleLint
 ◯ Commitlint
```
Lintingツールを選択します、ソースのタブとか書きぶりを整えてくれるツールです
今回はESLintを選択、

### テスト
```
? Testing framework: 
❯ None
  Jest
  AVA
  WebdriverIO        
  Nightwatch
```
テスト用フレームワークを選択します、今回は文字出すだけなので、Noneを選択

### レンダリング
```
? Rendering mode:       
❯ Universal (SSR / SSG) 
  Single Page App  
```
SSRを行うとサーバーサイドでJSをレンダリングしてhtmlを吐き出してくれます。
こっちのほうがSEO的には嬉しい。

### デプロイ先
```
? Deployment target: (Use arrow keys)
❯ Server (Node.js hosting)
  Static (Static/Jamstack hosting)   
```
レンダリングをサーバーでやるか、静的にやるか。

### IDE
```
? 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)
```
開発に何を使っているか聞いてくるので、jsconfig.jsonを選択
(VSC以外の場合は別途環境に合わせて調べてください)

### CI
```
? Continuous integration:      
❯ None
  GitHub Actions (GitHub only) 
  Travis CI
  CircleCI
```
CI指定

:::note info
補足
CIはざっくり言って試験を自動にしてくれるもの。
今回は、文字を出力するだけなのでNoneとする。
:::

### バージョン管理
```
? Version control system: (Use arrow keys)
❯ Git
  None
```
バージョン管理は、Gitか使ってないかの二択。

### Success!!
```
🎉  Successfully created project helloVue

  To get started:

        cd helloVue
        npm run dev

  To build & start for production:       

        cd helloVue
        npm run build
        npm run start
```
Successfullyが出たら成功


### 生成物確認
```
$ ls
 helloNuxtjs
```
プロジェクト名のディレクトリができていることを確認。

# プロジェクト起動
```
$ cd helloNuxtjs/
```
プロジェクト配下に移動

```
$ npm run dev
```
で、ローカルにページを立ち上げます。
http://localhost:3000/　に接続して画面が正常に表示されればOKです！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201311/2ef62a1f-2bc3-c437-b1bc-1844555d2cc9.png)


ちなみに、今表示されている画面はindex.vueをいじることで変更することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201311/d318531c-76c7-b31d-89c2-e477d488d5f9.png)

# メッセージを表示してみる。
### マスタッシュ構文

```vuejs:index.vue
<template>
    <p>{{ message }}</p>
</template>
 
<script>
export default {
  data: () => ({message: 'Hello World!'})
}
</script>
```
{{ 変数名 }}でvueのdataオブジェクトをテンプレート（html）に出力することができます。


:::note info
補足
アロー関数を短縮にして、オブジェクトを返すとき
data: () => {message: 'Hello World!'}
だとエラーになる。
どうやら”{}”が、オブジェクトの”{}”ではなく関数の”{}”と判定されてしまうみたい。
なので大枠を”()”で囲って上げる必要がある。
:::

### リンクを設定してみる
```vuejs:index.vue
<template>
  <div>
    <p>
      <router-link to="/next">次のページ</router-link>
    </p>
  </div>
</template>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201311/2162b58a-ff89-dc50-a939-1c84d235d31a.png)
遷移先のページを作成します。「next.vue」を新規に作成しました。


```vuejs:next.vue
<template>
  <div>
    <h1>次のページだよ</h1>
  </div>
</template>
 ```

templateタグ直下のタグは必ず一つではないといけないのでdivタグで囲っています。
divタグを外して、h1とrouter-linkがtemplateの直下に来ると、ルートが2つになってしまうため、「Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.」エラーが発生します。


# 動作確認
ちゃんと動くか確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201311/8761c835-2eb3-b03d-f4e0-6913ea4b3539.png)

次のページリンク押下で、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201311/60652987-891e-dfdf-4ff6-089ac1ca5aad.png)

遷移できたら成功！
アドレスバーにもちゃんとnextが表示されています。

:::note info
npmとnpxの違い

気になったのでちょっと調べてみる、ざっくり説明。
* npm
package.jsonに記載されてる、npmのレポジトリを取得。
CLIツールを入れたとき、package.jsonのscriptsにいちいち定義を書かないと駄目。

* npx
package.jsonに記載しなくても、npxコマンドで勝手にインストールされてるパスを調べて入力したコマンドが存在するか見て実行してくれる。
npxが便利なのは、これをローカルだけじゃなくて、ネットにある未インストールのパッケージをインストールしないで利用できるのが素晴らしい。
:::

### 最後に
半分自分用のまとめに近いです、理解が間違っている箇所などがあったらご指摘大歓迎です。