Vue.js-Day06-PM【项目实战(附带 完整项目源码)-day01-pm：轮播组件（使用、安装依赖、具体操做过程）、favicon详细制做】

Vue.js实训【基础理论(5天)+项目实战(5天)】博客汇总表【详细笔记】

实战项目源码【连接：https://pan.baidu.com/s/1r0Mje3Xnh8x4F1HyG4aQTA   提取码：n6ol】

目   录

三、轮播组件

3.一、使用

3.1.一、安装依赖

3.1.二、安装依赖包“cnpm i”---处理缓存

3.1.三、重启项目

3.1.四、在须要使用轮播的页面，作以下操做：

     3.1.4.一、引入轮播组件和其样式

     3.1.4.二、给组件添加一些配置信息

     3.1.4.三、复制结构（在须要使用轮播图的地方，复制以下结构）

     3.1.4.四、在组件data中添加上配置选项

     3.1.4.五、添加信息（四步骤）一览图 

3.二、轮播图实例展现

3.三、Swiper-API

四、favicon制做

---

---

三、轮播组件

• vue-awesome-swiper

• 官网地址：https://www.swiper.com.cn/

• Vue版本文档地址：https://github.com/surmon-china/vue-awesome-swiper

3.一、使用

3.1.一、安装依赖

npm install swiper vue-awesome-swiper --save
// 第一种不行的话，能够 用 第二种！
cnpm install swiper vue-awesome-swiper --save

3.1.二、安装依赖包“cnpm i”---处理缓存

cnpm i

3.1.三、重启项目

npm run dev

此时，包 已经 引入 到了 项目 中 。---【环境-OK】

3.1.四、在须要使用轮播的页面，作以下操做：

     3.1.4.一、引入轮播组件和其样式

import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

     3.1.4.二、给组件添加一些配置信息

export default {
    ...
    components: {
        Swiper,
        SwiperSlide
    },
    directives: {
        swiper: directive
    }
}

     3.1.4.三、复制结构（在须要使用轮播图的地方，复制以下结构）

<swiper ref="mySwiper" :options="swiperOptions">
    <swiper-slide>内容1</swiper-slide>
    <swiper-slide>内容2</swiper-slide>
    <swiper-slide>内容3</swiper-slide>
    <swiper-slide>内容4</swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
</swiper>

     3.1.4.四、在组件data中添加上配置选项

data() {
    return {
        swiperOptions: {  // 轮播的配置信息
            pagination: {
                el: '.swiper-pagination'
            },
            // Some Swiper option/callback...
        }
    }
}

     3.1.4.五、添加信息（四步骤）一览图 

3.二、轮播图实例展现

 

3.三、Swiper-API

四、favicon制做

• 打开 https://tool.lu/favicon/

• 选择图片，选择生成16*16的 favicon

• 将生成的favicon.ico文件放在static目录

• 在index.html中加入下面代码

<link rel="shortcut icon" href="./static/favicon.ico">