Vue-cli3中优雅的使用Swiper库创建轮播

林深鹿

于 2019-12-13 15:40:04 发布

阅读量2.5k

点赞数 1

分类专栏： swiper 文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_35117063/article/details/103527529

版权

本文介绍了如何在Vue-cli3项目中优雅地使用Swiper库创建轮播效果。首先通过vue ui界面安装vue-awesome-swiper插件，接着在项目框架中引入该库，并详细说明了在代码中插入和配置swiper轮播的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用swiper创建轮播前，需要先知道一件事，原生代码可以直接使用swiper库。
但是在Vue-CLI中使用的是vue-awesome-swiper插件，以下只介绍vue脚手架中使用swiper，所以文章中的swiper特指vue-awesome-swiper。

在vue-cli2中引入swiper

// vue-cli2 中通过npm安装
npm install vue-awesome-swiper --save-dev

vue-cli3中通过vue ui界面安装

vue ui界面 > 依赖 > 安装依赖 > 搜索vue-awesome-swiper > 选择并安装
在这里插入图片描述

在框架中引入swiper库

// 在vue根目录下 找到main.js文件，此处以vue-cli3项目为例
// 根目录 > src > main.js 
import Vue from 'vue
import vueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

Vue.use(vueAwesomeSwiper)

在代码中插入swiper轮播

// html片段
<swiper

最低0.47元/天解锁文章