プロジェクトの初期化と基本構成を作成VUE

新しいプロジェクトの初期設定を作成します。

node_modules移動する必要はありません

国民は動きません

srcとCSSのjsのIMGフォルダ内の資産の作成

ルータフォルダindex.jsは、家庭だけルーティング設定を保持します

App.vueは、コードの唯一の5つのラインを残します

Home.vueは革新後に削除しました

アヤックスプラグインのVUE：axios

1）（プロジェクトディレクトリ内になければなりません）プラグインをインストールします。

>: cnpm install axios

2）構成main.jsにおいて：

    import axios from 'axios'
    Vue.prototype.$axios = axios;

3）任意のAJAX要求に論理的な組み立てを送信します。

   this.$axios({
        url: 'http://127.0.0.1:8000/cars/',
        method: 'get',
    }).then(response => {
        console.log(response);
        // this.cars = response.data;
    }).catch(error => {  // 网络状态码为4xx、5xx
        console.log(error);
    });

CORSクロスドメインの問題（同一生成元ポリシー）

相同：HTTP同じプロトコル、同じサーバのIPアドレス、アプリケーションポート、同じアプリ
ドメイン間：プロトコル、IPアドレス、別のポートを使用、である、クロスドメイン

Djangoのデフォルトの同一生成元ポリシーは、全体で問題があります。
Djangoのソリューション：

1）DjangoのモジュールCORSを記載：

>: pip install django-cors-headers

2）レジスタ設定モジュール構成ミドルウェアは：

    INSTALLED_APPS = [
        ...
        'corsheaders'
    ]
    MIDDLEWARE = [
        ...
        'corsheaders.middleware.CorsMiddleware'
    ]

3）設定で許可するように交差点を開きます。

    CORS_ORIGIN_ALLOW_ALL = True

Vue配置ElementUI

1）（プロジェクトディレクトリ内になければなりません）プラグインをインストールします。

    >: cnpm install element-ui

2）構成main.jsにおいて：

    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI);

Vueの設定BS環境

プラグインをインストールします。

jQueryの

>: cnpm install jquery

VUE / CLIの3構成のjQuery：vue.config.jsに配置された（なし、マニュアル新しいプロジェクトのルートディレクトリ）

const webpack = require("webpack");

module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "window.jQuery": "jquery",
                Popper: ["popper.js", "default"]
            })
        ]
        }
};

ブートストラップ

>: cnpm install bootstrap@3

VUE / CLIの3構成ブートストラップ：main.jsに配置されました

import "bootstrap"
import "bootstrap/dist/css/bootstrap.css"