Vue.jsの開発環境構築
Vue.jsのプログラム構成
Vue.jsは、HTML、JavaScript、CSSを一つのvueファイルというものに記述します。
これだけ聞くと、画面の構成(HTML)、処理の実装(JavaScript)、画面の見た目(CSS)が一つのファイルでごちゃっとしそう・・・と思うかもしれません。
が、実際に書いてみると関連しているものが同じ場所に書かれているので、意外と見通しがいいんです。
当然、このvueファイルはブラウザで表示することができません。vueファイルをコンパイルして、HTML、JavaScript、CSSファイルを生成、ブラウザに表示することになります。
そして、vueファイルをコンパイルするためにNode.jsが必要になります。
Node.jsのインストール
Node.jsの公式ホームページ から、Node.jsのインストーラーをダウンロードします。
LTSでも最新版でも構いませんが、ここではLTSをダウンロードしました。
ダウンロードしたインストーラーを実行します。
Setup画面が表示されるので、[Next]ボタンをクリックします。
ライセンスの画面が表示されるので、[I accept the ～]のチェックボックスをチェックして、[Next]ボタンをクリックします。
インストール先フォルダの指定画面が表示されるので、変更せずに[Next]ボタンをクリックします。
インストールするコンポーネントの指定画面が表示されるので、変更せずに[Next]ボタンをクリックします。
追加のツールインストールの指定画面が表示されます。追加のツールは不要なので、チェックボックスにチェックを入れずに[Next]ボタンをクリックします。
インストールの準備が完了した画面が表示されるので、[Install]ボタンをクリックします。
インストールが開始されます。完了するまで待ちます。
インストールが完了すると完了画面が表示されるので、[Finish]ボタンをクリックしてインストーラーを終了します。
Node.jsのインストール確認
コマンドプロンプトを立ち上げて、nodeコマンドに「--version」オプションを指定して実行します。
正常にインストールされていると以下のような画面が表示されます。
vue/cliのインストール
node.jsがインストールできたら、次にvueのコマンドラインツールであるvue/cliをインストールします。
node.jsでインストールされるnpmコマンドを使用します。「-g」オプションを忘れずに指定します。
npm install -g @vue/cli
vue/cliのインストール確認
コマンドプロンプトからvueコマンドに「--version」オプションを指定して実行します。
正常にインストールされていると以下のような画面が表示されます。
