Nuxt.js で Hello world をする
はじめに
元々バックエンドエンジニアだったこともあり、フロントエンドは昔懐かし jQuery しか触ったことがなかったのですが、作ってみたいアプリができたので一念発起して UI から作ってみようと思い、まずは Hello world からやってみた記録です。
基本的に公式ドキュメントのインストール手順をなぞっただけですが、本当に何も知らない中だと結構難しく感じたのでメモとして。
やったこと
基本的にやったことの手順は次の通り。
- Node.js をインストールする
- yarn をインストールする
- yarn で Nuxt app を作るコマンドを叩く
手順
前提
前提となる環境は次のような感じです。
- OS : windows 10
- Docker 等は不使用
Node.js をインストールする
-
Node.js の公式からインストールします。
-
インストーラーの指示に従ってインストールしていく
-
インストール完了後コマンドプロンプトを開き、次のコマンドを実行する
$node -v v14.15.1 -
バージョン情報が帰ってきたら OK
yarn をインストールする
-
yarn の公式からインストールします。
-
インストーラーの指示に従ってインストールしていく
-
インストール完了後コマンドプロンプトを開き、次のコマンドを実行する
$yarn -v 1.22.5 -
バージョン情報が帰ってきたら OK
yarn で Nuxtapp を作るコマンドを叩く
- コマンドプロンプトでプロジェクトを作成するディレクトリに移動する
- 下のコマンドを実行する
$yarn create nuxt-app <project-name>
-
いくつか（結構な量の）選択肢が出てくるので、とりあえず一番上の or 好きなものを選んでいく
-
完了後に下のコマンドを実行する
yarn dev -
http://localhost:3000 にアクセスして画面が表示されたら成功 !
困ったところ
自分の思考の癖として「知らない・わからないことがあると何か怖くて先に進めない」というのが強いので、個人的に大変だったことは、yarn, node.js の名前は知っているけど何かというのを知らなかったので、よくわからんもんをインストールするの？しないの？インストールしたらそれでOKなの？他に何か作業あるの？というところや create-nuxt-app での選択肢がやたら多いのでそれぞれ何なのかが分からずもやもやしたところなどでしょうか。
ただこれらは何か作るときに最低限調べて進めていければいいはずなので、今すべて理解しなくていいからまずは Hello world してしまおうという半ば投げやりな感じで無視しました笑
Discussion