言語化するために記事に起こしました。
汎用性の高いスターターテンプレートで雛形を作成するまでを簡潔に記します。
事前準備
①Node.jsの導入
②Yarnの導入
③direnvの導入
①、②共にNuxt.jsで開発する上で必須となるので導入する(ここではこれらの導入方法については省略します)。
③はターミナルのcurrentディレクトリで環境変数を自動で設定してくれるツール。環境変数の設定忘れを防止するため導入するとよい。
1
ターミナル
npm i -g @vue/cli @vue/cli-init
上記コマンドで、Vueコマンドを追加する。「Vue -V」でバージョン確認。
ターミナル
$ vue -V
@vue/cli 4.5.9
2
1により、「vue init」コマンドでプロジェクト作成可能。
今回は初学者やカスタマイズして利用したい方におすすめのテンプレートである、「my-first-nuxt-app」を利用する。
desktop
$ vue init nuxt-community/starter-template my-first-nuxt-app
インストール中のいくつかの質問は全てEnterでOK。
作成後、
ターミナル
$ cd my-first-nuxt-app #ディレクトリに移動
$ yarn #パッケージをインストール
$ yarn dev # 開発モードでプロジェクトを起動
OPEN http://localhost:3000
と表示後、上記URLにアクセスする。
3
このような表示が出れば完了です!