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"
    
posted @ 2019-12-22 20:09  SetCreed  阅读(797)  评论(0编辑  收藏