Vue.jsの環境構築をしてhellowordを出力する【初心者向け】

以前手取り足取りでなんとかVueで開発をしたのですが、忘れてしまったので復習しながら自分の教科書として残します。
理解力がないのでかみ砕いた言葉で説明多めです。もし間違いがあればご指摘いただいただけますと幸いです。

PC：windows10
IDE:VScode

Vue.jsってなに？

以下公式から引用

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

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

環境構築してみる

公式が推奨しているnpmを使用してインストールしましょう。
VueCLIを使用していきます。

VueCLIってなに？

Vue.jsはさきほども記述しましたが、JavaScriptのフレームワークです。
VueCLIは、Vue.jsで開発するための便利ツールセットです。Vue開発キットみたいなものですね。こちらを使用することで拡張子「.vue」のファイルで開発することができます。

npmってなに？

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

Node.jsってなに？

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

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

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/にアクセスしてみましょう。
以下のような画面が表示されていたら成功です。簡単！

ファイルを編集する

実行後の画面は、/src直下のApp.vueが表示されていますので、今回は直接以下のように書き換えてみましょう。

App.vue

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

これで保存してみると

出力できました。

vueについての基礎知識はメモがてら更新していく予定です。おわり！