Apakah yang perlu dikonfigurasikan apabila vue diletakkan dalam rangka kerja django?

Vue.js ialah rangka kerja JavaScript popular yang menyediakan banyak alatan dan perpustakaan untuk membina aplikasi web moden. Django ialah rangka kerja web Python yang berkuasa untuk membangunkan aplikasi web berkualiti tinggi. Vue.js dan Django bermain dengan baik bersama-sama, jadi terdapat beberapa konfigurasi yang diperlukan apabila meletakkan Vue.js ke dalam rangka kerja Django.

Berikut ialah aspek yang perlu dikonfigurasikan:

Mengkonfigurasi Vue.js

Untuk menambah Vue.js pada Django, langkah pertama ialah menambah Vue.js Aplikasi ini diasingkan daripada aplikasi Django. Ini boleh dicapai dengan mencipta folder yang dipanggil "statik" dalam Django. Kami perlu meletakkan fail aplikasi Vue.js dalam folder ini.

Aplikasi Vue.js boleh dibuat menggunakan alat perancah vue-cli. Gunakan npm untuk memasang vue-cli dan mencipta aplikasi, kemudian salin fail yang dijana ke dalam folder statik.

npm install -g vue-cli
vue create my-vue-app
cd my-vue-app
npm run build
cp -r dist/* path/to/django/static/

Arahan di atas membina aplikasi Vue.js dan menyalin fail yang dijana ke dalam folder statik Django. Ia kini boleh menggunakan Vue.js dalam aplikasi Django.

Mengkonfigurasi Django

Seterusnya, kita perlu melakukan beberapa konfigurasi dalam projek Django untuk dapat memuatkan aplikasi Vue.js dengan betul.

Mengkonfigurasi Fail Statik

Kita perlu memberitahu Django tempat untuk mencari fail statik. Ini boleh dilakukan dalam fail settings.py. Tambahkan kandungan berikut pada fail:

# settings.py
STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

Kod di atas memberitahu Django untuk mencari fail statik dalam STATICFILES_DIRS. Ini ialah folder bernama static yang dibuat dalam projek.

URL Konfigurasi

Kami perlu memberitahu Django cara mengendalikan permintaan daripada aplikasi Vue.js kami. Ini boleh dilakukan menggunakan sistem penghalaan url Django. Untuk mengkonfigurasi penghalaan aplikasi, tambahkan yang berikut pada fail urls.py:

# urls.py
from django.urls import path
from django.views.generic import TemplateView

urlpatterns = [
    path('', TemplateView.as_view(template_name='index.html')),
    path('api/', include('api.urls')),
]

Kod di atas akan mengubah hala semua permintaan ke paparan templat bernama "index.html". Ini adalah titik masuk ke aplikasi Vue.js.

Mengkonfigurasi Templat

Akhir sekali, kita perlu mengkonfigurasi sistem templat dalam Django. Ini boleh dilakukan menggunakan enjin templat terbina dalam Django. Untuk mengkonfigurasi templat, tambahkan yang berikut pada fail settings.py anda:

# settings.py
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            os.path.join(BASE_DIR, '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',
            ],
        },
    },
]

Kod di atas memberitahu Django untuk mencari fail templat dalam TEMPLATES. Ini ialah folder yang dipanggil "templat" yang dibuat dalam projek.

Kesimpulan

Menambah Vue.js pada rangka kerja Django memerlukan beberapa konfigurasi. Pertama, fail aplikasi Vue.js perlu ditambahkan pada folder statik. Kemudian, lakukan beberapa konfigurasi dalam Django supaya aplikasi Vue.js boleh dimuatkan dengan betul. Ini termasuk mengkonfigurasi fail statik, penghalaan aplikasi dan sistem templat. Selepas melengkapkan langkah di atas, anda boleh berjaya menggunakan aplikasi Vue.js anda dalam Django.

Atas ialah kandungan terperinci Apakah yang perlu dikonfigurasikan apabila vue diletakkan dalam rangka kerja django?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!