復習しながら自分の教科書として残します。記憶力と理解力が赤ちゃんなのでかみ砕いた言葉で説明多めです。もし間違いがあればご指摘いただいただけますと幸いです。

PC：windows10
IDE:VScode

Vue.jsってなに？

以下公式から引用

ユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。

はい、私は早速ハテナが多いです。（未だに専門用語に慣れない）他サイトの説明などをまとめると、
Vue.jsはJavaScriptのフレームワークの1種で、見た目（view）部分に強いライブラリが多くDOM操作を自動化してくれます。優秀。効率よくフロントエンドの開発ができて学習コストも低めです。

環境構築してみる

公式が推奨しているnpmを使用してインストールしましょう。
今回は実務向けにVueCLIを使用していきます。（Vue.jsとVueCLIは違うものです。気力がないので今度纏めます）

npmってなに？

npmの正式名称は、Node Package Managerです。
Node.jsのパッケージ（Package）を管理する（Manager）ツールです。名前のまんまですね。
パッケージとは、予め用意された便利な機能をまとめたものです。

Node.jsってなに？

JavaScriptはブラウザ上で動作するプログラミング言語ですが、パソコン上でも動かせるようにしてくれるものです。こちらの記事がとってもわかりやすいです↓
Node.jsとはなにか？なぜみんな使っているのか？

こちらからインストールできます。手順等は他サイトもたくさんあるので割愛します。
プロゲートのインストール手順が見やすそうなので一応参考にはっておきます。

VueCLIをインストールする

コマンドプロンプトで以下のコマンドを実行します。

 npm install -g @vue/cli

以下のようにバージョンを確認できていればインストールができています。

vue --version
@vue/cli 4.5.11  ←これが出ればOK

vueのコマンドが認識されない場合はpathを通しているか確認してみましょう。
参考になりそうな記事を貼っておきます↓
「PATH を通す」の意味をできるだけわかりやすく説明する試み

以上でインストールは完了です。

Hello Worldを出力する

Vueプロジェクトの作成

まずはプロジェクトの作成をしましょう。任意のディレクトリで以下のコマンドを実行します。
createのあとは任意のプロジェクト名を入力してください。今回はvue_sampleとしました。

vue create vue_sample

? Please pick a presetなど途中でいろいろ聞かれますが、全部Enterで大丈夫です。
package.jsonという設定ファイルがありあとから変更できるためです。

以下のコマンドで今作成したファイルを開いてみましょう。

code vue_sample

開いてみると以下のようになります。

実行してみる

それではVScodeのターミナル（ctrl + shift + @）で以下のコマンドを実行し開発用サーバーを立ち上げてみましょう。

npm run serve

成功すると以下のようにターミナルに表示されます。

 DONE  Compiled successfully in 3331ms                                                 17:37:18

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.24:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

ターミナルに表示されているhttp://localhost:8080/にアクセスしてみましょう。
以下のような画面が表示されていたら成功です。簡単！

HelloWorldを出力する

超簡単です。
上の画像の表示は、/src直下のApp.vueが表示されていますので、以下に書き換えてみましょう。

<template><divid="app"><p>HelloWorld</p></div></template>

これで保存してみると

出力できました。

実際の作業では/src直下にファイルを追加してコーディングしていきます。
vueについての基礎知識はメモがてら更新していく予定です。おわり！