vue2项目中使用swiper插件

vue2项目中使用swiper插件

在昨天码完上一篇文章后，突然想起来自己写vue项目时，用的轮播都是element-uI里的。并不是说element-uI里的不好用，但毕竟swiper人家是专业的。

安装步骤

1. 首先简单创建一个vue2项目，配置什么的我都是随便选的，具体使用时还是要以项目要求为准；

vue create test_demo

2. 然后就是通过node来安装swiper插件。这里需要注意的是，swiper默认的话，安装是最新版的swiper7。虽然说swiper7中新增了许多轮播效果，但日常开发中一般都是使用swiper3来进行（看个人爱好和项目要求），所以我们这里安装是需要带上版本号（swiper最后更新版本为3.4.2）：

npm install [email protected] --save

​ 安装完成后可以在package.json文件中查看版本号（其他插件都是如此）

创建自定义组件

1. 在compents目录下为swiper单独创建一个文件夹，并根据需要添加相应文件：

2. 在对应的.vue文件中引入相应的js和css文件：

3. 简单设置容器和轮播内容：

4. 简单设置样式：

5. 创建swiper对象，设置相应属性，并在mounted钩子中调用方法（如果数据是动态获取的，还需要根据情况使用async和await），对应属性的使用可以参照官方文档。演示如下：

调用使用

在需要使用的文件中引用：

效果展示

实际上和在html中使用没有多大的区别，主要还是vue组件的知识。

这里是万物之恋，我们下次再见了！