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

获取视频资料以及前端学习资料： 

----------------------------------------------------------

                  转载文章请注明出处！               

----------------------------------------------------------

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

 

 

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

下载swiper：

npm install swiper --save-dev

swiper4.0使用入口：；

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

参考地址：

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

2.swiper下载示例代码

参考地址：

一：单个组件使用：

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 '#<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 
     21 22 45 46 
     47 

main.js文件代码：

 常见报错解决：

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

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