vue を django フレームワークに配置する場合、何を設定する必要がありますか?

Vue.js は、最新の Web アプリケーションを構築するための多くのツールとライブラリを提供する人気のある JavaScript フレームワークです。 Django は、高品質の Web アプリケーションを開発するための強力な Python Web フレームワークです。 Vue.js と Django はうまく連携するため、Vue.js を Django フレームワークに組み込む際にはいくつかの設定が必要です。

以下は、構成する必要があるいくつかの側面です:

Vue.js の構成

Vue.js を Django に追加するには、最初のステップは Vue.js を追加することです。アプリケーションは Django アプリケーションから分離されています。これは、Django で「static」というフォルダーを作成することで実現できます。 Vue.js アプリケーション ファイルをこのフォルダーに配置する必要があります。

vue-cli スキャフォールディング ツールを使用して、Vue.js アプリケーションを作成できます。 npm を使用して vue-cli をインストールし、アプリケーションを作成し、生成されたファイルを静的フォルダーにコピーします。

npm install -g vue-cli
vue create my-vue-app
cd my-vue-app
npm run build
cp -r dist/* path/to/django/static/

上記のコマンドは、Vue.js アプリケーションをビルドし、生成されたファイルを Django の静的フォルダーにコピーします。 Django アプリケーションで Vue.js を使用できるようになりました。

Django の構成

次に、Vue.js アプリケーションが正しく読み込まれるように、Django プロジェクトでいくつかの構成を行う必要があります。

静的ファイルの構成

静的ファイルの場所を Django に指示する必要があります。これは settings.py ファイルで実行できます。次の内容をファイルに追加します。

# settings.py
STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

上記のコードは、STATICFILES_DIRS で静的ファイルを探すように Django に指示します。これはプロジェクト内に作成された static というフォルダーです。

設定 URL

Vue.js アプリケーションからのリクエストを処理する方法を Django に伝える必要があります。これは、Django の URL ルーティング システムを使用して実行できます。アプリケーション ルーティングを構成するには、urls.py ファイルに次のコードを追加します。

# urls.py
from django.urls import path
from django.views.generic import TemplateView

urlpatterns = [
    path('', TemplateView.as_view(template_name='index.html')),
    path('api/', include('api.urls')),
]

上記のコードは、すべてのリクエストを「index.html」という名前のテンプレート ビューにリダイレクトします。これは、Vue.js アプリケーションへのエントリ ポイントです。

テンプレートの構成

最後に、Django でテンプレート システムを構成する必要があります。これは、Django の組み込みテンプレート エンジンを使用して実行できます。テンプレートを構成するには、settings.py ファイルに次のコードを追加します。

# settings.py
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            os.path.join(BASE_DIR, 'templates'),
        ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

上記のコードは、Django に TEMPLATES でテンプレート ファイルを検索するように指示します。プロジェクト内に作成された「templates」というフォルダーです。

結論

Vue.js を Django フレームワークに追加するには、いくつかの構成が必要です。まず、Vue.js アプリケーション ファイルを静的フォルダーに追加する必要があります。次に、Vue.js アプリケーションが正しく読み込まれるように、Django で構成を行います。これには、静的ファイル、アプリケーションのルーティング、テンプレート システムの構成が含まれます。上記の手順を完了すると、Django で Vue.js アプリケーションを正常に使用できるようになります。

以上がvue を django フレームワークに配置する場合、何を設定する必要がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。