タイトルの通り、MacでNuxt.jsの初期プロジェクトを作る手順のメモ。
手順
Npmを入れる
まずnuxtのプロジェクト作成コマンドを叩くためのNpmを入れる。
一発でNpmを入れられるわけじゃなくて意外と面倒。
Command Line Toolsを入れる
↓
Homebrewを入れる（Command Line Toolsが必要）
↓
Nodebrewを入れる（Homebrewが必要）
↓
Node.jsとNpmを入れる（Nodebrewが必要）
という手順になる。
Command Line Toolsを入れる
$ xcode-select --install
インストールを実行。
結構サイズある、7GBぐらい持ってかれた。
Homebrewを入れる
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
$ brew -vでバージョンの確認が出来たらOK。
Nodebrewを入れる
$ brew install nodebrew
$ nodebrew -vでバージョンの確認が出来たらOK。
Node.jsとNpmを入れる
# このディレクトリを作っておかないとエラーになる
$ mkdir -p ~/.nodebrew/src
# latestは最新版という意味
$ nodebrew install-binary latest
# インストールした後で使用を宣言
$ nodebrew use latest
#パスを通す
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
$ source ~/.bash_profile
$ node -v $ npm -vでそれぞれバージョンの確認が出来たらOK。
Nuxtのプロジェクトを作成する
やっと本題。
本題と言いつつここまできたらあとはコマンドを1つ叩くだけ。
$ npx create-nuxt-app <project-name>
選択肢を聞かれるので選んでいく。
以下は私の設定。（あんまりクセがないと思う。）
✨ Generating Nuxt.js project in nuxt
? Project name nuxt
# 任意のプロジェクト名。これが作成されるプロジェクトのディレクトリ名にもなる。
? Project description My flawless Nuxt.js project
# 任意のプロジェクトの説明。README.mdに記載される。
? Author name kuribo2110
# 任意の作者名。
? Choose programming language JavaScript
# 記述方法をJavaScriptかTypeScriptで選択。
? Choose the package manager Npm
# パッケージマネージャーの選択。Npm使います。
? Choose UI framework Bootstrap Vue
# デザインフレームワークの選択。Bootstrap使います。
? Choose custom server framework None (Recommended)
# サーバーフレームワークの選択。別でAPIサーバー立てたいので未選択。
? Choose Nuxt.js modules Axios
# 使いたいモジュールの選択。API叩くためにAxios使います。
? Choose linting tools ESLint, Prettier
# リントツールの選択。ESLintとPrettier使います。
? Choose test framework Jest
# テストフレームワークの選択。Jest使います。
? Choose rendering mode Universal (SSR)
# レンダリング方法をSSRかSPAかで選択。SSRにします。
? Choose development tools jsconfig.json (Recommended for VS Code)
# 開発ツールの選択。VS Code使っているのでjsconfig.json作ります。
選択が終わると自動でNuxtプロジェクトを作ってくれます。しゅごい。
$ npm run devでNuxtプロジェクトを起動。
http://localhost:3000/ でTopページが表示されます。