집 > 기사 > 웹 프론트엔드 > 실용적인 튜토리얼: Vue3+Django4 새로운 기술 실습

실용적인 튜토리얼: Vue3+Django4 새로운 기술 실습

WBOY원래의: 2023-09-09 08:52:42892검색

실용 튜토리얼: Vue3+Django4 새로운 기술 실습

소개:
프론트 엔드 기술의 지속적인 개발로 Vue.js는 가장 인기 있는 프론트 엔드 프레임워크 중 하나가 되었습니다. 강력하고 유연한 Python 웹 프레임워크인 Django는 개발자들에게도 선호됩니다. 이 기사에서는 Vue3과 Django4를 결합하여 새로운 기술을 구현하는 방법을 살펴보겠습니다.

1. 환경 설정:
먼저 개발 환경을 설정해야 합니다. 컴퓨터에 최신 버전의 Node.js 및 Python이 설치되어 있는지 확인하세요. 그런 다음 다음 명령을 통해 Vue CLI 및 Django를 설치합니다.

Vue CLI 설치:
```
npm install -g @vue/cli
```
Vue 프로젝트 만들기:
```
vue create vue-django-project
```
이렇게 하면 vue-django-project라는 Vue 프로젝트가 생성됩니다.
Django 설치:
```
pip install Django
```

2. Django 프로젝트 생성:
다음으로 Django 프로젝트를 생성하고 Vue 프로젝트를 여기에 통합하겠습니다.

Django 프로젝트 생성:
```
django-admin startproject django_project
```
이렇게 하면 django_project라는 Django 프로젝트가 생성됩니다.
Django 앱 만들기:
```
cd django_project
python manage.py startapp vueapp
```
이렇게 하면 vueapp이라는 Django 앱이 만들어집니다.
Django 프로젝트 설정:
django_project/settings.py 파일을 열고 INSTALLED_APPS에 vueapp을 추가합니다.
```
INSTALLED_APPS = [
 ...
 'vueapp',
]
```

그런 다음 데이터베이스 설정에 다음 문을 추가합니다.

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

Django 뷰 만들기 :
vueapp/views.py에 다음 코드를 추가하세요.
```
from django.shortcuts import render

def index(request):
 return render(request, 'vueapp/index.html')
```
이렇게 하면 index라는 뷰가 생성됩니다.
Django URL 경로 생성:
vueapp 디렉터리에서 urls.py 파일을 생성하고 다음 코드를 추가합니다.
```
from django.urls import path
from . import views

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

그런 다음 django_project/urls.py에서 vueapp.urls를 가져와 urlpatterns에 추가합니다. :

from django.urls import include, path

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

3. Vue 컴포넌트 생성:
이제 Vue 컴포넌트를 생성하여 Django 뷰에 통합하겠습니다.

Vue 구성 요소 만들기:
vue-django-project/src/comComponents 디렉터리에서 example.vue라는 Vue 구성 요소를 만듭니다. 코드는 다음과 같습니다.

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

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

Vue 프로젝트를 컴파일합니다.
In vue -django -project 디렉토리에서 다음 명령을 실행하여 Vue 프로젝트를 컴파일합니다.
```
npm run build
```
이렇게 하면 컴파일된 Vue 코드가 포함된 dist 디렉토리가 생성됩니다.

Django 정적 파일 구성:
django_project/settings.py 끝에 다음 코드를 추가합니다.

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

STATIC_URL = '/static/'

4. Vue를 Django 뷰에 통합합니다.
이제 Vue 구성 요소를 Django 뷰이며 URL을 통해 액세스됩니다.

Django 템플릿 생성:
vueapp 디렉토리에서 index.html이라는 Django 템플릿을 생성합니다. 코드는 다음과 같습니다.

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

Django 뷰 업데이트:
vueapp/views.py의 인덱스 뷰에서, 수정 render 메소드의 첫 번째 매개변수는 vueapp/index.html입니다:
```
def index(request):
 return render(request, 'vueapp/index.html')
```

5. 프로젝트 실행:
마지막으로 Django 개발 서버를 시작하고 URL을 통해 프로젝트에 액세스합니다.

Django 개발 서버 시작:
django_project 디렉터리에서 다음 명령을 실행하여 Django 개발 서버를 시작합니다.
```
python manage.py runserver
```
프로젝트에 액세스합니다.
액세스하려면 브라우저에 http://localhost:8000/을 입력합니다. 프로젝트.

결론:
이 글의 실습을 통해 우리는 Vue3과 Django4를 성공적으로 결합하고 새로운 기술 실습을 구현했습니다. Vue3의 강력한 기능과 Django4의 유연성을 통해 보다 효율적이고 우아한 웹 애플리케이션을 개발할 수 있습니다. 이 기사가 모든 사람에게 도움이 되고 Vue 및 Django 분야를 계속해서 탐색하고 혁신하는 데 도움이 되기를 바랍니다.

위 내용은 실용적인 튜토리얼: Vue3+Django4 새로운 기술 실습의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Python django node.js vue.js html 前端框架 JS 数据库 http

성명：

이전 기사：구성 요소 코드를 더 잘 구성하고 관리하기 위해 Vue 3에서 결합된 API를 알아보세요.다음 기사：구성 요소 코드를 더 잘 구성하고 관리하기 위해 Vue 3에서 결합된 API를 알아보세요.