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

Table of Contents

Home

Web Front-end

Vue.js

Practical tutorial: Vue3+Django4 new technical practice

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 09, 2023 am 08:52 AM

vue practice django

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
```
Copy after login
Create a Vue project:
```
vue create vue-django-project
```
Copy after login
This will create a Vue project named vue-django-project.
Install Django:
```
pip install Django
```
Copy after login

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
```
Copy after login
This will create a Django project named django_project.
Create a Django application:
```
cd django_project
python manage.py startapp vueapp
```
Copy after login
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',
]
```
Copy after login

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

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

Copy after login

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')
```
Copy after login
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'),
]
```
Copy after login

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')),
]

Copy after login

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>

Copy after login

Compile the Vue project:
In the vue-django-project directory, execute the following command to compile the Vue project:
```
npm run build
```
Copy after login
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/'
```
Copy after login

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>

Copy after login

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')
```
Copy after login

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
```
Copy after login
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 of this Website

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

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

1 months ago By DDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

1 months ago By DDD

R.E.P.O. Best Graphic Settings

2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

1 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7393

Java Tutorial

1630

CakePHP Tutorial

1358

Laravel Tutorial

1268

PHP Tutorial

1217

Related knowledge

Why is there no page request information on the console network after vue-router jump? Apr 04, 2025 pm 05:27 PM

Why is there no page request information on the console network after vue-router jump? When using vue-router for page redirection, you may notice a...

How to implement the photo upload function of high-photographers of different brands on the front end? Apr 04, 2025 pm 05:42 PM

How to implement the photo upload function of different brands of high-photographers on the front end When developing front-end projects, you often encounter the need to integrate hardware equipment. for...

How to use Vue to implement electronic quotation forms with single header and multi-body? Apr 04, 2025 pm 11:39 PM

How to implement electronic quotation forms with single header and multi-body in Vue. In modern enterprise management, the electronic processing of quotation forms is to improve efficiency and...

Vue Material Year Calendar plug-in: What should I do if the calendar does not update the selected status after activeDates.push? Apr 04, 2025 pm 05:00 PM

About VueMaterialYear...

How to achieve segmentation effect with 45 degree curve border? Apr 04, 2025 pm 11:48 PM

Tips for Implementing Segmenter Effects In user interface design, segmenter is a common navigation element, especially in mobile applications and responsive web pages. ...

How to use el-table to implement table grouping, drag and drop sorting in Vue2? Apr 04, 2025 pm 07:54 PM

Implementing el-table table group drag and drop sorting in Vue2. Using el-table tables to implement group drag and drop sorting in Vue2 is a common requirement. Suppose we have a...

Does JavaScript naming specification raise compatibility issues in Android WebView? Apr 04, 2025 pm 07:15 PM

JavaScript Naming Specification and Android...

How to make sure the bottom of a 3D object is fixed on the map using Mapbox and Three.js in Vue? Apr 04, 2025 pm 06:42 PM

How to use Mapbox and Three.js in Vue to adapt three-dimensional objects to map viewing angles. When using Vue to combine Mapbox and Three.js, the created three-dimensional objects need to...

See all articles