如何使用Django webpack loader在Django中使用VueJs组件？_Django_Vue.js_Django Webpack Loader

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

django vue.js

如何使用Django webpack loader在Django中使用VueJs组件？,django,vue.js,django-webpack-loader,Django,Vue.js,Django Webpack Loader,我使用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 - myprojec

我使用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组件，并且希望在我的一些模板中使用它们，我应该如何做到这一点？我是否应该在component目录中创建组件并将其打包？如果是这种情况，我应该如何选择在特定模板中使用或不使用组件？我应该如何使用Django模板标记来插入动态数据？或者我应该用另一种方式编写组件

我知道这里有多个问题，但我找不到一个好的参考来回答我的问题，因此非常感谢您的帮助。

Django使用一种模板语言，称为，将上下文（信息）从视图传递到模板。假设

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解析您的上下文（访问

myu变量的值）。您的模板不必是HTML文件，它可以是任何内容（JS、PHP等），它只是从视图中加载的模板文件
<html lang="en">
  <head></head>
  <body>
    <h1>{{ my_variable }}</h1>
  </body>
</html>

Django使用名为的模板语言将上下文（信息）从视图传递到模板。假设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解析您的上下文（访问myu变量的值）。您的模板不必是HTML文件，它可以是任何内容（JS、PHP等），它只是从视图中加载的模板文件
<html lang="en">
  <head></head>
  <body>
    <h1>{{ my_variable }}</h1>
  </body>
</html>

如果有帮助，下面是我的一个直播Django应用程序：。它不使用Vue.js，但在前端使用vanilla js。如果有用的话，下面是我的一个直播Django应用程序：。它不使用Vue.js，但在前端使用vanilla js。我很清楚django模板是如何工作的，我应该提到，我只是不知道如何使用组件？例如，想象一下，如果我有一个化身组件，并且化身组件从webpack loader（本例中为main.js）的捆绑输出加载到模板，那么应该如何将化身源图像路径（django变量）传递到化身组件，@salmanrezaie I可能误解了您的问题，但是，如果您的Vue组件位于index.js
中，则可以在Django中指定index.js
作为模板，然后使用Jinja将Django上下文变量传递到模板中。至于传递JSON，我通常在Django模型之间以字符串形式传递JSON，然后在将它们传递到视图之前用Python解析它们。这可能适用于Vue，但可能有一个更好的方法进行小的修正：虽然可以使用jinja2，但django有自己的模板语言。我很清楚django模板是如何工作的，我应该提到，我只是不知道如何使用组件？例如，想象一下，如果我有一个化身组件，并且化身组件从webpack loader（本例中为main.js）的捆绑输出加载到模板，那么应该如何将化身源图像路径（django变量）传递到化身组件，@salmanrezaie I可能误解了您的问题，但是，如果您的Vue组件位于index.js
中，则可以在Django中指定index.js
作为模板，然后使用Jinja将Django上下文变量传递到模板中。至于传递JSON，我通常在Django模型之间以字符串形式传递JSON，然后在将它们传递到视图之前用Python解析它们。这可能适用于Vue，但可能有一个更好的方法进行小的修正：虽然可以使用jinja2，但django有自己的模板语言。