nuxtjsとこんにちは世界しました。

#はじめに
nuxtjsとこんにちは世界しました。

# 最終更新日
2022年1月31日

# 環境の情報
OS
Ubuntu2004

# 注意
最新の状態を確認して下さい。

#　公式はこちら
https://nuxtjs.org/ja/docs/get-started/installation


# 確認します

```
yarn -v
1.22.5
```

# 環境を作っていきます
```
yarn create nuxt-app test
```

```
すると、
test
yarn create v1.22.5
warning package.json: No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
みたいなのがんにょ〜と出る。
success Installed "create-nuxt-app@4.0.0" with binaries:
      - create-nuxt-app
create-nuxt-app v4.0.0
となる。
```

どうやって作っていくのよあんた！みたいな話だから、こだわりなければエンター。

```
✨  Generating Nuxt.js project in test
? Project name: test
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: None
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert se
lection)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert sele
ction)
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert 
selection)
? What is your GitHub username? username
? Version control system: Git
```

```
？ UIフレームワーク：なし
？ Nuxt.jsモジュール：（<スペース>を押して選択し、<a>を押してすべてを切り替え、<i>を押してseを反転します
選択）
？ リンティングツール：（<スペース>を押して選択し、<a>を押してすべてを切り替え、<i>を押して選択を反転します
）
？ テストフレームワーク：なし
？ レンダリングモード：ユニバーサル（SSR / SSG）
？ デプロイターゲット：サーバー（Node.jsホスティング）
？ 開発ツール：（<スペース>を押して選択し、<a>を押してすべてを切り替え、<i>を押して反転します
選択）
？ GitHubのユーザー名は何ですか？ ユーザー名
？ バージョン管理システム：Git 
```

じゃーん

```
🎉  Successfully created project test

  To get started:

        cd test
        yarn dev

  To build & start for production:

        cd test
        yarn build
        yarn start

Done in 94.84s.

```

いるわよ！

```
ls
test
```

移動して

```
cd test
```

こうします。

```
yarn dev
```

おうおうなんか実行しているわよ

![Screenshot from 2022-01-31 22-47-34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148394/042a0b0a-00f9-a0fd-4c2a-c3393d718c63.png)

```
yarn run v1.22.5
warning ../../../../package.json: No license field
$ nuxt

   ╭───────────────────────────────────────╮
   │                                       │
   │   Nuxt @ v2.15.8                      │
   │                                       │
   │   ▸ Environment: development          │
   │   ▸ Rendering:   server-side          │
   │   ▸ Target:      server               │
   │                                       │
   │   Listening: http://localhost:3000/   │
   │                                       │
   ╰───────────────────────────────────────╯

ℹ Preparing project for development                                   22:47:19
ℹ Initial build may take a while                                      22:47:19
ℹ Discovered Components: .nuxt/components/readme.md                   22:47:19
✔ Builder initialized                                                 22:47:19
✔ Nuxt files generated                                                22:47:19

● Client █████████████████████████ building (44%) 284/288 modules 4 active
 node_modules/vue-style-loader/lib/listToStyles.js

✔ Server
  Compiled successfully in 4.59s
```


すると！3000で見れました(　･ิω･ิ)
![Screenshot from 2022-01-31 22-33-21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148394/6c7c8e43-f924-3674-4297-bbcce1aaed0d.png)


# こんにちは世界をする。

せっかくなのでこんにちは世界する。

```
touch pages/index.vue
```
![Screenshot from 2022-01-31 22-51-26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148394/52a90d8e-0af1-e1c5-ac4f-512455853b07.png)

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

```
yarn dev
```

やったね！こんにちは！

![Screenshot from 2022-01-31 22-53-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148394/fe6e4250-3382-3489-de2e-d16f3efe7dc5.png)