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-devswiper4.0使用入口：http://www.swiper.com.cn/usage/index.html；
html：
在需要使用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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 #### 3.2 js部分：
这里使用import引入swiper.js文件；
swiper的启动放在mounted里执行；
##### 3.3css部分：
1 4.看似大工告成，这时候会报错：
Uncaught TypeError: Cannot assign to read only property 'exports' of object '#这个错误查文档说是：
在webpack打包的时候，可以在js文件中混用require和export。但是不能混用import 以及module.exports。
因为webpack 2中不允许混用import和module.exports
我们只需要吧.babelrc文件里的第11行代码插件项"plugins": ["transform-runtime"],中的transform-runtime删掉即可；
1 {
2 "presets": [
3 ["env", {
4 "modules": false,
5 "targets": {
6 "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
7 }
8 }],
9 "stage-2"
10 ],
11 "plugins": [],
12 "env": {
13 "test": {
14 "presets": ["env", "stage-2"],
15 "plugins": ["istanbul"]
16 }
17 }
18 }5.好了问题解决；
二：全局使用：
6.当然也可以全局使用swiper；代码如下；
还是在刚才的helloworld.vue进行代码编写；只是去掉js和css文件的引入！
helloworld.vue代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
45
46
47 main.js文件代码：
常见报错解决：
Uncaught TypeError: Cannot assign to read only property 'exports' of object '#.babelrc文件里的插件项"plugins": ["transform-runtime"],中的transform-runtime删掉即可；