Vue.js-Day06-PM【項目實戰(附帶 完整項目源碼)-day01-pm：輪播組件（使用、安裝依賴、具體操作過程）、favicon詳細製作】

【項目源碼】
鏈接：https://pan.baidu.com/s/1r0Mje3Xnh8x4F1HyG4aQTA
提取碼：n6ol

目   錄

3、輪播組件

3.1、使用

3.1.1、安裝依賴

3.1.2、安裝依賴包“cnpm i”---處理緩存

3.1.3、重啓項目

3.1.4、在需要使用輪播的頁面，做如下操作：

     3.1.4.1、引入輪播組件和其樣式

     3.1.4.2、給組件添加一些配置信息

     3.1.4.3、複製結構（在需要使用輪播圖的地方，複製如下結構）

     3.1.4.4、在組件data中添加上配置選項

     3.1.4.5、添加信息（四步驟）一覽圖 

3.2、輪播圖實例展示

3.3、Swiper-API

4、favicon製作

---

---

3、輪播組件

• vue-awesome-swiper

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

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

3.1、使用

3.1.1、安裝依賴

 npm install swiper vue-awesome-swiper --save
// 第一種不行的話，可以 用 第二種！
cnpm install swiper vue-awesome-swiper --save

3.1.2、安裝依賴包“cnpm i”---處理緩存

cnpm i

3.1.3、重啓項目

npm run dev

此時，包 已經 引入 到了 項目 中 。---【環境-OK】

3.1.4、在需要使用輪播的頁面，做如下操作：

     3.1.4.1、引入輪播組件和其樣式

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

     3.1.4.2、給組件添加一些配置信息

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

     3.1.4.3、複製結構（在需要使用輪播圖的地方，複製如下結構）

<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.4、在組件data中添加上配置選項

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

     3.1.4.5、添加信息（四步驟）一覽圖 

3.2、輪播圖實例展示

 

3.3、Swiper-API

4、favicon製作

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

• 選擇圖片，選擇生成16*16的 favicon

• 將生成的favicon.ico文件放在static目錄

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

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