vue.jsをDjangoで使いたいが、vueをDjangoのテンプレートに統合する方法を熟知している。vue.js with Django-webpack-loader
webpackでバンドルを作り、ブラウザで「ファイル」として開くことができるhtmlファイルを設定してvueコンポーネントを表示します。それは正しく働いています。私はDjangoのRESTを扱う他の人を見るように
は、たぶん私は間違ってトラックに午前:私は私のDjangoのサーバーを実行したとき
は、しかし、私は、タグではなくVueのコンポーネントを取得しますapiを使用して、テンプレートとは別の方法で作業することもできます。しかし、私はまず、既存のDjangoテンプレートにvueを統合することをお勧めします。私はそれが可能で、どうすればいいのですか?
test_html:
{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
{% render_bundle 'main' %}
</head>
<body>
<h3>[[ message ]]</h3>
kiekeboe
</body>
</html>
main.js:
import '../css/custom.css';
import Vue from 'vue';
Vue.config.delimiters = ["[[", "]]"];
new Vue({
el: 'body',
data: {
message: "Hello Vue"
}
});
さらに詳細:レンダーを経由してすべてのCSS、SASS、他のJSライブラリなどが含まれてhttps://github.com/owais/django-webpack-loaderを:私は現在使用しています バンドルタグ。あなたが見ることができるように、CSSスタイリングが始まるので、vueタグは同じ方法で動作するはずですか?さらに、Django静的フォルダからの静的なファイルも '通常の方法'で使用できます。 bundle.jsを静的フォルダに入れて、次のように参照すると、
<script type="text/javascript" src="{% static 'main-890ab68c2f63dd3f9a2a.js' %}"></script>
となります。なぜDjango-webpack-loader経由ではないのですか?
これは単なる静的ファイルです。あなたのDjangoコードとの関係はどこですか?静的ファイルをどのように設定しましたか?どのURLに行くのですか?どのようにJSをテンプレートにロードしていますか? –
@DanielRoseman私の質問の最後に情報を追加しました。希望が役立ちます。 – musicformellons
@DanielRoseman「通常の静的フォルダ」で動作するようになったので、django-webpack-loaderではうまく動作しません。 – musicformellons