2016-05-27 4 views
1

vue.jsをDjangoで使いたいが、vueをDjangoのテンプレートに統合する方法を熟知している。vue.js with Django-webpack-loader

webpackでバンドルを作り、ブラウザで「ファイル」として開くことができるhtmlファイルを設定してvueコンポーネントを表示します。それは正しく働いています。私はDjangoのRESTを扱う他の人を見るように enter image description here

は、たぶん私は間違ってトラックに午前:私は私のDjangoのサーバーを実行したとき enter image description here

enter image description here

は、しかし、私は、タグではなく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経由ではないのですか?

+1

これは単なる静的ファイルです。あなたのDjangoコードとの関係はどこですか?静的ファイルをどのように設定しましたか?どのURLに行くのですか?どのようにJSをテンプレートにロードしていますか? –

+0

@DanielRoseman私の質問の最後に情報を追加しました。希望が役立ちます。 – musicformellons

+0

@DanielRoseman「通常の静的フォルダ」で動作するようになったので、django-webpack-loaderではうまく動作しません。 – musicformellons

答えて

1

私は、vue.jsの参照がvueのhtmlタグの後に何らかの形で必要であることに気付きました。 Django-web-loaderを使用している場合も同じですので、{% render_bundle 'main' %}はダウンする必要があります。これは正常に機能しました。

{% load staticfiles %} 
{% load render_bundle from webpack_loader %} 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Webpack Sample Project</title> 

</head> 

<body> 

<h3>[[ message ]]</h3> 
kiekeboe 

{% render_bundle 'main' %} 

</body> 
</html> 
+1

素晴らしい!私はこれをテストしなければならない。 また、あなた自身の答えを受け入れるべきです。 – Ealhad