2022/4/20

以前总是或多或少学习过webpack，但不知道它在实际项目中的应用是怎么样的。(原来在build目录里，可以配置一些东西，比如alias，可以通过修改路径别称来达到缩短路径目的。）
举例：所谓的webpack配置：就是在build目录里，有webpack.base.conf.js,webpack.dev.conf.js等，这里可以配置一些东西，可以修改。我们要知道webpack里面的文档写的什么内容。
比如webpack.base.conf.js中，alias 里可以设置目录别称。

轮播图插件：vue-awesome-swiper
插件地址：https://github.com/surmon-china/vue-awesome-swiper
安装：npm install swiper vue-awesome-swiper@2.6.7 --save
全局使用/main.js：
import VueAwesomeSwiper from ‘vue-awesome-swiper’
import ‘swiper/dist/css/swiper.css’
Vue.use(VueAwesomeSwiper)
有了插件以后就可以写组件了。创建一个Swiper.vue，自定义组件。
（注意，这里的swipter,swiper-slide都是下载的插件。）

<template>
  <div class="wrapper">
    <swiper :options="swiperOption" v-if="showSwiper">
      <swiper-slide v-for="item of list" :key="item.id">
        <img class="swiper-img" :src="item.imgUrl" />
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'HomeSwiper',
  props: {
    list: Array
  },
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true
      }
    }
  },
  computed: {
    showSwiper () {
      return this.list.length
    }
  }
}
</script>

<style lang="stylus" scoped>
  .wrapper >>> .swiper-pagination-bullet-active(这里.icons没有设置overflow:hidden是因为.swiper-container自带overflow:hidden)
    background: #fff
  .wrapper
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 31.25%
    background: #eee
    .swiper-img
      width: 100%
</style>

图片加载的缺陷：但没有加载完的时候，图片的高度是0，当加载完后，图片才有高度，这样就会造成图片下方的元素出现抖动情况。
想要改掉这个bug，就要利用图片的宽高权限，在图片外再加一个盒子。

width:100%,padding-bottom:31.25% 这就是宽高比，高用padding-bottom，不可以用height,因为height:31.25%不是相对于宽31.25%，而是相对于父级31.25%，这不是我们想要的。
31.25%这个数字源于图片的宽高比。

代码（stylus格式)

.wrapper
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 31.25%
    background: #eee
    .swiper-img
      width: 100%

（扩展：在移动端里，一个区域，用width,padding-bottom来设置大小，记得设置overflow:hidden，这样代表有一个BFC区域。移动端里区域通过宽高百分比，也就是width和padding-bottom的比例。）
（父盒子的宽高定好了，子盒子的宽高是相对于父盒子来的，比如如下子盒子icon的padding-bottom是25%，它的高度便是父盒子高度的1/2，同理，width:25%,那么在宽方面，它也是父盒子的1/4）
实例代码：

 .icons >>> .swiper-container
    height: 0
    padding-bottom: 50%
  .icons
    margin-top: .1rem
    .icon
      position: relative
      overflow: hidden
      float: left
      width: 25%
      height: 0
      padding-bottom: 25%

（注，用float:left，一个25%，icon一行最多放四个，如果超过四个需要另起一行）

关于overflow:hidden:设置BFC区域，这样就可以防止子盒子超出父盒子规定的大小。（按术语来讲，这叫做父元素塌陷）

样式穿透（>>>)：解决由scoped引起的子组件样式无法通过父组件进行渲染的问题，使得父组件也可以通过修改样式来渲染子组件样式。（.swiper-pagination-bullet-active样式是子组件的，父组件想改子组件样式就得用>>>）

.wrapper >>> .swiper-pagination-bullet-active
background: #fff