Praktisches Tutorial: Vue3+Django4 neue technische Praxis

Praktisches Tutorial: Vue3 + Django4 neue technische Praxis

Einführung:
Mit der kontinuierlichen Weiterentwicklung der Front-End-Technologie hat sich Vue.js zu einem der beliebtesten Front-End-Frameworks entwickelt. Als leistungsstarkes und flexibles Python-Webframework wird Django auch von Entwicklern bevorzugt. In diesem Artikel erfahren Sie, wie Sie Vue3 und Django4 kombinieren können, um eine neue technische Praxis zu erreichen.

1. Umgebungseinrichtung:
Zuerst müssen wir eine Entwicklungsumgebung einrichten. Stellen Sie sicher, dass auf Ihrem Computer die neuesten Versionen von Node.js und Python installiert sind. Installieren Sie dann Vue CLI und Django über den folgenden Befehl:

1. Installieren Sie Vue CLI:

   npm install -g @vue/cli

   Nach dem Login kopieren

2. Erstellen Sie ein Vue-Projekt:

   vue create vue-django-project

   Nach dem Login kopieren

   Dadurch wird ein Vue-Projekt namens vue-django-project erstellt.

3. Django installieren:

   pip install Django

   Nach dem Login kopieren

2. Erstellen Sie ein Django-Projekt:
Als nächstes erstellen wir ein Django-Projekt und integrieren das Vue-Projekt darin.

1. Django-Projekt erstellen:

   django-admin startproject django_project

   Nach dem Login kopieren

   Dadurch wird ein Django-Projekt namens django_project erstellt.

2. Django-App erstellen:

   cd django_project
   python manage.py startapp vueapp

   Nach dem Login kopieren

   Dadurch wird eine Django-App namens vueapp erstellt.

3. Set Up Das Django -Projekt:
   Open die Datei django_project/Settings.py und fügen Sie VueApp zu installed_apps hinzu:

   INSTALLED_APPS = [
    ...
    'vueapp',
   ]

   Nach dem Login kopieren

then, fügen Sie die folgende Anweisung in den Datenbankeinstellungen hinzu:

DATABASES = {
    'default': {
        ...
        'CONN_MAX_AGE': 600,
    }
}

4. create die Django -Ansicht :
   Fügen Sie in vueapp/views.py den folgenden Code hinzu:

   from django.shortcuts import render
   
   def index(request):
    return render(request, 'vueapp/index.html')

   Nach dem Login kopieren

   Dadurch wird eine Ansicht mit dem Namen index erstellt.

5. Erstellen Sie eine Django-URL-Route:
   Erstellen Sie im vueapp-Verzeichnis die Datei urls.py und fügen Sie den folgenden Code hinzu:

   from django.urls import path
   from . import views
   
   urlpatterns = [
    path('', views.index, name='index'),
   ]

   Nach dem Login kopieren

Dann importieren Sie in django_project/urls.py vueapp.urls und fügen Sie es in urlpatterns ein :

from django.urls import include, path

urlpatterns = [
    ...
    path('', include('vueapp.urls')),
]

3. Vue-Komponente erstellen:
Jetzt erstellen wir die Vue-Komponente und integrieren sie in die Django-Ansicht.

1. Erstellen Sie eine Vue-Komponente:
   Erstellen Sie im Verzeichnis vue-django-project/src/components eine Vue-Komponente mit dem Namen Beispiel.vue. Der Code lautet wie folgt:

   <template>
     <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
     </div>
   </template>
   
   <script>
   export default {
     data() {
    return {
      title: 'Vue3+Django4全新技术实践',
      content: '这是一个示例文本。',
    };
     },
   };
   </script>

   Nach dem Login kopieren

2. Kompilieren Sie das Vue-Projekt:
   In vue -django -project Verzeichnis, führen Sie den folgenden Befehl aus, um das Vue-Projekt zu kompilieren:

   npm run build

   Nach dem Login kopieren

   Dadurch wird ein dist-Verzeichnis generiert, das den kompilierten Vue-Code enthält.

3. Konfigurieren Sie statische Django-Dateien:
   Fügen Sie am Ende von django_project/settings.py den folgenden Code hinzu:

   STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'vue-django-project/dist'),
   ]
   
   STATIC_URL = '/static/'

   Nach dem Login kopieren

4. Integrieren Sie Vue in die Django-Ansicht:
Jetzt integrieren wir die Vue-Komponente in die Django-Ansicht und Zugriff über URL.

1. Django-Vorlage erstellen:
   Erstellen Sie im Vueapp-Verzeichnis eine Django-Vorlage mit dem Namen index.html. Der Code lautet wie folgt:

   {% load static %}
   
   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Vue3+Django4全新技术实践</title>
     <link href="{% static 'css/app.css' %}" rel="stylesheet">
   </head>
   <body>
     <div id="app">
    <example></example>
     </div>
     <script src="{% static 'js/app.js' %}"></script>
   </body>
   </html>

   Nach dem Login kopieren

2. Django-Ansicht aktualisieren:
   In der Indexansicht von vueapp/views.py, modifizieren Der erste Parameter der Render-Methode ist vueapp/index.html:

   def index(request):
    return render(request, 'vueapp/index.html')

   Nach dem Login kopieren

5. Führen Sie das Projekt aus:
Abschließend starten wir den Django-Entwicklungsserver und greifen über die URL auf das Projekt zu.

1. Starten Sie den Django-Entwicklungsserver:
   Führen Sie im Verzeichnis django_project den folgenden Befehl aus, um den Django-Entwicklungsserver zu starten:

   python manage.py runserver

   Nach dem Login kopieren
2. Greifen Sie auf das Projekt zu:
   Geben Sie http://localhost:8000/ in den Browser ein, um darauf zuzugreifen das Projekt.

Fazit:
Durch die Praxis dieses Artikels haben wir Vue3 und Django4 erfolgreich kombiniert und eine neue technische Praxis implementiert. Durch die Leistungsfähigkeit von Vue3 und die Flexibilität von Django4 können wir effizientere und elegantere Webanwendungen entwickeln. Ich hoffe, dieser Artikel ist für alle hilfreich und hilft Ihnen dabei, die Bereiche Vue und Django weiter zu erforschen und Innovationen voranzutreiben!

Das obige ist der detaillierte Inhalt vonPraktisches Tutorial: Vue3+Django4 neue technische Praxis. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!