質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

Q&A

0回答

927閲覧

Django(REST API)とVue.jsを使ってSPAを作成する方法

stakizawa

総合スコア117

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

0グッド

1クリップ

投稿2020/03/18 04:16

編集2022/01/12 10:55

前提・実現したいこと

前提

  • サーバサイド:Django(REST API)
    django-restframework
    rest-framework-jwt
    webpack-loader

  • フロントサイド:Vue.js
    vueCLIで構築
    Vuetify

実現したいこと

Django REST APIとVue.jsを使用してSPAを作成しようと考えています。
上記の構成で実装する上で質問が2点あります。

  1. vue.config.jsの記述方法
  2. DjangoテンプレートとVueの共存方法
vue.config.jsの記述方法

vue.config.jsでバンドル先を設定しているのですが、下記ディレクトリ構成のように指定したいです。
また、初歩的な質問になるのですが、バンドルする前のhtmlやcssはどこで管理しておくべきなのでしょうか?

javascript

1// vue.config.js 2module.exports = { 3 transpileDependencies: [ 4 'vuetify' 5 ], 6 devServer: { 7 proxy: { 8 '^/api': { 9 target: 'http://192.168.33.12:8000', 10 changeOrigin: true, 11 ws: true, 12 pathRewrite: { 13 '^/api': 'api' 14 } 15 } 16 }, 17 port: 8080, 18 host: '192.168.33.12', 19 }, 20 outputDir: '../server', 21 publicPath: '/', 22 indexPath: 'templates/index.html', 23 assetsDir: 'static', 24 configureWebpack: { 25 module: { 26 rules: [ 27 { 28 29 } 30 ] 31 } 32 } 33}
現状のディレクトリ構成
SPA-Project/ ├─django_server/ | ├─django_server/ | ├─django_app/ | ├─templates/ | | ├─login.html # ここにバンドルされたhtmlを置きたい | | └─index.html # ここにバンドルされたhtmlを置きたい | | | ├─static/ | | ├─css/ # ここにバンドルされたcssディレクトリを置きたい | | ├─sacc/ # ここにバンドルされたscssディレクトリを置きたい | | └─js/ # ここにバンドルされたjsディレクトリを置きたい | | | ├─db.sqlite3 | └─manage.py | └─vue_client/ ├─src/ | ├─assetes/ | | ├─css/ # バンドル前のcssディレクトリ。ここで編集する? | | ├─scss/ # バンドル前のscssディレクトリ。ここで編集する? | | └─js/ # バンドル前のjsディレクトリ。ここで編集する? | | | ├─components/ | ├─plugins/ | ├─router/ | ├─store/ | ├─views/ | ├─templates/ | | ├─login.html # バンドル前のlogin.html。ここでDjangoのテンプレートを使用して編集する? | | └─index.html # バンドル前のindex.html。ここでDjangoのテンプレートを使用して編集する? | | | ├─App.vue | └─main.js | ├─package.json ├─vue.config.js ├─babel.config.js └─.editorconfig
Djangoテンプレートとの共存

webpack-loaderでバンドルされたjsを読み込むことまでは理解できたつもりなのですが、
Djangoテンプレートと共存する際は、バンドル前のhtmlにDjangoのテンプレートタグを記述するのかがよくわかりませんでした。

vue_client/src/templates/index.htmlに下記のように記述すれば、Djangoテンプレートとvueの共存が可能になるのか?

html

1{% verbatim %} 2<h1>{{ django.temp }}</h1> 3{% endverbatim %}

下記URLのように記述したいです。
vue.jsのDjangoでの使いどころ

環境

  • VirtualBox
  • vagrant
  • centos-7
  • Python 3.7.0
  • Django 2.5.5
  • Vue.js 2.6.11
  • vue/cli 4.2.3
  • Vuetify 2.2.11

以上、拙い文章ではございますが、どなたかご教授いただけると幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問