いきなりNuxt.jsに手を出すのは厳しい！？
ある日、
自分でかっこいいWebサイトやWebアプリを作るれるようになるぞ！
Nuxt.js を使いこなせるようになるぞ！
と決意した。
そして、いろいろ調べていると、
Nuxt.jsを使いこなしたいならまず Vue.js を勉強しなさい。
と言っている人をたくさん見つけた。
たしかに、Nuxt.jsでとりあえずプロジェクトを作ってみたり、
コードを眺めていても、よく分からなくて混乱した。
ここは素直に Vue.js の勉強から始めることにした。
今回やること
- Vue.js をインストールし、プロジェクトを作ってサンプルを実行してみる！
対象
どんな人向けか？ どんな人向けじゃないか？ を簡単に。
- Vue.jsでプロジェクトを作成するまでの手順を知りたい方、おさらいしたい方。
- Vue.jsとは？等の説明はありません。
環境
- Windows 10
いろいろインストールする
すぐにでもプロジェクトを作りたいところだが、その前にいろいろインストールしなくちゃいけない。
【Node.jsをインストールする】
以下のアドレスにアクセスしてNode.jsのインストーラをダウンロードする（最新版ではなくLTSのものを選択する）
https://nodejs.org/ja/ダウンロードしたインストーラ（～.msi）をダブルクリックする（特に理由が無ければ全部デフォルトでOK）
インストールが完了したら、Node.jsがちゃんと動くか確認する（コマンドプロンプトとかで）
node --version
- Node.jsをインストールすると、npmも自動でインストールされているはずなので、確認する
npm --version
【Vue CLIをインストールする】
- 以下のコマンドで「Vue CLI」と「Vue cli-service-global」をインストールする（どっちもVue.js開発に必要）
npm install -g @vue/cli
npm install -g @vue/cli-service-global
プロジェクトを作る
準備は完了！さっそくプロジェクトを作ってみる！
- プロジェクトを作りたいディレクトリに移動する
cd [プロジェクトを作りたいディレクトリ]
- プロジェクトを作る（これも特に理由が無ければデフォルトでOK）
vue create [プロジェクト名]
これだけ！
あれ？記事にしてまとめる程のことじゃなくない？
サンプルを実行する
ちゃんとプロジェクト作成できたかの確認も含めて、サンプルを実行してみる！
- プロジェクトの中に移動する
cd [プロジェクト名]
- サンプルを実行する
npm run serve
- 以下のようなテキストが出力されれば成功！
App running at:
- Local: http://localhost:8080/
- Network: http://xxx.xxx.xxx.xxx:8080/
-
http://localhost:8080/にアクセスして画面を確認してみる（下の画像のようなページが表示されるはず）
終わり！
感想
Vue.jsのプロジェクト作成はびっくりするくらい簡単だった。
もろもろのインストールもつまずくこと無くすんなり！
作ったプロジェクトの中にはなんかいろいろ入ってる。。。
よし、調べよう。