실용적인 튜토리얼: Vue3+Django4 새로운 기술 실습-View.js-php.cn

집

웹 프론트엔드

View.js

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 09, 2023 am 08:52 AM

vue관행django

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

실용 튜토리얼: 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 id="title">{{ 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

Vue常见面试题汇总（附答案解析）Apr 08, 2021 pm 07:54 PM

本篇文章给大家分享一些Vue面试题（附答案解析）。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

5 款适合国内使用的 Vue 移动端 UI 组件库May 05, 2022 pm 09:11 PM

本篇文章给大家分享5 款适合国内使用的 Vue 移动端 UI 组件库，希望对大家有所帮助！

vue中props可以传递函数吗Jun 16, 2022 am 10:39 AM

vue中props可以传递函数；vue中可以将字符串、数组、数字和对象作为props传递，props主要用于组件的传值，目的为了接收外面传过来的数据，语法为“export default {methods: {myFunction() {// ...}}};”。

手把手带你利用vue3.x绘制流程图Jun 08, 2022 am 11:57 AM

利用vue3.x怎么绘制流程图？下面本篇文章给大家分享基于 vue3.x 的流程图绘制方法，希望对大家有所帮助！

如何覆盖组件库样式？React和Vue项目的解决方法浅析May 16, 2022 am 11:15 AM

如何覆盖组件库样式？下面本篇文章给大家介绍一下React和Vue项目中优雅地覆盖组件库样式的方法，希望对大家有所帮助！

聊聊vue指令中的修饰符，常用事件修饰符总结May 09, 2022 am 11:07 AM

本篇文章带大家聊聊vue指令中的修饰符，对比一下vue中的指令修饰符和dom事件中的event对象，介绍一下常用的事件修饰符，希望对大家有所帮助！

通过9个Vue3 组件库，看看聊前端的流行趋势！May 07, 2022 am 11:31 AM

本篇文章给大家分享9个开源的 Vue3 组件库，通过它们聊聊发现的前端的流行趋势，希望对大家有所帮助！

react与vue的虚拟dom有什么区别Apr 22, 2022 am 11:11 AM

react与vue的虚拟dom没有区别；react和vue的虚拟dom都是用js对象来模拟真实DOM，用虚拟DOM的diff来最小化更新真实DOM，可以减小不必要的性能损耗，按颗粒度分为不同的类型比较同层级dom节点，进行增、删、移的操作。

See all articles

핫 AI 도구

뜨거운 도구

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.