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

ホームページ

ウェブフロントエンド

Vue.js

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 09, 2023 am 08:52 AM

vue 練習する django

実践的なチュートリアル: 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 id="title">{{ 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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7467

CakePHP チュートリアル

1376

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

vue.jsでJSファイルを参照する方法 Apr 07, 2025 pm 11:27 PM

vue.jsでJSファイルを参照するには3つの方法があります。タグ;; mounted（）ライフサイクルフックを使用した動的インポート。 Vuex State Management Libraryを介してインポートします。

VueでWatchの使用方法 Apr 07, 2025 pm 11:36 PM

Vue.jsの監視オプションにより、開発者は特定のデータの変更をリッスンできます。データが変更されたら、Watchはコールバック関数をトリガーして更新ビューまたはその他のタスクを実行します。その構成オプションには、すぐにコールバックを実行するかどうかを指定する即時と、オブジェクトまたは配列の変更を再帰的に聴くかどうかを指定するDEEPが含まれます。

VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。

怠zyなロードVUEとはどういう意味ですか？ Apr 07, 2025 pm 11:54 PM

Vue.jsでは、Lazy Loadingを使用すると、コンポーネントまたはリソースを必要に応じて動的にロードすることができ、初期ページの読み込み時間を短縮し、パフォーマンスを改善できます。特定の実装方法には、＆lt; Keep-Alive＆gt;および＆lt;コンポーネントは＆gt;コンポーネント。怠zyなロードは、FOUC（スプラッシュ画面）の問題を引き起こす可能性があり、不必要なパフォーマンスのオーバーヘッドを避けるために怠zyなロードが必要なコンポーネントにのみ使用する必要があることに注意してください。

Vueはマーキー/テキストスクロール効果を実現します Apr 07, 2025 pm 10:51 PM

CSSアニメーションまたはサードパーティライブラリを使用して、VUEでマーキー/テキストスクロール効果を実装します。この記事では、CSSアニメーションの使用方法を紹介します。スクロールテキストを作成し、テキストを＆lt; div＆gt;をラップします。 CSSアニメーションを定義し、オーバーフローを設定します：非表示、幅、アニメーション。キーフレームを定義し、アニメーションの開始と終了時にtranslatex（）を設定します。期間、スクロール速度、方向などのアニメーションプロパティを調整します。

VUEのボタンに関数を追加する方法 Apr 08, 2025 am 08:51 AM

HTMLテンプレートのボタンをメソッドにバインドすることにより、VUEボタンに関数を追加できます。 VUEインスタンスでメソッドを定義し、関数ロジックを書き込みます。

Vueのバージョンを照会する方法 Apr 07, 2025 pm 11:24 PM

Vue Devtoolsを使用してブラウザのコンソールでVueタブを表示することにより、Vueバージョンを照会できます。 NPMを使用して、「NPM List -G Vue」コマンドを実行します。 package.jsonファイルの「依存関係」オブジェクトでVueアイテムを見つけます。 Vue CLIプロジェクトの場合、「Vue -Version」コマンドを実行します。＆lt; script＆gt;でバージョン情報を確認してくださいVueファイルを参照するHTMLファイルにタグを付けます。

Vueによる前のページに戻る方法 Apr 07, 2025 pm 11:30 PM

vue.jsには、前のページに戻る4つの方法があります。$ router.go（-1）$ router.back（）outes＆lt; router-link to =＆quot;/＆quot; Component Window.history.back（）、およびメソッド選択はシーンに依存します。

See all articles

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

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック