Vue.js實訓【基礎理論(5天)+項目實戰(5天)】博客匯總表【詳細筆記】

實戰項目源碼【鏈接：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">

總結

以上是生活随笔為你收集整理的Vue.js-Day06-PM【项目实战(附带 完整项目源码)-day01-pm：轮播组件（使用、安装依赖、具体操作过程）、favicon详细制作】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。