Spring boot + Vue.jsでアプリケーションを作成する(構築編)
はじめに
SpringbootとVue.jsでアプリを作成するというのは一度やったことがあり、その際にブログ記事も作成していました。
その後、アプリ自体は完成したものの、ブログ自体は閉鎖して削除しなければならなかったため、記事は残っていません。
ということで、今回からSpringboot + Vue.jsによるアプリ開発を行っていこうと思います。
まだ構想段階ですが、今回はleafletなんかも使い、地図を使ったアプリにしようと思ってます。
とりあえず環境構築を進めてみましょう。
サーバ側(Spring boot)
Spring Initializr にアクセスし、自分の作成したいようにプロジェクトの設定を行います。
c-mappって名前にしようと思います。create map applicationの略称です。
GENERATEをクリックすると、zip形式でSpringbootアプリケーションが作成されます。
zip形式フォルダを自分の解凍したい場所を指定し、プロジェクトの作成を完了します。
フロント側(Vue.js)
npmも、vue cliもインストール済みなので、今回はそれらの手順を飛ばして作成します。
その辺の設定手順やらについてはどこかしらで記事を作成しますので、今回は割愛します。
同一プロジェクト内のディレクトリで管理したいので、今回は先程作成したプロジェクト直下に作成しようと思います。
vue.js作成時のvue cliを用いた方法は簡単です。以下のコマンドを実行することで、プロジェクトを作成できます。
vue create project-name
とりあえずこれで作成できますが、これで作成すると一緒にgit initまで実行（git管理下にする）してくれます。
ただ今回に限ってはこれはありがた迷惑なので、git管理はしないでプロジェクトを作成します。
コマンドプロンプトを開き、プロジェクトを作成したいディレクトリまで移動します。
移動後、以下のコマンドを実行してください。
vue create [project-name] --no-git
実行後、Vue2か、Vue3かを選択するよう指示されます。
今回は2の方を選択します。選択すると、作成処理が開始されます。
完了すると、こんな感じでコマンドプロンプトに起動方法などが表示されます。
今回はfrontというプロジェクト名で作成したため、このような表示になります。
表示内容に従って起動し、http://localhost:8080にアクセスします。
このような内容で表示されていれば、OKです。CTRL + Cを2回入力して起動を終了してください。
終わりに
久々に一からある程度の目的のあるアプリを作るので、次回以降は色々と精査しながら進めたいと思います。
