Vue 各种坑总结（swiper、背景图片）

swiper 的使用

全局引入

• CDN 模式，在 index.html 直接使用。

     <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
     <script src="https://unpkg.com/swiper/js/swiper.min.js"> </script>
  

     //引入
     <div class="swiper-container">
         <div class="swiper-wrapper">
         	<img src="/static/images/topic_1_b.png" class="swiper-slide"/>
         	<img src="/static/images/topic_1_b.png" class="swiper-slide"/>
         	<img src="/static/images/topic_1_b.png" class="swiper-slide"/>
         </div>
     </div>
     
     //初始化，必须在 挂载阶段。
     mounted() {
     	new Swiper('.swiper-container', {
     	      slidesPerView: 'auto',
     	      spaceBetween: 30,
     	      pagination: {
     	        el: '.swiper-pagination',
     	        clickable: true,
     	      },
     	});
     }
  

• vue-awesome-swiper 的使用 (暂未有时间，有空编写)

背景图片为动态时

    <template>
        <div class="header" :style=" `background: url(${ bck_url }) center no-repeat;`">
            
        </div>
    </template>

当背景图片为动态且 图片路径为 src 下, 引入时 , vue 会不解析 图片地址。而 还是 字符串

正常情况下，例如 header.png 图片 会解析为 header_3.4e7ddc9.png ,

解决方法：

- 图片放在静态资源下， `static` 下