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);
    });
特别注意!!!
在main.js中配置    
import axios from 'axios'
Vue.prototype.$axios = axios;    
'''

CORS跨域问题(同源策略)

"""
同源:http协议相同、ip服务器地址相同、app应用端口相同
跨域:协议、ip地址、应用端口有一个不同,就是跨域

Django默认是同源策略,存在跨越问题。
Django的解决方案:

1)Django按照cors模块:
	>: pip install django-cors-headers
	
2)在settings注册模块,配置中间件:
    INSTALLED_APPS = [
        ...
        'corsheaders'
    ]
    MIDDLEWARE = [
        ...
        'corsheaders.middleware.CorsMiddleware'
    ]

3)在settings开启允许跨越:
	CORS_ORIGIN_ALLOW_ALL = True
"""

Vue设置全局cookies样式

'''
配置全局cookies样式
下载:cnpm install vue-cookies
import cookies from 'vue-cookies'
Vue.prototype.$cookies = cookies;
'''

Vue设置全局css样式

'''
配置全局css样式
import '@/assets/css/global.css'
require('@/assets/css/global.css');
'''

Vue设置全局js样式

'''
import settings from '@/assets/js/settings'
Vue.prototype.$settings = settings;
'''

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);
	

3)使用:
	灵魂:复制粘贴
	
"""

Vue配置bootstrap,提前要配置jQuery

'''
安装插件:
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"]
            })
        ]
 		}
};
BootStrap
cnpm install bootstrap@3
vue/cli 3 配置BootStrap:在main.js中配置
import "bootstrap"
import "bootstrap/dist/css/bootstrap.css"
或者
import BootStrip from "bootstrap"
import "bootstrap/dist/css/bootstrap.css"
Vue.use(BootStrip)以对象形式使用
'''
posted @ 2019-12-20 19:17  MiaoQinHong  阅读(615)  评论(0编辑  收藏  举报