Vue.js3の環境構築をしてみよう
Vue.js3は、フロントエンド開発に使われるフレームワークで『リアクティブ』『コンポーネント』『テンプレート』という３つの特徴を持っています。
リアクティブ
リアクティブとは、画面で利用しているデータが更新されると、それを利用しているページの表示も更新されるという、動的なページの更新機能です。
コンポーネント
コンポーネントとは再利用可能な部品のことです。
Vue.jsでは、このコンポーネントを配置していき、1つのページを作成します。
テンプレート
Vue.jsはHTMLをベースとしたテンプレートが用意されています。
そのテンプレートを利用して、コンポーネントをHTMLに埋め込みます。
今回は、SPAなどのアプリケーション開発に適しているVue.js3の環境構築をしてみましょう。
JavaScript実行環境の構築（Node.js）
Node.jsは、ブラウザで実行するJavaScriptをブラウザ以外の場所で実行するための環境です。
WindowsでもMacでも、まずはNode.jsをインストールしましょう。
Node.jsにVue.js3の実行環境を構築する
Node.jsにはJavaScriptのパッケージが存在します。
単にVue.jsを実行するといっても様々なライブラリが存在し、これらの互換性が取れている必要があります。
これを管理しているのがnpm(Node Package Manager)といい、このパッケージ管理システム(npm)を通じて、Vue.jsの実行環境を構築します。
Windowsの方はPowerShell、Macの方はターミナルからVue.jsのパッケージをインストールしましょう。
npm install -g @vue/cli以上でVue.jsの環境構築は完了です。
今回はローカルに環境構築しましたが、DockerやWSL2を使ってLinuxに環境構築するのも良いと思います。
それでは、次回から実際にコードを書いていこうと思います。