Nuxt.jsをはじめる時の行動ログです。Macで超初心者向けの内容です。

Nuxtを使う前の処理

基礎から復習。まずは「ターミナル」を開きます。
（Windowsの場合は「コマンドプロンプト」）

「ターミナル」がどこか分からない人は、「アプリケーション」の「ユーティリティ」から。

「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

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