Practical tutorial: Vue3+Django4 new technical practice-Vue.js-php.cn

Home

Web Front-end

Vue.js

Practical tutorial: Vue3+Django4 new technical practice

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 09, 2023 am 08:52 AM

vuepracticedjango

Practical tutorial: Vue3+Django4 new technical practice

Practical tutorial: Vue3 Django4 new technical practice

Introduction:
With the continuous development of front-end technology, Vue.js has become the most popular front-end One of the frameworks. As a powerful and flexible Python web framework, Django is also favored by developers. This article will lead you to explore how to combine Vue3 and Django4 to achieve a new technical practice.

1. Environment setup:
First of all, we need to set up a good development environment. Make sure your computer has the latest versions of Node.js and Python installed. Then install Vue CLI and Django via the following commands:

Install Vue CLI:
```
npm install -g @vue/cli
```
Create a Vue project:
```
vue create vue-django-project
```
This will create a Vue project named vue-django-project.
Install Django:
```
pip install Django
```

2. Create a Django project:
Next, we will create a Django project and install Vue The project is integrated into it.

Create a Django project:
```
django-admin startproject django_project
```
This will create a Django project named django_project.
Create a Django application:
```
cd django_project
python manage.py startapp vueapp
```
This will create a Django application called vueapp.
Set up the Django project:
Open the django_project/settings.py file and add vueapp to INSTALLED_APPS:
```
INSTALLED_APPS = [
 ...
 'vueapp',
]
```

Then, in Add the following statement to the database settings:

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

Create a Django view:
In vueapp/views.py, add the following code:
```
from django.shortcuts import render

def index(request):
 return render(request, 'vueapp/index.html')
```
This will create a A view named index.

Create Django URL routing:
In the vueapp directory, create the urls.py file and add the following code:

from django.urls import path
from . import views

urlpatterns = [
 path('', views.index, name='index'),
]

Then , in django_project/urls.py, import vueapp.urls and add it to urlpatterns:

from django.urls import include, path

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

3. Create the Vue component:
Now, we will create the Vue component and integrate it into Django view.

Create Vue component:
In the vue-django-project/src/components directory, create a Vue component named Example.vue with the following code:

<template>
  <div>
 <h1 id="title">{{ title }}</h1>
 <p>{{ content }}</p>
  </div>
</template>

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

Compile the Vue project:
In the vue-django-project directory, execute the following command to compile the Vue project:
```
npm run build
```
This will generate a dist directory containing the compiled Vue code.

Configure Django static files:
At the end of django_project/settings.py, add the following code:

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

STATIC_URL = '/static/'

4. Integrate Vue To the Django view:
Now, we will integrate the Vue component into the Django view and access it through the URL.

Create a Django template:
In the vueapp directory, create a Django template named index.html with the following code:

{% 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>

Update Django view:
In the index view of vueapp/views.py, modify the first parameter of the render method to vueapp/index.html:
```
def index(request):
 return render(request, 'vueapp/index.html')
```

5. Run Project:
Finally, we will start the Django development server and access the project via the URL.

Start the Django development server:
In the django_project directory, execute the following command to start the Django development server:
```
python manage.py runserver
```
Access the project:
In Enter http://localhost:8000/ in the browser to access the project.

Conclusion:
Through the practice of this article, we successfully combined Vue3 and Django4 to achieve a new technical practice. Through the power of Vue3 and the flexibility of Django4, we can develop more efficient and elegant web applications. I hope this article will be helpful to everyone and help you continue to explore and innovate in the fields of Vue and Django!

The above is the detailed content of Practical tutorial: Vue3+Django4 new technical practice. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn