ディレクトリ
まず、CSS、JSファイルを設定します
- 設定グローバルCSSファイル
'''main.js'''
// 配置全局css样式
// import '@/assets/css/global.css'
require('@/assets/css/global.css'); // 直接导入css文件就可以在全局中应用了- JSグローバルコンフィギュレーション・ファイル
'''settings.js'''
export default {
base_url: 'http://localhost:8000',
}
'''main.js'''
// 配置全局settings.js
import settings from '@/assets/js/settings'
Vue.prototype.$settings = settings;第二に、構成要素のUIプラグ
- インストール：
cnpm install element-ui - 環境を設定します：に
main.js設定
'''main.js'''
// 配置element-ui插件
// 1、安装：cnpm install element-ui
// 2、配置环境
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI); // VUE加载这个环境第三に、jQueryとブートストラップの構成
- インストールのjQueryとブートストラップ：
cnpm install jquery && cnpm install bootstrap@3 - 環境を設定：中JQ のルートディレクトリにvue.config.js構成は、独自の行くを作成しません
// 修改该文件内容后，只有重启，才能同步配置
const webpack = require("webpack");
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
Popper: ["popper.js", "default"]
})
]
}
};- 環境を構成：におけるBS main.jsの設定
'''main.js'''
// 配置jq+bs环境
// 1、安装：cnpm install jquery && cnpm install bootstrap@3
// 2、配置环境：jq在vue.config.js中配置
import "bootstrap" // 加载bs的逻辑
import "bootstrap/dist/css/bootstrap.css"第四に、コンフィギュレーションのAJAX要求axiosを完了するために
- インストール：
cnpm install element-ui - 環境を設定します：に
main.js設定
// 配置axios来完成前后台ajax请求
// 1、安装：cnpm install axios
// 2、配置环境
import Axios from 'axios'
Vue.prototype.$ajax = Axios; // 添加$ajax到Vue对象的属性中
// Vue.prototype.$axios = Axios;- axiosが送信したAjaxリクエスト
// vue有专门用来完成ajax请求的插件：axios
let _this = this
this.$ajax({
url: this.$settings.base_url + '/cars/',
method: 'get',
params: {
// 这里发送的是 url拼接的数据
},
data: {
// post请求携带的数据报数据
}
}).then((response) => {
console.log(response);
this.cars_data = response.data;
}).catch(error => {
console.log(error)
})注意：（重点）
これは、Djangoのバックエンドサーバポートにaxiosによって行われたエラーのフロントエンドに出になります。クロスドメインリクエストエラー。
Djangoのデフォルトの理由は、デフォルトでは唯一の要求はジャンゴフロントを送った受信終了フレームの長手方向ウェブから分離されていません。別のホストポート要求は、この問題に送信されます。
必要性を解決するためにどのようにジャンゴ・ジャンゴ・CORS-ヘッダフロントとバックナンバー（フォーカス）間で分類されたプロジェクトを解決するためのプラグインを使用します
詳細を参照してください背景を分離クロスドメイン相互作用のためのDjangoフレームワークの前に