
中山テック 代表の中山です。
さて、クライアントサイドのJavaScriptに触れるケースは多いですがサーバサイドはほんのり程度しかわからない私(汗
ひとまずとっかかりやすいvue.jsの構築をメモに残していきたいと思います。
※Linux版の構築はまた今度

※ダウンロードはこちらから
他の環境があるならそれでもいいのですが、ターミナルが使いやすいことや階層構造表示がいい感じです。
まずはダウンロードし、インストールを行います。

今回はWindows版をDLします。
なおVueに限らずReactでも問題ないですし、Go言語ならプラグインも充実しております。
DLして損はないと思います。


Node.jsダウンロード

node.jsはJavaScriptの実行をしてくれる環境であり、通常ブラウザ内で動作するJavaScriptとは一線を画します。
とはいえWEBサーバ的立ち位置として非常に使いやすいミドルだと思います。
デフォルトでのポートは8080、Tomcat等起動している場合は落とすかポート番号変更を検討する必要もあるかもしれません。
ひとまずインストールを行いましょう。

インストール後は[node -v][npm -v]でそれぞれコマンドが使えるかどうか確認しましょう。
※環境変数が自動で設定され、念のための確認となります
vue.jsの導入

ツリー構造での開発を行うため、ここからvscode立ち上げします。
立ち上がったら「表示」⇒「ターミナルを」選択します。
するとアプリの下にターミナル(コマンドプロンプトと同じ)が出るのでコマンド操作を行いましょう。
※vscodeは使っても使わなくても同じです。前項の操作もvscodeでやっても結果は同じです
vue.jsはJavaScriptのFW(フレームワーク)となり、Node.jsを経由してシステムアクセスを行う算段です。

vue.jsの導入は[npm install -g @vue/cli]で出来ます。
終わったら


今回はTypeScriptとセットのプロジェクトを作成します。

Vue.jsは3.x系を選択します。

インストール後、サーバを立ちあげます(ポート:8080)

立ち上がったら、ブラウザで「https://localhost:8080」を入力します。

OK!完璧です!

開発する際はワークスペースを指定するといい感じですよ!
まとめ
HelloWorldと導入までですが、そこまで難易度自体は高くないと思います。
あとは構文や使い方、ライブラリ等覚えていきたい所です。
構築作業自体は苦ではないので、得意としていないプログラミングを頑張るのみ・・・
是非皆様もvscodeや流行りのJavaScriptのFWを使用してみてはいかがでしょうか。