DjangoとVueJSでSPAを構築したいが、方法が分からない

Question

前提・実現したいこと

DjangoとVueJSでSPAを構築したいと思っています。
DjangoはAPIサーバとし、初回にhtmlを返したあとはVueJs側でレンダリング・ルーティング等は行いたいです。

Rails等と違ってDjangoはVueの導入手順を公式でサポートしていないので、どう構築するべきかなのか分からず手間取っています。

とりあえず以下のような方法を考えております。

1. Djangoプロジェクトの中にVuejsプロジェクトを作成する
2. Vuejsのwebpackのビルド結果がDjangoの静的ファイル用ディレクトリに格納されるようにする。

or
0. Djangoプロジェクトの中にVuejsプロジェクトを作成する
0. Djangoの静的ファイル用ディレクトの参照を、Vuejsプロジェクト内のdistディレクトリ(webpackのビルド結果)に指定する

このような方法で良いのでしょうか？
この辺りの知見をお持ちの方、ご教授いただければ幸いです。

Answer 1

私が普通にDjangoとVue.jsでSPAを作るとなった場合、通常のWeb APIではなく、REST APIで作成します。
したがって、DjangoプロジェクトとVueのプロジェクトは完全に別で作成し、axios等のajax通信ができるモジュールを利用します。
DjangoはREST APIの口だけを作り、静的ファイルは読みません。

DjangoのREST API化については以下のリンクが参考になります。
Django REST Frameworkを使って爆速でAPIを実装する
Django REST Frameworkと言うものを使います。

axiosについては調べればたくさん出てきますが、この辺りが参考になるかもしれません。
Vue.jsとAxiosなら驚くほど簡単に作れる！外部APIを使ったWebアプリの実例

要するに、DjangoプロジェクトとVueプロジェクトを完全に分離してしまい、Vueプロジェクトから外部APIの呼び出しとして、Djangoプロジェクトで実装したAPIを呼ぶことになります。