zoukankan      html  css  js  c++  java
  • 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)以对象形式使用
    '''
    
  • 相关阅读:
    Python 类中方法的内部变量,命名加'self.'变成 self.xxx 和不加直接 xxx 的区别
    用foreach遍历 datagridView 指定列所有的内容
    treeView1.SelectedNode.Level
    YES NO 上一个 下一个
    正则 单词全字匹配查找 reg 边界查找 精确匹配 只匹配字符 不含连续的字符
    抓取2个字符串中间的字符串
    sqlite 60000行 插入到数据库只用不到2秒
    将多行文本以单行的格式保存起来 读和写 ini
    将秒转换成时间格式
    richtextbox Ctrl+V只粘贴纯文本格式
  • 原文地址:https://www.cnblogs.com/mqhpy/p/12074733.html
Copyright © 2011-2022 走看看