webpack-vue_2：轮播图

原稿：语雀 · webpack-vue_2：轮播图 · 原目录：Webpack › Demo › Webpack 搭建 Vue 项目 › webpack-vue_2：轮播图

在 webpack-vue_1 中没有尝试使用静态资源，无法确定项目能否正确处理图片资源，在这一版本尝试引入图片，实现一个 Vue 轮播图组件

项目修改

基于 webpack-vue_1 的代码

创建 src/assets/imgs 用于放置图片
创建 src/components 用于放置自定义 vue 组件

实现轮播图组件

创建 src/components/MySlides.vue，编写组件

轮播图的实现思路：假设一个3张图的轮播组件，每张图大小 m*n 2. 提供一个父容器，宽度为 m，设置 overflow:hidden，隐藏溢出 4. 设置一个 items 元素，该元素宽度为 3*m，在该元素上设置 animation 6. 设置 m 个 item 元素，每个元素都设为浮动的，则3个 item 会在 items 盒子中浮动成一排，而受制于父容器隐藏溢出，实际上只有宽度 m 的区域看见 8. 通过 animation，调整不同帧时的 margin-left，实现切换图片

下面是组件完整代码，使用 scss 写样式表，方便使用变量，注意图片 url() 中 “../assets/imgs/XXX.jpg”

<template>
  <div class="slide-container">
    <div class="slide-items">

    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgs: [{ name: 'a' }, { name: 'b' }, { name: 'c' }]
    }
  }
}
</script>
<style lang="scss" scoped>
$container-width: 800px;
$container-height: 450px;
$imgs-number: 3;

.slide-container {
  overflow: hidden;
  width: $container-width;
  height: $container-height;
  margin: auto;
  color: #fff;
}
.slide-items {
  width: $container-width * $imgs-number;
  animation: marginLeft 10.5s infinite;
}

.slide-items .slide-item {
  float: left;
  width: $container-width;

之后修改 App.vue，引入组件

<template>
  <div id="app">
    <p class="hello">{{ message }}</p>
    <my-slides></my-slides>
  </div>
</template>

<script>
import MySlides from "./components/MySlides";
export default {
  name: 'App',
  components: { "my-slides": MySlides },
  data() {
    return {
      message: 'hello Webpack! 😎'
    }
  }
}
</script>

<style scoped>
.hello {
  color: #000000;
  text-align: center;
  font-size: 20px;
}
</style>

打包编译

执行 npm run serve，实现如下效果

打开调试窗口，可以看到打包后运行的页面中，图片路径已经被自动修改为打包后路径 ../img

这是因为在 webpack 配置中使用了url-loader，通过 options 设置 10kb 为上限，小于该值的文件转为 base64 注入文档，否则使用 file-loader 放入指定路径，在代码中通过相对 URL 去引用输出的文件（详情见 url-load 说明）

完整代码见：https://github.com/NepJNQ/Front-end-Baby/tree/master/webpack/webpack-vue

项目修改#

实现轮播图组件#

打包编译#

项目修改

实现轮播图组件

打包编译