實戰教學：Vue3+Django4全新技術實踐-Vue.js-PHP中文網

實戰教學：Vue3+Django4全新技術實踐

WBOY

發布： 2023-09-09 08:52:42

原創

1024 人瀏覽過

實戰教學：Vue3+Django4全新技術實踐

實戰教學：Vue3 Django4全新技術實踐

#引言：
隨著前端技術的不斷發展，Vue.js已經成為了最受歡迎的前端框架之一。而Django作為一個強大而靈活的Python Web框架，也備受開發者青睞。本文將帶領大家探索如何將Vue3和Django4結合起來，實現一個全新的技術實踐。

一、環境建置：
首先，我們需要建置好開發環境。確保你的電腦已經安裝了最新版本的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
```
登入後複製

#二、建立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文件，將vueapp新增到INSTALLED_APPS中：
```
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')),
]

登入後複製

三、創建Vue組件：

現在，我們將創建Vue組件並將其整合到Django視圖中。

建立Vue元件：

在vue-django-project/src/components目錄下，建立一個名為Example.vue的Vue元件，程式碼如下：

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

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

登入後複製

編譯Vue專案：
在vue-django-project目錄下，執行以下命令編譯Vue專案：
```
npm run build
```
登入後複製
這將產生一個dist目錄，其中包含編譯後的Vue代碼。
配置Django靜態檔案：
在django_project/settings.py的結尾，加入以下程式碼：
```
STATICFILES_DIRS = [
 os.path.join(BASE_DIR, 'vue-django-project/dist'),
]

STATIC_URL = '/static/'
```
登入後複製

##1、整合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的index視圖中，修改render方法的第一個參數為vueapp/index.html：
```
def index(request):
 return render(request, 'vueapp/index.html')
```
登入後複製

##c專案：
最後，我們將啟動Django開發伺服器，並透過URL存取專案。