方法一：

下載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><!-- 如果需要導航按鈕 --><div class="swiper-button-prev"></div><div class="swiper-button-next"></div><!-- 如果需要滾動條 --><div class="swiper-scrollbar"></div> </div>

?

在需要使用swiper的組件里引入swiper，swiper的初始化放在mounted里（可以把官網例子的啟動?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',// 如果需要前進后退按鈕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>

?

-----------------------------------我是分割線-----------------------------------------------------------

方法二：

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 <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 <!-- 如果需要導航按鈕 --> 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里執行；

<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',// 如果需要前進后退按鈕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.當然也可以全局使用swiper；代碼如下；

還是在剛才的helloworld.vue進行代碼編寫；只是去掉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 <!-- 如果需要導航按鈕 --> 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 // 如果需要前進后退按鈕 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刪掉即可；

?

?

?

?

?

?

?

?

.

轉載于:https://www.cnblogs.com/jianxian/p/10693992.html

總結

以上是生活随笔為你收集整理的vue脚手架引入swiper的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。