Vue front-end learning project configuration

First, configure the CSS, JS files

• Configuring Global CSS file

'''main.js'''

// 配置全局css样式
// import '@/assets/css/global.css'
require('@/assets/css/global.css'); // 直接导入css文件就可以在全局中应用了

• JS global configuration file

'''settings.js'''
export default {
    base_url: 'http://localhost:8000',
}


'''main.js'''
// 配置全局settings.js
import settings from '@/assets/js/settings'
Vue.prototype.$settings = settings;

Second, the configuration element-ui plug

• Installation :cnpm install element-ui
• Configure the environment : in main.jsconfigurations

'''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加载这个环境

Third, the configuration of jQuery and BootStrap

• Installation jQuery and BootStrap :cnpm install jquery && cnpm install bootstrap@3
• Configure the environment : jq in vue.config.js in the root directory of the configuration, do not create your own go

// 修改该文件内容后，只有重启，才能同步配置
const webpack = require("webpack");

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

• Configure the environment : bs in main.js configuration

'''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"

Fourth, to complete the configuration ajax request axios

• Installation :cnpm install element-ui
• Configure the environment : in main.jsconfigurations

// 配置axios来完成前后台ajax请求
// 1、安装：cnpm install axios
// 2、配置环境
import Axios from 'axios'
Vue.prototype.$ajax = Axios;    // 添加$ajax到Vue对象的属性中
// Vue.prototype.$axios = Axios;

• Ajax request transmitted by axios

// 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)
})

Note :( emphasis)

It will be out on the front end of an error made by axios to django backend server port. Cross-domain request error .

Django default reason is not separated from the end frame a longitudinal web, which by default only receives requests sent django front. Different host port request will be sent to this problem.

How to solve the need django django-cors-headers use plug-ins to solve classified projects across the front and back issues (focus)

See detailed before the Django framework for cross domain interaction isolated background