Vue-awesome-swiper使用教程

1. vue-awesome-swiper是vue的一款轮播插件

github地址：https://github.com/surmon-china/vue-awesome-swiper

2. Vue-awesome-swiper安装使用

//全局引入
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

//swiper代码模板
<!-- The ref attr used to find the swiper instance -->
<template>
  <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
    <!-- slides -->
    <swiper-slide>I'm Slide 1</swiper-slide>
    <swiper-slide>I'm Slide 2</swiper-slide>
    <swiper-slide>I'm Slide 3</swiper-slide>
    <swiper-slide>I'm Slide 4</swiper-slide>
    <swiper-slide>I'm Slide 5</swiper-slide>
    <swiper-slide>I'm Slide 6</swiper-slide>
    <swiper-slide>I'm Slide 7</swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
    <div class="swiper-scrollbar"   slot="scrollbar"></div>
  </swiper>
</template>

<script>
  export default {
    name: 'carrousel',
    data() {
      return {
        swiperOption: {
          // some swiper options/callbacks
          // 所有的参数同 swiper 官方 api 参数
          // ...
        }
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    mounted() {
      // current swiper instance
      // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
      console.log('this is current swiper instance object', this.swiper)
      this.swiper.slideTo(3, 1000, false)
    }
  }
</script>

3. Vue-awesome-swiper属性方法

Ⅰ. 什么是Nuxt.js:
Nuxt.js 是一个基于 Vue.js 的通用应用框架，通过对客户端/服务端基础架构的抽象组织，预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。（开箱即用）
官方地址：https://zh.nuxtjs.org/guide

Ⅱ. Nuxt安装使用

Snipaste_2019-07-12_14-51-12.jpg

Snipaste_2019-07-12_15-07-35.jpg

Ⅲ. Nuxt模板目录结构分析

重点关注：components、layouts、pages、plugins、nust.config.js目录及文件

Snipaste_2019-07-18_15-39-26.jpg

Ⅳ.Nuxt路由

➀.pages目录结构自动生成对应的路由配置

Snipaste_2019-07-18_16-00-55.jpg

➁路由跳转

• 跳转方式1.使用nuxt-link组件

注意：不能用a标签代替nuxt-link组件，虽然最终的显示效果一样，但是a标签会刷新页面

Snipaste_2019-07-18_16-08-59.jpg

• 跳转方式2.使用编程式导航this.$router.push（用于事件）

Snipaste_2019-07-18_16-18-24.jpg

③动态路由

Snipaste_2019-07-18_17-23-27.jpg

④路由参数校验

Nuxt.js 可以让你在动态路由对应的页面组件中配置一个validate方法用于校验动态路由参数的有效性。该函数有一个布尔类型的返回值，如果返回true则表示校验通过，如果返回false则表示校验未通过。

validate(data) {
  cosole.log(data)
  return true
}

Snipaste_2019-07-23_09-43-56.jpg

⑤嵌套路由

Snipaste_2019-07-23_15-38-58.jpg

父组件authors.vue的demo：
<template>
    <div class="authors">
        <h3>这是作者列表页</h3>
        <ul>
            <li v-for="item in bookList" :key="item.id">
                <!-- <nuxt-link :to="`/book/${item.id}`">{{item.name}}</nuxt-link> -->
                <!-- 将传参改为传name -->
                <nuxt-link :to="`/authors/${item.id}`">{{item.name}}</nuxt-link>
            </li>
        </ul>
        <nuxt-child></nuxt-child>
    </div>
</template>
<script>
export default {
    data(){
        return{
            bookList:[
                {name:'萧鼎',id:1},
                {name:'墨香铜臭',id:2},
                {name:'番茄',id:3},
            ]
        }
    }
}
</script>



嵌套的子组件_id文件夹下的demo
<template>
    <div class="authors-detail">
        <!-- Nuxt.js 定义带参数的动态路由，需要创建
        以下划线作为前缀的Vue文件或目录，为了避免出错我们只考虑目录 -->
        <!-- 底下这个id对应左边加了下划线的文件夹名_id -->
        这是{{$route.params.id}}号作者的详细信息
    </div>
</template>
<script>
export default {
    
    // Nuxt.js 可以让你在动态路由对应的页面组件中配置一个`validate`方法用于校验动态路由参数的有效性。
    // 该函数有一个布尔类型的返回值，如果返回true则表示校验通过，如果返回false则表示校验未通过。
    validate(obj){//默认有个obj的参数
        console.log(this);
        console.log(obj.params);// { id: '诛仙' }
        return /^\d+$/.test(obj.params.id)//用正则限制只能是数字
    }
}
</script>

Ⅴ.布局组件

Snipaste_2019-07-24_10-51-44.jpg

Snipaste_2019-07-24_10-54-11.jpg

特殊的布局组件：error布局组件（error是关键字，只能取这个名字）

Snipaste_2019-07-24_10-59-38.jpg

Ⅵ.设置全局样式

Snipaste_2019-07-24_11-07-07.jpg

Ⅶ.ElementUI使用

Snipaste_2019-07-24_19-24-07.jpg

测试的时候不要范如下错误：

Snipaste_2019-07-24_19-18-15.jpg

Ⅷ.发送请求

➀.生命周期函数：

在nuxt中，只有created以及beforeCreate两个能够在服务端正常使用

但是发异步请求不能在created生命周期函数中去发送，因为它会在前端执行（打印一下，发送前端和服务器端都会有打印信息）

Snipaste_2019-07-25_14-23-27.jpg

那么如何发送异步请求呢？

➁.asyncData的方法:可以在服务端或路由更新之前被调用, 需要注意这个函数中不能使用this

Snipaste_2019-07-25_14-42-26.jpg

③. axios的使用

Snipaste_2019-07-25_15-43-25.jpg

Ⅸ.SEO优化

➀.全局优化:在nuxt.config.js配置文件中修改

head: {
    title: '全网最好看的电影在线网站',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '韩剧、日剧、美剧，只有你想不到，没有你找不到' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

Snipaste_2019-07-31_10-17-17.jpg

➁.局部优化:去每个页面直接加入head() 方法

 head(){
        return{
            title:'豆瓣电影',
            meta:[{
                'name':'keywords',
                'content': '电影、经典电影、热映、电视剧、美剧、影评、电影院、电影票、排行、推荐'
            }]
        }
    }

Snipaste_2019-07-31_09-59-45.jpg

Ⅹ.实战项目：豆瓣电影小案例

➀.案例源码：
复制这段内容后打开百度网盘手机App，操作更方便哦
链接：https://pan.baidu.com/s/1YFdpQIGUMF28uEm8oBUfbw
提取码：iqjb

➁.获取源码后项目跑动

Snipaste_2019-07-31_10-24-51.jpg

后记：解决SEO问题不一定非得用服务端渲染来处理，特别是项目已经开发完毕，突然告诉你添加个SEO优化，这时候可以考虑vue-meta-info ，官方地址：https://github.com/muwoo/vue-meta-info