2022.1.3项目笔记

1、vue项目中正常引入图片路径的三种方式：
https://www.cnblogs.com/zishang91/p/7594997.html

 

2、vue实现点击图片放大显示功能

https://blog.csdn.net/a772116804/article/details/115560925

 

3、vue项目中使用swiper

    （1）安装：  npm i swiper 

　　(2)在main.js中，引入swiper.css

　　　　import "swiper/swiper.min.css"

　　(3)在需要使用swiper的组件中引入swiper ，swiper必须放到mounted里 否在无效

mounted(){
new Swiper ('.swiper-container', {
loop: true,
// 如果需要分页器
pagination: '.swiper-pagination',
// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// 如果需要滚动条
scrollbar: '.swiper-scrollbar',
})
}

　　（4）在需要的地方引入

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        
        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
    </div>