Nuxt.jsはじめる時の行動

Nuxt.jsをはじめる時の行動ログです。Macで超初心者向けの内容です。
# Nuxtを使う前の処理
基礎から復習。まずは「ターミナル」を開きます。
（Windowsの場合は「コマンドプロンプト」）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216132/24a3ff0a-d58f-46eb-f501-a6054bc54167.png)

「ターミナル」がどこか分からない人は、「アプリケーション」の「ユーティリティ」から。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216132/69df1d68-932f-feb5-abc4-9ce96f4297ba.png)

「homebrew」と「node.js」、念の為かいておきます。「$ 」の後ろを「ターミナル」にコピペしていくと動きます。

```:terminal
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
$ brew -v
$ brew install nodebrew
$ nodebrew -v
$ nodebrew install-binary latest
$ nodebrew ls
$ nodebrew use v12.6.0（バージョンは打ち替えてください）
```
nodebrewのインストールに失敗する場合は、ディレクトリを作成しておく。

```:terminal
$ mkdir -p ~/.nodebrew/src
```

その後の「環境パス」を通すためのやり方は、色々あるみたいなので2つ紹介しておきます。

■やり方①：.bash_profileに書き込む。（スマートなやり方。）

```:terminal
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
```
「.bash_profile」は「再起動時」に読み込まれる。（読み込むコマンドがある）

■やり方②：.bashrcに書き込む。（やや地道なやり方）

```:terminal
$ touch .bashrc
$ vi .bashrc
```

「vi」はエディタ、他のアプリで編集しても大丈夫。

```:.bashrc
#!/bin/bash
export PATH=$HOME/.nodebrew/current/bin:$PATH
（Ctrl+Cを同時押しで編集から抜ける）
:wq!
```
「.bashrc」はターミナルを起動すると読み込まれる。（読み込むコマンドがある）

で、いちいち環境パスのために再起動してたらキリがないので、パスを通します。
これが読み込むコマンドです。

```
$ source ~/.bashrc
```

ディレクトリを移動するたびに「node.js」が動かなくなる事があるので、
その時は`$ source ~/.bashrc`をまず試して下さい。
やり方①で作った場合`$ source ~/.bashprofile`です。
前提処理終わり。npxを使えるか調べる。

```:terminal
＄ npx -v
6.10.1
```
バージョンがでたら、パスは通っている、

# Nuxt.jsのインストール

ホームディレクトリに戻ってるの確認する。

```:terminal
$ cd
$ pwd
/Users/(私の名前)
```
試しに「nuxt」というプロジェクトをつくる。

```
$ npx create-nuxt-app nuxt
```

いろいろインストールされて質問が出てきますので、作りたいプロジェクトに合わせて選びます。

```
? Project name (nuxt)
? Project description (nuxt_sample)
? Author name (your name)
? Choose the package manager (Npm)
? Choose UI framework (Vuetify.js)
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules （Axios）
? Choose linting tools (Eslint)
? Choose test framework (None)
? Choose rendering mode Universal (SSR)
```

質問に答えた後は、その命令に応じたプラグインなどがインストールされます。

```
Successfully created project nuxt

  To get started:

	cd nuxt
	npm run dev

  To build & start for production:

	cd nuxt
	npm run build
	npm run start

```

インストールが完了したら、上記のような文字が表示されますので、その通りに入力します。

```
$ cd nuxt
$ npm run dev
```

http://localhost:3000/
devサーバーが立ち上がります。
今回はVuetifyを使って見たかったのでこのような見た目になってます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216132/00acbe4a-7d0d-77a9-e937-0f904963e24b.png)

納品用？完成品をサーバーにアップする時は、ビルドしたものを確認します。

```
$ npm run build
$ npm run start
```

とりあえず、始める所まではできた。
githubアカウントを持っている場合は、ここでリポジトリをGitにコミットしておくといいと思います。

# で、コレを編集していくには？

まず上記の通りで、動く状態を確認して始めて行きましょう。devサーバーが動く状態を常に保持していれば、
止まった時の変更の書き方で、何かうまく行かないんだな。。というのがわかります。

ディレクトリの中身は、色々あるんですが、
「layouts」と「pages」がhtmlファイルっぽいものにあたります。

レイアウツは「bodyの外側」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216132/726eb540-eea2-3c88-a2f6-7df9e231eec7.png)
ページズは「bodyの内側」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216132/b8b395e0-44a3-288d-7d20-db5e918bc416.png)
です。

「static」には、変換しないようなファイルを置くようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216132/5f7c6f56-4fc8-a9ec-3ef7-1431c46a7c68.png)

「assets」には、変換するファイルを置きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216132/b9dfbb3a-8f36-702a-f9d2-ccf40a47db0d.png)

「components」は、その名の通りですが、パーツを小分けにしておいておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216132/298cf42b-fcae-262b-532a-22168856b535.png)

# とりあえず編集していく。

(まだ編集しているところです。)