Vue引入第三方

以輪播圖為例

Swiper開源、免費、強大的觸摸滑動插件

Swiper是純javascript打造的滑動特效插件，面向手機、平板電腦等移動終端

Swiper能實現觸屏焦點圖、觸屏tab切換、觸屏輪播圖切換等常用效果

插件官方文檔網址：Swiper Vue幻燈片切換組件 | SwiperJS中文網

安裝指定版本的命令為：npm install –save swiper@8.1.6

<template><div><swiper :modules="modules" :navigation="true" :loop="true" :pagination="{ clickable: true }"><!-- modules為導入的模塊，綁定導入的模塊導航模塊和分頁模塊，loop實現輪播圖循環模式 --><swiper-slide><img src="../assets/logo.png"></swiper-slide><swiper-slide><img src="../assets/logo.png"></swiper-slide><swiper-slide><img src="../assets/logo.png"></swiper-slide></swiper></div> </template><script> import { Swiper, SwiperSlide } from 'swiper/vue'; import { Pagination } from 'swiper'; import { Navigation } from 'swiper'; import 'swiper/css/pagination'; import 'swiper/css/navigation'; import 'swiper/css'; export default {name: 'HelloWorld',components: {Swiper,SwiperSlide,},data() {return {modules: [Navigation, Pagination]}} } </script>

總結

以上是生活随笔為你收集整理的vue3学习（引入轮播图插件）的全部內容，希望文章能夠幫你解決所遇到的問題。

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