?記在前面

你有多自律，就有多美好。

一、新建home.vue

1.上一篇為了方便展示，把頭部my-header組件放在了App.vue，現在我們刪掉App.vue裏的頭部組件，然後在view文件裏面新建一個home.vue頁面，之後把頭部組件和今天要講的輪播圖組件都放在home.vue頁面

2.在router->index.js中配置路由，將home.vue組件映射到根路由 / 上：

OK，以上對上篇的修改完成

二、新建輪播圖組件

1.我們命名為carousel,初始樣子：

2.然後去home.vue裏面引入這個輪播組件，引入的方式跟頭部一樣：

三、引入swiper實現輪播圖效果

1.關於vue-awesome-swiper

Github地址：

官網介紹：https://surmon-china.github.io/vue-awesome-swiper/；官網從安裝到使用都介紹的很詳細了

OK，首先從官網選取一種輪播圖效果作為我們項目的輪播圖，以此為例：

2.用npm安裝vue-awesome-swiper

①cmd打開命令行，輸入安裝依賴（我是下到項目node_modules裏的，也可以下載到C盤全局的）

【我後來有報錯是因為swiper，所以我後面也執行過npm install swiper --save，現在先不裝，看後面有沒有報類似錯誤再決定是否安裝】

之後出現一堆，不一樣也沒關系，安裝時沒有報錯的：

②然後，可以在node_modules下找到vue-awesome-swiper，再去下面的package.json下自己添加此依賴（不是vue-awesome-swiper裏面的package.json）

註意：【也有的是直接就會出現，但是我的不是，添加後是可以用的，不報錯】

③安裝vue-resource，步驟同上面安裝vue-awesome-swiper：npm install vue-resource --save

安裝完之後，就可以在package.json下看到了：

3.怎麽用

以上，完成了安裝，現在我們來看看怎麽用

①Github上提供了多種使用方法，我們要在vue項目中用到的主要是選全部引入還是組件中引入，這裏選第二種引入：

②我們按照它的操作，在項目中引入：

③carousel.vue中HTML的結構也按照這個來：

④script中的參數添加分頁參數和自動輪播兩個參數，具體參數註釋上也上說的很清楚了，

跟swiper官方api參數一樣（http://www.swiper.com.cn/api/index2.html）

三、運行看效果（在項目裏選擇文件路徑之後cmd，然後npm run dev）

②在瀏覽器：localhost：8080/#/

（之前做過了，忘記截圖了，就是能看到除了頭部組件外，下面只有一個slide）

③加了點樣式：

效果：

以上，完成~~~

輪播圖組件及vue-awesome-swiper的引入