エンジニア初心者がVue.jsを学ぶ 仕事

LaravelとVue.jsのSPAプロジェクト(1)

作るもの

後ほど紹介

VueCLI のインストール

Vue CLI v5.0.8をインストールする(2024/12/31時点)

npm install -g @vue/cli

npm install -g @vue/cli は、Node.js のパッケージ管理ツールである npm を使用して、Vue.js の CLI(Command Line Interface)ツールをグローバルにインストールするためのコマンドです。

プロジェクトを作成

vue create kokokime-front
? Please pick a preset:
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

実行できるか確認

cd kokokime-front\
npm run serve

npm run serve は、Vue.js プロジェクトの開発サーバーを起動するためのコマンドです。Vueのソースプログラムを監視し、変更があったら即座にコンパイルし直してくれるので、通常開発中はこのコマンドを実行したままにする。

上記をそのまま実行しコンパイルが成功すると以下のように表示されます。

DONE  Compiled successfully in 13695ms                                                                                                                                                  15:57:14

 App running at:
 - Local:   http://localhost:8080/
 - Network: http://194.18.1.29:8080/

 Note that the development build is not optimized.
 To create a production build, run npm run build.

http://localhost:8080/を開くとVueのトップ画面が表示されればOK。

ここまでできたらVue側の開発準備完了

次回はバックエンド側の環境を作成する。

-エンジニア初心者がVue.jsを学ぶ, 仕事