Django

[Django] DjangoアプリでVue.jsを使えるようにするまでの手順をまとめてみる。

 

みんな大好きVue.js。すごく人気のあるJavascriptのフレームワークですよね。

 

 

今回は、Djangoプロジェクトの作成から、Vue.jsをDjangoアプリで使う方法までを紹介したいと思います。

 

 

なお、OSはMacで、Python3.7を使っています。

 

 

Djangoプロジェクトを作成する。

 

 

 

 

 

Djangoアプリを作成する

 

 

 

 

Djangoプロジェクトのsettings.pyを編集する

 

project->project->settings.pyを開いて、以下を編集する

 

 

 

Djangoプロジェクトのurls.pyを編集する

 

project->project->urls.pyを開いて、以下を編集する

 

 

 

Djangoアプリのurls.pyを編集する

 

project->hoge->urls.pyを新たに作成して、以下を追加する。

 

 

 

Djangoアプリのviews.pyを編集する

 

project->hoge->views.pyを開いて、以下のように記述する。

 

 

 

hoge.htmlを作成

 

project->hogeの下に、templatesというディレクトリを作成、tempatesディレクトリの下にhogeというディレクトリを作成、最後に、hogeディレクトリの下にhoge.htmlを作成する。

 

 

現在のディレクトリとファイルの構成は以下のようになっている。

 

 

 

hoge.htmlに以下の内容を記述する。

 

 

 

サーバーを立ち上げる

 

ここまで出来たら、ローカルでサーバーを立ち上げる。

 

 

以下のURLにアクセスすると、無事、hogehogeが表示される。

 

 

 

Vue.jsを使う

 

ここからが DjangoアプリでVue.js を使う方法です。以下のように記述します。

 

 

無事、hogehogehogeが表示されます。

 

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です