概要

Vue.js を使って、サクッとローカルに環境構築をしてWebアプリの立ち上げを行う手順の備忘録。

前提

・初めて Vue を触るし、まだ環境構築もしていない人向け
・使用する Vue CLI のバージョンは Vue 3 を開発可能な CLI を使用
・記事投稿時点では、主要なUI系フレームワークがほぼ全て Vue 3 未対応なので、実際にアプリを開発していく際には Vue 2 になる可能性があります。

手順１：環境構築（Node.js のインストール）

Node.js をインストール

まだマシンに Node.js をインストールしていない場合は、以下のサイトから「推奨版」のインストーラをダウンロード
https://nodejs.org/ja/

Node.jsは、JavaScriptをサーバサイドで動かすための実行環境を提供するソフトです。
ダウンロードしたインストーラを開いて「はい、はい」ってやればインストールは完了します。

Node.js がインストールされたかの確認

場所はどこでも良いので、ターミナルツールで以下を実行して、バージョンが返却されればインストール完了

# Node.js バージョン確認コマンド
node -v

# 何かしらバージョンの数字が帰ってくればOK
v14.17.0

# ついでに、npm バージョンも確認
npm -v

# バージョン返却されたらOK
6.14.13

※「npm」は node とセットで、勝手に一緒に入る別機能。プログラムやパッケージのインストール作業などに使用する。

手順２：環境構築（Vue のインストール）

Vue CLI ツールのインストール

Vueでアプリを開発するときに作業を効率化するCLIツールとともに、Vueをインストールします。
グローバルインストールをオプションで指定しているので、マシンの固定の場所にインストールされるため、コマンド実行場所はどこでも構いません。

npm install -g @vue/cli

※インストールに失敗する場合は、先頭に sudo を付与して実行してみてください。以降のインストール時でも同様です。
※もうすでに古い Vue CLI がインストールされている場合は、アンインストールしてから新しい CLI を再インストールすればOK👇

# 旧CLIツールを削除
npm uninstall -g vue-cli

# 新CLIツールをインストール
npm install -g @vue/cli

Vue がインストールされたか確認

# 　バージョン確認
vue --version

# バージョンが表示されたらOK
@vue/cli 4.5.13

手順３：Vue アプリの作成

node および vue のインストールが完了し、開発環境ができました。
では、VueのWebアプリを作成します。

プロジェクト生成

適当な場所にフォルダを作り、そこでターミナルを立ち上げた後、
以下の Vue プロジェクト（Vue アプリ）を作成するコマンドを実行。

# 　 「demo-app」という名前でプロジェクト生成
vue create demo-app

※諸々テキストが表示されますが、「Xcode」に関すること以外でエラー表示がなければOK（XcodeはPCに入れてなければエラーが出ちゃいます）

動作確認

生成した場所に、指定したプロジェクト名のフォルダが生成されているので、ディレクトリ移動してアプリを起動してみます。

# 指定したプロジェクト名のフォルダへ移動
cd demo-app

# 開発モードで起動
npm run serve

" Compiled successfully " と表示されたら、Webブラウザから http://localhost:8080 にアクセスすると以下の画面が表示されます。

これで Vue アプリの環境構築は完了。
エディタを立ち上げてソースの編集を行うと、リアルタイムにWeb画面に反映されます。

※ターミナルツールで「Ctrl＋C」を入力すると、起動しているアプリを停止できます。

まとめ

以下の作業を行うことで、15〜20分ほどでVueアプリの基礎を生成できました。

Node.jsを入れる
Vue CLIを入れる
createコマンドでプロジェクト生成

あとは、チュートリアル等を見ながら、ボタンやフォームを追加したらWebアプリとして完成します。
具体的な記法やコツなどはまた別記事で。

今回導入した CLI なら、Vue 2/3 両方のアプリが生成可能です。