vue引入swiper vue使用swiper vue腳手架使用swiper /引入js文件/引入css文件
歡迎加入前端交流群來獲取視頻資料以及前端學(xué)習(xí)資料：749539640
轉(zhuǎn)載文章請注明出處！
如果只是要使用輪播效果的話可以參考下一些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：
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 如果需要分頁器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要導(dǎo)航按鈕 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滾動條 -->
<div class="swiper-scrollbar"></div>
</div>
在需要使用swiper的組件里引入swiper，swiper的初始化放在mounted里（可以把官網(wǎng)例子的啟動 var mySwiper = 刪掉）；
js：
<script>
import Swiper from 'swiper';
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
mounted(){
new Swiper ('.swiper-container', {
loop: true,
// 如果需要分頁器
pagination: '.swiper-pagination',
// 如果需要前進(jìn)后退按鈕
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// 如果需要滾動條
scrollbar: '.swiper-scrollbar',
})
}
}
</script>
css：
在main.js里引入css
import Vue from 'vue'
import 'swiper/dist/css/swiper.css';
然后我們在用到swiper的組件里寫點樣式
<style scoped>
.swiper-container {
width: 500px;
height: 300px;
margin: 20px auto;
}
</style>
-----------------------------------我是分割線-----------------------------------------------------------
方法二：（以下是2017年10月寫的,廢棄）
1.安裝vue-cli
參考地址：https://github.com/vuejs/vue-cli
如果不使用嚴(yán)格語法需要在后三項打no；（加了挺頭疼的，老是報錯，但是對自己的代碼規(guī)范性也是有很大的幫助的）
2.swiper下載示例代碼
參考地址：http://www.swiper.com.cn/usage/index.html
一：單個組件使用：
3.在剛下載好的vue-cli里的helloworld.vue進(jìn)行代碼編寫。
3.1html部分：
1 <template>
2 <div class="hello">
3 <div class="swiper-container">
4 <div class="swiper-wrapper">
5 <div class="swiper-slide">Slide 1</div>
6 <div class="swiper-slide">Slide 2</div>
7 <div class="swiper-slide">Slide 3</div>
8 </div>
9 <!-- 如果需要分頁器 -->
10 <div class="swiper-pagination"></div>
11
12 <!-- 如果需要導(dǎo)航按鈕 -->
13 <div class="swiper-button-prev"></div>
14 <div class="swiper-button-next"></div>
15
16 <!-- 如果需要滾動條 -->
17 <div class="swiper-scrollbar"></div>
18 </div>
19 </div>
20 </template>
3.2 js部分：
這里使用import引入swiper.js文件；
swiper的啟動放在mounted里執(zhí)行；
<script>
import'../assets/js/swiper.min.js'
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
mounted(){
var mySwiper = new Swiper ('.swiper-container', {
loop: true,
// 如果需要分頁器
pagination: '.swiper-pagination',
// 如果需要前進(jìn)后退按鈕
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// 如果需要滾動條
scrollbar: '.swiper-scrollbar',
})
}
}
</script>
3.3css部分：
1 <style scoped>
2 @import'../assets/css/swiper.min.css';
3 body {
4 margin: 0;
5 padding: 0;
6 }
7 .swiper-container {
8 width: 500px;
9 height: 300px;
10 margin: 20px auto;
11 }
12
13
14 </style>
4.看似大工告成，這時候會報錯：
Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<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.當(dāng)然也可以全局使用swiper；代碼如下；
還是在剛才的helloworld.vue進(jìn)行代碼編寫；只是去掉js和css文件的引入！
helloworld.vue代碼：
1 <template>
2 <div class="hello">
3 <div class="swiper-container">
4 <div class="swiper-wrapper">
5 <div class="swiper-slide">Slide 1</div>
6 <div class="swiper-slide">Slide 2</div>
7 <div class="swiper-slide">Slide 3</div>
8 </div>
9 <!-- 如果需要分頁器 -->
10 <div class="swiper-pagination"></div>
11
12 <!-- 如果需要導(dǎo)航按鈕 -->
13 <div class="swiper-button-prev"></div>
14 <div class="swiper-button-next"></div>
15
16 <!-- 如果需要滾動條 -->
17 <div class="swiper-scrollbar"></div>
18 </div>
19 </div>
20 </template>
21
22 <script>
23
24 export default {
25 name: 'HelloWorld',
26 data () {
27 return {
28 msg: 'Welcome to Your Vue.js App'
29 }
30 },
31 mounted(){
32 var mySwiper = new Swiper ('.swiper-container', {
33 loop: true,
34 // 如果需要分頁器
35 pagination: '.swiper-pagination',
36 // 如果需要前進(jìn)后退按鈕
37 nextButton: '.swiper-button-next',
38 prevButton: '.swiper-button-prev',
39 // 如果需要滾動條
40 scrollbar: '.swiper-scrollbar',
41 })
42 }
43 }
44 </script>
45
46 <!-- Add "scoped" attribute to limit CSS to this component only -->
47 <style scoped>
48
49 body {
50 margin: 0;
51 padding: 0;
52 }
53 .swiper-container {
54 width: 500px;
55 height: 300px;
56 margin: 20px auto;
57 }
58
59
60 </style>
main.js文件代碼：
常見報錯解決：
Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
.babelrc文件里的插件項"plugins": ["transform-runtime"],中的transform-runtime刪掉即可；
