概要
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 両方のアプリが生成可能です。