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:

<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>

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

方法二:(以下是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 <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.好了问题解决;

1010526960-68dbdcf94fe41125_articlex.jpeg

二:全局使用:

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文件代码:


3460406315-042da1bea5daf8b9_articlex.png

常见报错解决:

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

.babelrc文件里的插件项"plugins": ["transform-runtime"],中的transform-runtime删掉即可;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,293评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,604评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,958评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,729评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,719评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,630评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,000评论 3 397
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,665评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,909评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,646评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,726评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,400评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,986评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,959评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,996评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,481评论 2 342