时间戳

首页 > 解决方案 > 如何使用 Django webpack loader 在 Django 中使用 VueJs 组件？

django - 如何使用 Django webpack loader 在 Django 中使用 VueJs 组件？

问题描述

我按照本教程使用 django-webpack-loader 集成了 Django 和 VueJs，现在 django-webpack-loader 的 main.js 输出正在加载到我的 index.html

这是我的项目目录结构

 - assets
  - bundles
     - app.js
  - js
     - components
           - Demo.vue
     - index.js
 - db.sqlite3
 - manage.py
 - myapp
 - myproject
 - node_modules
 - package.json
 - package-lock.json
 - requirements.txt
 - templates
 - webpack.config.js
 - webpack-stats.json

我的Demo.vue组件已被导入index.js并使用webpack.config.js文件，所有必要的文件都已捆绑到app.js.

我的问题是下一步是什么？例如，如果我有一些 VueJs 组件并且想在我的一些模板中使用它们，我应该怎么做？我应该在组件目录中创建组件并将它们全部捆绑吗？如果是这种情况，我应该如何选择使用或不使用特定模板中的组件？我应该如何使用 Django 模板标签来插入动态数据？或者我应该以另一种方式编写我的组件？

我知道这里有多个问题，但我找不到一个很好的参考来回答我的问题，所以任何帮助都将不胜感激。

标签： djangovue.jsdjango-webpack-loader

解决方案

Django 使用一种称为Jinja的模板语言将上下文（信息）从视图传递到模板。假设这myapp是一个 Django 应用程序，默认情况下您应该有一个myapp/views.py文件。

在myapp/views.py中，您可以创建视图（访问特定 URL 时运行的代码）。例如，您的视图可能类似于：

from django.shortcuts import render

def my_view(request):
    context = {
        'my_variable': 'my_variable_value',
    }
    return render(request, 'template.html', context)

然后，在template.html* 中，您可以使用 Jinja 解析您的上下文（访问my_variable的值）。您的模板不必是 HTML 文件，它可以是任何东西（JS、PHP 等），它只是从您的视图加载的模板文件。

<html lang="en">
  <head></head>
  <body>
    <h1>{{ my_variable }}</h1>
  </body>
</html>

您也可以将 Jinja 与 Javascript 一起使用：

<script>
function test() {
    console.log({{ my_variable }});
}
</script>

Jinja 支持多种功能，包括循环、if 块和自定义函数（标签）。阅读更多：https ://codeburst.io/jinja-2-explained-in-5-minutes-88548486834e

如果您使用不在模板文件中的静态文件，则必须将它们作为静态文件提供。这有点复杂，但并不难！您必须使用第三方库在生产中提供这些文件，例如whitenoise。Here's a great tutorial for Django static files，因为这超出了这个问题的范围。

*最佳做法是创建一个目录myapp/templates并放入template.html该目录。然后，将 Django 指向您的templates文件夹settings.py：

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ["myapp/templates"],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

推荐阅读