vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

欢迎加入前端交流群来获取视频资料以及前端学习资料：749539640

---

              转载文章请注明出处！               

---

如果只是要使用轮播效果的话可以参考下一些vue组件；比如这篇文章

--------2019.7.9------------------

请参考swiper官方插件：https://github.com/surmon-china/vue-awesome-swiper

--------2019.7.9------------------

方法一：（ 请先使用这种方法；更新于2018-05-14）

下载swiper：

npm install swiper --save-dev

swiper4.0使用入口：http://www.swiper.com.cn/usage/index.html；

html：

   

       
Slide 1
       
Slide 2
       
Slide 3
   
   
   

   
   
   

   

   
   
   

在需要使用swiper的组件里引入swiper，swiper的初始化放在mounted里（可以把官网例子的启动 var mySwiper = 删掉）；

js：

css：

在main.js里引入css

  import Vue from 'vue'
  import 'swiper/dist/css/swiper.css';

然后我们在用到swiper的组件里写点样式

-----------------------------------我是分割线-----------------------------------------------------------

方法二：（以下是2017年10月写的,废弃）

1.安装vue-cli

参考地址：https://github.com/vuejs/vue-cli

如果不使用严格语法需要在后三项打no；（加了挺头疼的，老是报错，但是对自己的代码规范性也是有很大的帮助的）

2.swiper下载示例代码

参考地址：http://www.swiper.com.cn/usage/index.html

一：单个组件使用：

3.在刚下载好的vue-cli里的helloworld.vue进行代码编写。

3.1html部分：

 1 

3.2 js部分：

这里使用import引入swiper.js文件；

swiper的启动放在mounted里执行；

3.3css部分：

 1 

4.看似大工告成，这时候会报错：

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#