Nuxt.jsの環境構築

Nuxt.jsの環境構築について、忘れないうちにまとめていきます。

前提条件としてNode.js、homebrew、npmはインストール済みとして進めていきます。

# 1.ディレクトリを作成。

```
mkdir nuxt
```
とりあえずnuxtフォルダを作成します。
ディレクトリ名は任意で大丈夫です。

# 2.create-nuxt-appでプロジェクトを作成。

```
npx create-nuxt-app nuxt-sumple
```
特にエラーがなければ、以下のようにプロジェクトの設定について質問をされます。
```
Project name: (nuxt-sumple) //これはこのままEnterで問題なし。
```
```
Programming language: (Use arrow keys) //初めての方はJavaScriptの方が無難。
❯ JavaScript 
  TypeScript
```
```
Package manager: (Use arrow keys) //Npmを選択
❯ Yarn 
  Npm 
```
```
UI framework: (Use arrow keys) // Noneを選択(ただの環境構築が目的なので)
❯ None 
  Ant Design Vue 
  BalmUI 
  Bootstrap Vue 
  Buefy 
  Chakra UI 
  Element 
  Oruga 
  Primevue 
  Tachyons 
  Tailwind CSS 
  Windi CSS 
  Vant 
  View UI 
  Vuetify.js 

```
```
Template engine: (Use arrow keys) //HTMLを選択
❯ HTML 
  Pug 
```
```
 Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert se
lection) //スペースキーで選択だが、何も選ばない。
❯◯ Axios - Promise based HTTP client
 ◯ Progressive Web App (PWA)
 ◯ Content - Git-based headless CMS
```
```
 Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert sele
ction) //何も選ばない。
❯◯ ESLint
 ◯ Prettier
 ◯ Lint staged files
 ◯ StyleLint
 ◯ Commitlint

```
```
Testing framework: (Use arrow keys) // 何も選ばない。
❯ None 
  Jest 
  AVA 
  WebdriverIO 
  Nightwatch 
```
```
Rendering mode: (Use arrow keys) //どちらでも大丈夫。（本来ならダメだが環境構築するだけなので）
❯ Universal (SSR / SSG) 
  Single Page App 
```
```
Deployment target: (Use arrow keys) // Staticを選択
❯ 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)
```
```
What is your GitHub username? // Enter
? Version control system: None // Noneを選択
```
これらの設定が終わったら、プロジェクトが作成されて成功すると以下のようになる。
```
Successfully created project nuxt-sumple

  To get started:

	cd nuxt-sumple
	npm run dev

  To build & start for production:

	cd nuxt-sumple
	npm run build
	npm run start

```

# 3 プロジェクトを起動する。
プロジェクトを作成して、コマンドの位置をnuxt-sumpleに移動させてから、起動させる。
```
cd nuxt-sumple
npm run dev
```
成功すると、
```
 nuxt-sumple@1.0.0 dev
> nuxt


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

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

✔ Client
  Compiled successfully in 5.11s

✔ Server
  Compiled successfully in 4.67s

ℹ Waiting for file changes                                            14:13:09
ℹ Memory usage: 249 MB (RSS: 341 MB)                                  14:13:09
ℹ Listening on: http://localhost:3000/                   
```
[http://localhost:3000]にアクセスして、以下の画面が出れば構築完了です。お疲れ様でした。
![59da1359-d697-4b32-9b37-4998c466e6c3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884343/ff845a87-6c22-a01e-8da4-ce4cd0472d19.png)

# 4.npm run devでエラーが出た時
nodeのバージョンの違いか何かで、以下のようなエラーが起きることがある。
```
node:internal/crypto/hash:71
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
 中身省略
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.12.1
```
とでることがあるので、
```
export NODE_OPTIONS=--openssl-legacy-provider
```
をすると、エラーを回避できることが確認できた。