在vue中使用swiper

1.swiper安装

npm install vue-awesome-swiper --save

2.查看swiper安装后的文件存放

安装后的swiper存放在node_modules,然后在文件夹里往下找，找到swiper文件夹，就像图片下面的：

3.下载官方示例代码，这步骤是为了参照正常情况下，swiper的实现原理

• 在swiper官网上下载了他的官方示例代码，点击下载地址下载全部示例代码：

• 解压后的文件夹为

所有的示例demo在demos文件夹里

4.一个swiper的完成需要的一些步骤：

1. 在demos里随意打开一个html，可以发现每个文件里都会线引入swiper.css和swiper.min.js:

         

      2.编写swiper标签和内容

       

       3.初始化swiper，以及绑定.swiper-container标签

      

       4.需要注意的是.swiper-slide标签，这个标签是swiper滚动的最基本单位，所以我们要添加的内容只能在swiper里的添加。

5.在vue中使用swiper

      上面提到install swiper后，会在node_modules里得到一个swiper文件夹，里面有js和css。在第4步骤里，我们知道了swiper在html里的实现方法，这里再vue里的步骤大致是一样的，导入swiper的css和js，写好标签，然后初始化swiper，唯一不同的是需要额外导入一个"swiper"文件用来初始Swiper。

步骤如下图片：

这里我在模板挂载后进行初始化Swiper。至此，一个swiper就完成了。