〖Vue〗小知识-实战项目-Swiper

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

通过前文对 Vue 周边的一些学习, 本文就使用 Vue 项目实战用到一些知识点作下总结: 配置请求跨域处理 和 Swiper录播图的应用-及组件化单独分离出来(多个页面会用到).

Vue 实战项目

用到前后端数据请求, 需要配置一下代理, 跨域请求处理:

在 config.js 中配置代理 以及一些别名简写:

'use strict'
const path = require('path')
const utils = require('./utils')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
    	"/mz":{
    		"target": "https://m.yourtarget.com",
    		"changeOrigin": true,
    		"pathRewrite":{
                /// 这里路径重写 将 已 /mz 开头的替换为 / 并在前面拼接上 target 后就是请求的url地址
    			"/mz": "/" 
    		}
    	}
    },
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      '#': resolve('node_modules')
    }
  },

实战练手小项目 - 轮播图部分

在项目中用到轮播图的地方有很多, 故在项目练手实战中必然要加入这一元素::

cnpm i swiper --save

/// 模块化单独分离一个 Swiper 组件 /// components/common/Swiper.vue

<template>
  <div>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) in billboard" :key="index">
          <img :src="item.imageUrl" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import Swiper from 'swiper'
  import '#/swiper/dist/css/swiper.css'
  export default {
    data() {
      return {
        billboard: [], /// 用来存储请求到的数据
      }
    },
    created() {
      this.$http
        .get('/mz/v4/api/billboard/home', {
          params: {
            __t: new Date().getTime(),
          },
        })
        .then((res) => {
          console.log(res)
          this.billboard = res.data.data.billboards
        })
    },
    watch: {
      billboard() {
        this.$nextTick(() => {
          var mySwiper = new Swiper('.swiper-container', {
            loop: true, /// 循环模式选项
            autoplay: {
              delay: 3000,
              disableOnInteraction: false, /// false: 触碰到自动切换也不会停止.
            },
          })
        })
      },
    },
  }
</script>
<style lang="scss">
  .swiper-container {
    width: 100%;
  }
  img {
    max-width: 100%;
  }
</style>

$nextTick

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调, 在修改数据之后使用 $nextTick, 则可以在回调中获取更新后的 DOM