快速入门：Vue3+Django4全栈开发入门指南

一、Vue3介绍

Vue3是一款由Evan You开发的轻量级JavaScript框架，用于开发可复用的Web组件。Vue3主要特点包括更快的渲染速度、更好的TypeScript集成以及Composition API等新的功能。Composition API让开发人员能够更好地组织代码逻辑，并促进代码重用。

// Vue3组件示例代码
<template>
  <div>
    <h1>Hello, {{ name }}!</h1>
    <p>{{ message }}</p>
  </div>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'HelloWorld',
  props: {
    name: {
      type: String,
      default: 'Vue'
    }
  },
  setup(props) {
    const message = 'Welcome to Vue3';
    return { message };
  }
});
</script>

二、Django4简介

Django是由Django Software Foundation开发的一款基于Python的Web框架。用Django开发Web应用可以快速且高效，Django4是Django的最新版本，相较于之前的版本，Django4具有更好的性能和更好的异步支持，更加易于使用和扩展。

# Django视图函数示例代码
from django.http import HttpResponse
def hello(request):
    return HttpResponse("Hello, Django4!")

三、Vue3 + Django4全栈开发

3.1 创建Django项目

使用Django4开发Web应用，首先需要创建一个新的Django项目。可以使用以下命令创建一个名为myproject的新项目。

django-admin startproject myproject

在创建Django项目后，需要安装Django和其他必要的Python包。可以使用以下命令在虚拟环境中安装所需的包。

pip install Django
pip install djangorestframework

3.2 创建Vue3应用

使用Vue3创建Web应用，可以使用Vue CLI，它是官方提供的Vue工具。Vue CLI可以通过以下命令安装。

npm install -g @vue/cli

在安装Vue CLI后，可以使用以下命令创建一个新的Vue3应用。

vue create myapp

3.3 整合Vue3和Django4

要将Vue3与Django4集成，可以使用Django REST Framework。Django REST Framework是一个用于构建RESTful Web API的强大框架。接下来，需要在Django项目中安装Django REST Framework，可以使用以下命令安装。

pip install djangorestframework

为了通过Django REST Framework向Vue3应用提供数据，需要创建一个API视图。以下是一个简单的视图函数示例。

# Django视图函数示例代码
from rest_framework import generics
from myapp.models import MyModel
from myapp.serializers import MyModelSerializer
class MyModelListCreate(generics.ListCreateAPIView):
    queryset = MyModel.objects.all()
    serializer_class = MyModelSerializer

其中MyModel代表Django模型名称，而MyModelSerializer是用于序列化和反序列化模型实例的Django REST Framework序列化器。

在创建了API视图的Django项目中，可以通过Vue3来访问API端点并获取数据。以下是一个读取API端点数据的Vue3组件示例。

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  name: 'MyComponent',
  data() {
    return {
      items: []
    };
  },
  created() {
    axios.get('/api/mymodels/').then(response => {
      this.items = response.data;
    });
  }
};
</script>

四、结论

本文介绍了如何使用Vue3和Django4开发全栈Web应用。Vue3可以用于快速构建可复用的Web组件，而Django4则提供了一个稳健且高效的Web框架，并且可以与Vue3很好地集成。