[项目技巧]VUE小米商城+跨域+sass编译器封装+吸顶功能_小米商城吸顶框动态效果怎么写-CSDN博客

本文链接：https://blog.csdn.net/weixin_55371434/article/details/116571865

前端跨域三种方案

什么是跨域

在这里插入图片描述

解决方法

在这里插入图片描述

CORS 后端修改

在这里插入图片描述

JSOP跨域

在这里插入图片描述
安装插件

JSONP和CORS跨域的区别? JSONP通过js携带请求进行跨域，他不是传统的XHR请求；CORS后台处理跨域

接口代理-重要

核心思路在vue.config.js中修改配置项目
通过修改nginx服务器配置来实现（欺骗浏览器）
说明：前端修改后端不动
访问的地址不需要再加头了
前端配置代码如下：(开发环境)

module.exports = {
  // 默认加载
  devServer: {
    host: 'localhost',
    // 项目端口
    port: 8080,
    // 代理访问a代理成b再由b访问a
    proxy: {
      '/api': {
        // 代理网址
        target: 'http://mall-pre.springboot.cn',
        // 是否将主机头原点更改为url地址-这段代码重要
        changeOrigin: true,
        // 转发地址
        //如果有很多种接口 这一种就可以解决了而不是写很多拦截搞了一个虚拟地址api
        // 之后再把api设置成空只转发后面的部分
        pathRewrite: {
          '/api': ''
        }
      }
    }
  },

在这里插入图片描述

项目安装包

在这里插入图片描述

封装sass+定制化主题

在这里插入图片描述
在当前文件中引入

把他放在合适的位置；可以减少代码量

而且可以传值

在文件先@important引入
再在@include + 名称使用

图片自适应高宽

在这里插入图片描述

鼠标移动显示下拉折叠

在这里插入图片描述

实现思路

在这里插入图片描述
css
核心功能 children的高度默认0；鼠标移动高度展开；动画：子元素默认不透明度0；鼠标经过变1；高度变高

鼠标经过

性能优化 - 图片懒加载

在main.js文件中引入vue-lazeload插件并且添加配置项
在这里插入图片描述
在组件标签上面通过v-lazy

VUE 实现动画对话框

我们需要封装一个对话框怎么实现vue动画？
1.用transiton包裹对话框

			//添加动画
			<transition name="slide-fade">
			//动画框盒子
                <div class="btn" v-show='isShow'>
                //内容
                    <div :class="[activeClass,rotateClass]" @click='rotate'>关闭</div>
                </div>
            </transition>

const app = new Vue({
        el: '#app',
        data: {
            name: '点击显示模态框',
            isShow: false,
            //样式
            activeClass: 'close',
            rotateClass: '',


        },
        methods: {
            ButtonClick() {
                this.isShow = true
            },
            //点击旋转
            rotate() {
                this.rotateClass ? this.rotateClass = '' : this.rotateClass = 'rotate'
                this.isShow = false
            }
        }
    })

 .mask {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        background: rgba(0, 0, 0, .3);
    }

    .btn {
        z-index: 1000;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 200px;
        width: 400px;
        background: red;
        transition: all .3s;
    }

    .close {
        position: absolute;
        top: 0;
        right: 0;
        height: 20px;
        width: 20px;
        cursor: pointer;
        transition: all .3s;
    }

    .rotate {
        transform: rotate(90deg);
        transition: all .3s;
    }


    .slide-fade-enter-active {
        transition: all .2s linear;
        top: 0;
        opacity: 0;
    }

    .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
        top: -100%;
    }

    /* 组件进入,离开 */
    .slide-fade-enter,
    .slide-fade-leave-to {
        top: -100%;
        opacity: 0;
    }