vue与django集成打包的实现方法

实现 Vue 和 Django 的集成打包，需要以下步骤：

1. 创建 Vue 应用程序

首先，我们需要创建一个 Vue 应用程序。在使用 Vue CLI 创建应用程序后，确保在命令行中运行npm run build 命令来打包应用程序。

$ vue create my-vue-app
$ cd my-vue-app
$ npm install
$ npm run build

2. 创建 Django 应用程序

接下来，我们需要创建一个 Django 应用程序。

$ django-admin startproject my-django-app
$ cd my-django-app
$ python manage.py startapp myapp

3. 将 Vue 打包文件复制到 Django 的静态文件目录中

Vue 打包文件的默认目录是 dist，请将 dist 目录中的所有文件复制到 Django 的 static 目录中。

$ cp -r ../my-vue-app/dist/* .\myapp\static\

注意事项：在 Django 中，使用静态文件需要在默认的模板中引入它们，例如：

html
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'css/mystyle.css' %}">
<script src="{% static 'js/myjs.js' %}"></script>

4. 在 Django 中创建模板

在 Django 中，模板通常是将数据呈现为 HTML 的一种方式。可以将 Vue 模板加载到 Django 模板中，或者使用 Vue 取代 Django 模板。

示例一：Vue 模板加载到 Django 模板中

在 Django 模板中，使用 Vue 的 template 标签将 Vue 模板加载到模板中。

{% extends 'base.html' %}

{% block content %}
  <div id="app">
    {% verbatim %}
      <template>
        <div>
          {{ message }}
        </div>
      </template>
    {% endverbatim %}
  </div>
{% endblock %}

Vue 也需要被引用。

{% extends 'base.html' %}

{% block head %}
  {{ block.super }}
  <script src="{% static 'js/vue.js' %}"></script>
{% endblock %}

{% block content %}
  <div id="app">
    {% verbatim %}
      <template>
        <div>
          {{ message }}
        </div>
      </template>
    {% endverbatim %}
  </div>
  <script src="{% static 'js/myapp.js' %}"></script>
{% endblock %}

然后，在 Vue 应用程序的 main.js 中加载 Django 模板。

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

示例二：Vue 取代 Django 模板

Vue 也可以作为 Django 的模板引擎，在 Vue 中实现 Django 的功能。

首先，我们需要在 Django 的 settings.py 文件中添加 Vue 模板引擎。

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.vue.VueTemplates',
        'DIRS': [],
        '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',
            ],
        },
    },
]

接下来，创建一个 Vue 模板，它将代替 Django 中的模板。

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'MyApp',
  data() {
    return {
      title: 'Welcome to my app',
      message: 'Hello World!'
    }
  }
}
</script>

这个 Vue 模板将取代 Django 的模板，并渲染相应的内容。

from django.views.generic import TemplateView

class MyAppView(TemplateView):
    template_name = 'myapp.html'

5. 链接 Vue 和 Django

最后一步是将 Django 的视图与 Vue 链接。

示例一：Vue 模板加载到 Django 模板中

在 Django 中，将视图与 Vue 链接。

from django.views.generic import TemplateView

class MyAppView(TemplateView):
    template_name = 'myapp.html'

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context['message'] = "Hello World"
        return context

在 myapp.html 中添加一个有效的容器，它将成为 Vue 和 Django 的连接点。

<div id="app">
</div>

然后，在 Vue 应用程序的 main.js 中将 Django 数据加载到 Vue 中。

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  data: {
    message: "{{ message }}"
  },
  template: '<App :message="message"/>'
})

示例二：Vue 取代 Django 模板

在 Django 视图中，使用 VueResponseMixin 来取代 Django 的默认 HttpResponse。

from django_vue.views.generic import VueView

class MyAppView(VueView):
  template_name = 'myapp.html'

  def get_vue_data(self):
    return {
      'title': 'Welcome to my app'
    }

最后，将 Vue 视图与 Django 的 URL 关联起来。

from django.urls import path
from myapp.views import MyAppView

urlpatterns = [
    path('', MyAppView.as_view(), name='myapp'),
]