vue项目安装插件配置

vue安装ajax插件：axios

• 安装插件 在项目目录下安装

  cnpm install axios

• 在main.js中配置

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

• 在一个组件的逻辑中发送ajax请求

  // 完成ajax请求后台，获取数据库中的数据
  this.$axios({
    url: this.$settings.base_url + '/cars/',
    method: 'post',
    params: {  // url拼接参数：任何请求都可以携带
        a:1,
        b:2,
        c:3
    },
    data: {   // 数据包参数：get请求是无法携带的
        x: 10,
        y: 20
    }
  }).then(response => {
    // console.log(response);
    this.cars = response.data;
  }).catch(error => {
    console.log(error);
  })

CORS跨域问题（同源策略）

同源：http协议相同、服务器ip地址相同、app应用端口相同

跨域：协议、ip地址、应用端口有一个不同，就是跨域

django默认是同源策略，存在跨域问题。

解决方案：

• django安装cors模块：

  pip install django-cors-headers

• 在settings文件中注册模块，配置中间件：

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

• 在settings开启允许跨域：

  CORS_ORIGIN_ALLOW_ALL = True

Vue配置ElementUI

• 安装插件（在项目目录下）

  cnpm install element-ui

• 在main.js中配置：

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

• 使用：看官方文档 复制粘贴

Vue配置jQuery + bootstrap

• 先安装jQuery

  cnpm install jquery

• 在vue项目中配置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"]
              })
          ]
        }
  };

• 安装bootstrap插件

  cnpm install bootstrap@3

• 在vue项目中配置 bootstrap，在main.js 中配置

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