実践的なチュートリアル: Vue3+Django4 の新しい技術実践-Vue.js-php.cn

実践的なチュートリアル: Vue3+Django4 の新しい技術実践

WBOY

リリース： 2023-09-09 08:52:42

オリジナル

1021 人が閲覧しました

実践的なチュートリアル: Vue3+Django4 の新しい技術実践

実践的なチュートリアル: Vue3 Django4 の新しい技術実践

はじめに:
フロントエンドテクノロジの継続的な開発により、Vue.js が最も人気のあるフロントエンドになりました。 -end フレームワークの 1 つ。 Django は、強力で柔軟な Python Web フレームワークとして、開発者にも好まれています。この記事では、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 ファイルを開き、vueapp を INSTALLED_APPS に追加します:
```
INSTALLED_APPS = [
 ...
 'vueapp',
]
```
ログイン後にコピー

次に、 in データベース設定に次のステートメントを追加します:

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/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
```
ログイン後にコピー
これにより、コンパイルされた Vue コード。
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
```
ログイン後にコピー
In ブラウザに http://localhost:8000/ と入力して、プロジェクトにアクセスします。

結論:

この記事の実践を通じて、私たちは Vue3 と Django4 をうまく組み合わせて、新しい技術的な実践を達成することができました。 Vue3 のパワーと Django4 の柔軟性により、より効率的でエレガントな Web アプリケーションを開発できます。この記事が皆様のお役に立ち、Vue と Django の分野で探究と革新を続けるのに役立つことを願っています。

以上が実践的なチュートリアル: Vue3+Django4 の新しい技術実践の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。