All geek questions in one place

Development and implementation of Vuejs application with django

I created a fairly simple web application in Vuejs that was launched using the default npm run devweb package command . The Vue application used the api from Django , which I created using the django-rest-framework . And whenever a change is made to a Vue application, it automatically restarts, which is pretty surprising.

Now I would like to run the Vue application using django instead of webpack. I mean that Django will respond with the html template file, and the Vuejs application will be launched in this html file for a single-page application.

Now I run this command:

npm run build

Then I copy the dist / static / directory files to the django static folder . Finally, load it into the template:

index.html

{% load static %}
<!DOCTYPE html>
<html>
<head>
    ...
    ...
    <link href="{% static "css/app.e446b60204fec1f9f5510c711523ffca.css" %}" rel=stylesheet>
</head>
<body>
<div id="app"></div>

<script src="{% static "js/manifest.88376ea5d07804f39ff7.js" %}"></script>
<script src="{% static "js/vendor.e0e5105739e9947a23e7.js" %}"></script>
<script src="{% static "js/app.571e9140518a5bae898c.js" %}"></script>
</body>
</html>

Now, if I need to change the Vue application, I need to create it again, copy the files and load it inside the template, which seems pretty long.

So, I hope there is a better and short way to mix both Django and Vuejs.

+4
source share
1 answer

Here's a great article explaining how to run a Vue application in a django template.

https://ariera.imtqy.com/2017/09/26/django-webpack-vue-js-setting-up-a-new-project-that-s-easy-to-develop-and-deploy-part- 1.html

, , Vue, vue-cli. django-webpack-loader js -- Hot Mod django.

webpack/django, vue , .

, , - render_bundle django-webpack-loader. -, :

{% render_bundle 'manifest' %}
{% render_bundle 'vendor' %}
{% render_bundle 'app' %}

webpack dev. , dev-. .

from webpack_loader import utils
from webpack_loader.exceptions import WebpackBundleLookupError
from django.utils.safestring import mark_safe

@register.simple_tag
def render_bundle(bundle_name, extension=None, config='DEFAULT', attrs=''):
    try:
        tags = utils.get_as_tags(bundle_name, extension=extension, config=config, attrs=attrs)
    except WebpackBundleLookupError as e:
        return''
    return mark_safe('\n'.join(tags))
+4

Source: https://habr.com/ru/post/1672588/

More articles:


All Articles