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

 

❤記在前面

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

 

1、新建home.vue

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

---

 

 

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

---

 

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

 

2、新建輪播圖組件

1.咱們命名爲carousel,初始樣子：

---

 

 

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

---

 

 

3、引入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）

---

 

 

 

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

 

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

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

---

 

③加了點樣式：

---

 

效果：

 

 以上，完成~~~